无法使用 innerHTML 导入 javascript 代码答案

【问题标题】：Can't import javascript code with innerHTML无法使用 innerHTML 导入 javascript 代码
【发布时间】：2013-01-05 22:18:50
【问题描述】：

我已经构建了一个网页，它基本上是一个主页，其中包含一个使用 AJAX 填充不同页面的 div。这基本上是通过使用 innerHTML 将页面加载到 div 中来工作的。我遇到的一个问题是，当一个带有 javascript 的页面被加载到该 div 中时，所有其他代码都运行良好；只是 javascript 不起作用。

主页（index.php）：

<html>
<head>
<script type="text/java">
////bunch of functions////
////Ends up that page_request on this instance is 'graph.php'////
document.getElementById('mydiv').innerHTML=page_request.responseText
</script>
</head>
<body>
<div id="mydiv"><div>
</body>
</html>

子页面（在 div(graph.php) 中加载）：

<html>
<head>
<link rel="stylesheet" href="mystyle.css" type="text/css" media="screen" />
<script src="other_stuff.js"></script>
</head>
<body>
<script>
///bunch of script////
</script>
</body>
</html>

现在在加载页面本身时（打开 graph.php）我注意到一切正常；只是当我通过 innerHTML 将 graph.php 导入 index.php 到我的 div 时它不起作用（没有错误，只是没有显示）。我已经阅读了许多其他帖子和指南，但没有提出任何独特的解决方案；我认为我见过的是：

将 eval() 放在我的代码周围 [我在 guide 上看到这可能导致恶意用户攻击]。
在主页上创建脚本，然后使用以下命令导入数据：
- document.createElement() 和 .parentNode.insertBefore()
创建一个监听器并在我打开graph.php时调用函数
这个好example

尽管我不能 100% 确定这个例子是如何工作的，因为我有 php 填充信息供 javascript 收集，然后在 graph.php 上制作我的图表；因此，如果我将该函数放入 index.php 中，则 php 将已加载，因此我将不得不刷新页面或调用它们以某种方式更新信息。只是在某些情况下，我在 php 方面还可以，但我是新手，并且在使用 javascript 时遇到了困难，所以我不知道哪种解决方案最适合我的情况或效果最好。任何提示/示例将不胜感激，感谢您的宝贵时间。

【问题讨论】：

首先，您要导入整个页面并将其放入 div 中，包括。您请求的页面应该只有应该放在 div 中的 html。

标签： javascript ajax html import innerhtml

【解决方案1】：

从您的代码 sn-ps 看来，您希望在主页中嵌入完整页面。如果是这种情况，更直接的方法是使用 iframe 元素。

例如：

 ...
 <div id="main-page-container">
     <iframe src="some-path/graph.php" scrolling="no" frameborder="no"></iframe>
 </div>
 ...

见reference and usage example。

【讨论】：

我已经阅读了一些关于 iframe 与 div 的辩论，所以我想只使用 div，因为我更容易找到该文档。但是，如果我使用这种 iframe 技术来加载不同的页面，该页面上的所有代码会在它被放到主页之前被执行吗？因此，如果我得到它，iframe 会打开一个页面运行所有内容，然后导入；而 div 只是导入页面代码？如果我错了，请纠正我。
在一个 div 中，你不能包含一个带有 html 正文的整个页面。 iframe 就像在您的页面内它自己的小窗口内包含完全独立的页面。所以 iframe 中的 javascript 将执行，但在它自己的页面的上下文中，而不是你的。
如果您指的是 Javascript 代码，那么是的，它会在浏览器的客户端自动加载，就像任何网页一样。如果您指的是 PHP 代码，那么它将在服务器端执行，然后再提供给浏览器。
所以 div 就像它只是从另一个页面导入代码来制作一个大页面； while 和 iframe 知道另一个页面是独立的，并分别执行其代码并将结果加载到主页上。
iframe 中的页面与您的页面完全分离，因此该页面的代码不会添加到您的页面中。您的主页只是在 iframe 中引用了该页面，并且 iframe 在您页面上的一个窗口中显示该页面，给它一种错觉，它是您页面的一部分。

【解决方案2】：

我建议为此使用 jQuery 的 .load() 函数。

看这里：jQuery API

【讨论】：

所以对于这个例子我可以使用... $('#mydiv').load('graph.php');并且所有的 java/php 函数都将在 graph.php 页面上退出；那么所有这些数据都会被加载到 mydiv 中吗？对不起，我不熟悉java；所以 .load 和 .innerHTML 的区别对我来说不是很明显；但是谢谢，我会尝试在我的代码中运行它。
是的，应该可以。执行 PHP 函数以生成输出，输出被发送到浏览器，其中 jQuery 将输出加载到您的 div 并执行 JavaScript。

【解决方案3】：

IE8 及以下版本的旧浏览器不允许您以任何形式插入包含 javascript 的字符串并执行它。

举个例子：

function addScriptText(js_code) {
    var element = document.createElement("script");
    element.innerHTML = js_code;
    document.head.appendChild(element);
}

无法在 IE8 及以下版本中使用。

您必须使用 eval 来完成此操作：

function addScriptText(js_code) {
    window.eval.call(window, js_code);
}

否则需要动态请求外部js文件如：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = "externalScript.js";
document.getElementsByTagName("head")[0].appendChild(script);

【讨论】：

【解决方案4】：

注意：您正在加载的页面（本例中为 page2.html）必须与正在加载它的页面（本例中为 page1.html）位于同一域中

使用 jQuery 的工作解决方案：

第 1 页：

<!DOCTYPE html>
<html>
<head>
<title>Page 1</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("#page2").load("page2.html");
    });
</script>
</head>
<body>
<h1>Page 1 Header</h1>
<div id="page2">
</div>
</body>
</html>

第 2 页：

<h2>Page 2 Header</h2>

<script type="text/javascript">
    alert("Page 2 loaded and javascript executed!");
</script>

【讨论】：