使用JS从其他HTML文件访问DOM
[英]Access DOM from a different html file with JS
问题描述
有没有办法从另一个HTML文件中获取DOM元素，而不是从调用JS文件的HTML文件中获取元素？
我的想法是制作html模板，并将其呈现在主html文件中，具体取决于JS文件施加的某些条件。
就像是
var initScreen = new document(URL); document.getElementById("body") = initScreen.getElementById("body");
假设这是正确的方法。
1 个解决方案
解决方案1
2 已采纳 2018-02-13 04:33:28
是的。 您可以获取一个远程（或本地）文件，然后使用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>
这是远程文件的内容：
<!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>
浏览器支持还不错。 另一方面， fetch非常现代，因此，如果要使用旧版支持，则应使用XMLHttpRequest 。
React从同一index.js的不同HTML页面渲染多个DOM元素
[英]React render multiple DOM elements from different HTML pages from same index.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.