div innerhtml对象访问父html div

Question

我有 main.html ，其中包含以下div：

<div id="main">

我想在此div中动态加载html（例如 page1.html 和 page2.html ）。我可以通过以下代码完成此任务：

document.getElementById("main").innerHTML='<object type="text/html" data="page1.html" ></object>';

现在，我想要一个按钮id =＆＃34; btn1＆＃34;在我的 page1.html 中，应将 page2.html 加载到div＆＃34; main＆＃34;我的父母 main.html 。 但是，在page1.html中，我无法找到我的容器div＆＃34; main＆＃34;

document.getElementById("main") // returns null

提前感谢您的帮助！

Answer 1

您的问题是尝试使用单个网页的DOM与通过iframe或object加载的内容进行互动。使用这些使JavaScript开发人员的生活变得非常困难。

如果您只使用纯JavaScript，我建议您使用AJAX请求直接通过DOM加载HTML，而不是使用旧方法转换此内容。

这是普通JS AJAX的初学者指南。像jQuery这样的框架极大地简化了这个过程 http://code.tutsplus.com/articles/how-to-make-ajax-requests-with-raw-javascript--net-4855

否则，不。由于跨站点脚本安全功能，您无法访问该节点的内容。