Question

有没有办法从另一个HTML文件中获取DOM元素，而不是从调用JS文件的HTML文件中获取元素？

我的想法是创建html模板，并在主html文件中呈现它们，具体取决于JS文件强加的某些条件。

像

这样的东西

＆＃13;

var initScreen = new document(URL);
document.getElementById("body") = initScreen.getElementById("body");

＆＃13;

假设这是正确的方法。

Answer 1

是的。您可以获取远程（或本地）文件，然后使用createHTMLDocument：

＆＃13;

document.querySelector(".the_replacer").addEventListener("click", () => {
    fetch("https://cdn.rawgit.com/ryanpcmcquen/c22afdb4e6987463efebcd495a105d6d/raw/476e97277632e89a03001cb048c6cacdb727028e/other_file.html")
        .then((response) => response.text())
        .then((text) => {
            const otherDoc = document.implementation.createHTMLDocument("Foo").documentElement;
            otherDoc.innerHTML = text;
            document.querySelector(".element_on_main_page").textContent = otherDoc.querySelector(".awesome_external_element").textContent;
        });
});

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="element_on_main_page">Replace me, please.</div>
    <button class="the_replacer">Replace them.</button>
    <script src="index.js"></script>
</body>

</html>

＆＃13;

＆＃13; https://repl.it/@ryanpcmcquen/TurboTremendousProgramminglanguages

这是远程文件的内容：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="awesome_external_element">Foobar.</div>
</body>

</html>

Browser support并不太糟糕。另一方面fetch非常现代，所以如果你想获得遗留支持，你应该使用XMLHttpRequest。

使用JS从不同的html文件访问DOM

1 个答案: