Question

我已经构建了一个基本上是主页的网页，其中div使用AJAX填充了不同的页面。这基本上通过使用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的斗争，所以我不知道什么解决方案适合我的情况或工作最好。非常感谢任何提示/示例，感谢您的时间。

Answer 1

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

看看这里：jQuery API

Answer 2

从您的代码段开始，您似乎希望在主页中嵌入完整的页面。如果是这种情况，更直接的方法是使用iframe元素。

例如：

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

请参阅reference and usage example。

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

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

无法使用innerHTML导入javascript代码

4 个答案: