0

我已经建立了一个网页，它基本上是一个主页，其中包含一个使用 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() 放在我的代码周围[我在指南上看到这可能导致恶意用户攻击]。
  • 在主页上创建脚本，然后使用以下命令导入数据：
    • document.createElement() 和 .parentNode.insertBefore()
  • 当我打开 graph.php 时创建一个监听器并调用函数
  • 而这个很好的例子

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

4

4 回答 4

1

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

看看这里：jQuery API

于 2013-01-05T22:24:10.570 回答
1

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

例如：

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

请参阅参考和使用示例。

于 2013-01-05T22:35:05.160 回答
0

较旧的浏览器（例如 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);
于 2013-01-05T22:34:18.403 回答
0

注意：您正在加载的页面（本例中为 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>
于 2013-01-05T22:55:08.843 回答