我正在处理这两个现有的链接,试图结合这里列出的策略。
如何在另一个 JavaScript 文件中包含一个 JavaScript 文件?
在动态插入的 jQuery 库完成加载后执行我的 jQuery 脚本
我已经将我的问题归结为一个简单的脚本来演示我遇到的问题。我有这两个文件:
测试2.html:
<script type="text/javascript">alert('test');</script>
foreign html;
测试1.html:
<script type="text/javascript" language="javascript">
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "test2.html", true);
xmlhttp.send();
</script>
<div id="myDiv">my div</div>
所以很明显 test1.html 应该对 test2.html 进行 ajax 调用,并将它的 HTML 写入 div。当我运行 test1.html 时,它会执行此操作 - div 显示来自 test2.html 的“外部 html” - 但是它不执行警报框。直接访问 test2.html 确实会显示警告框。
所以换句话说,我需要获取远程网页的内容,并将其插入到 div 中,并执行它的 javascript。“真正的”test2.html 将使用 jquery,因此 test1.html 不能使用它,否则我将加载 jquery 两次。
====================================================
根据警告我有关 XSS 并建议我更改架构的评论,我正在对其进行编辑以进行详细说明。这个项目的目标是我的用户可以在他们的网站上粘贴的“一块”html,这会带来很多功能。他们引入的功能包括加载 jquery 插件和 HTML。是的,我的用户必须相信我不会 XSS 攻击他们。就像您在使用 Google Analytics 时相信 Google 不会对您进行 XSS 攻击一样。我的帖子不是在寻求安全建议。我只是想让这个简单的“hello world”类型的示例工作。真正的应用程序是安全的。
当我在 test1.html 中使用 jquery 时,它确实导致 test2.html 中的 JS 被执行,但这只是一个人为的示例,与我的真实应用程序相比过于简化。真正的应用程序在 test2.html 中使用了大量的 jquery - 我需要能够在我的服务器上更新 test2.html,而不给我的用户新版本的 test1.html。让 test1.html 加载它自己的 jquery 版本是很多开销,只是包含 test2.html。