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

我的想法是制作html模板,并将其呈现在主要的html文件中,具体取决于JS文件施加的某些条件。

就像是



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





假设这是正确的方法。

最佳答案

是的您可以获取一个远程(或本地)文件,然后使用createHTMLDocument



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;
        });
});

<!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>




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

关于javascript - 使用JS从其他HTML文件访问DOM,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/48759219/

10-13 00:01
查看更多