如何在 iframe 中添加包含 jquery 脚本的 html 页面的结果
Posted
技术标签:
【中文标题】如何在 iframe 中添加包含 jquery 脚本的 html 页面的结果【英文标题】：How to add result of html page which contains jquery scripts in iframe 【发布时间】：2017-07-07 18:53:03 【问题描述】：我得到了包含 Jquery 脚本的 html 页面的结果。 我在 iframe 中加载这个 html 并且 jquery 没有加载
$("#getQesAnsButton").click(function()
$.get("/getQesAns", function(data, status)
$("#Qs").contents().find("body").html(data);
//$("#Qs").contents().find("html").html(data);
);
);
我得到的 html（在“数据”中）看起来：
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function()
$("#buttonSubmit").click(function()
console.log("Button Clicked");
);
)
</script>
</head>
<body>
<form id="formQues1" action="">
<legend> Q# 1 </legend>
<input type="radio" name="rad" value="1"> Q1A1
<br>
<input type="radio" name="rad" value="2"> Q1A2
<br> </form>
<form id="formQues2" action="">
<legend> Q# 2 </legend>
<input type="radio" name="rad" value="1"> Q2A1
<br>
<input type="radio" name="rad" value="2"> Q2A2
<br> </form>
<button id="buttonSubmit"> Submit </button>
</body>
</html>
如何将我在“数据”变量中获取的 html 页面（其中包含他头脑中的 JQuery 脚本）加载到 iframe 中并加载脚本？
【问题讨论】：
您是否在询问如何更改已加载 iframe 的整个主体，使其head 数据保持不变？这听起来充满了隐私和跨浏览器限制问题。你想达到什么目的？您要替换 iframe 的主体而不是加载您控制的主体是什么？为什么你不能获取其他 iframe 正在加载的脚本并将它们加载到你的新 iframe 中？
Iframe 包含其他用户操作的结果。稍后将使用 iframe（包含所有逻辑）将表单结果发送到服务器
如果您可以控制原始 iframe 的代码，并且正在考虑替换整个正文。您应该能够创建另一个完全具有正确身体和头部的 iframe。作为一般的经验法则，你不能轻易地进入或退出 iframe，尤其是当你试图替换整个 body 时。简单的消息传递是可能的，但您可能以错误的方式处理您的问题。您能否在您的问题中更具体地解释您为什么要尝试做您想做的事情。
【参考方案1】：
棘手的部分是你应该得到响应作为字符串替换每个脚本标签在使用它之前检查我对这个问题的回答：https://***.com/a/7002297/427622
注意：当您使用 JQuery 将字符串附加到 iframe 时，它会首先将字符串转换为 JQuery 对象，这将强制 JQuery 评估所有 JavaScript 标签，这将使其在主页面中被评估，然后再附加到iframe
【讨论】：
以上是关于如何在 iframe 中添加包含 jquery 脚本的 html 页面的结果的主要内容，如果未能解决你的问题，请参考以下文章
如何在 Google Chrome 中使用 iframe 查看包含 JQuery 的网页
如何使用 jQuery 将 JavaScript 代码添加到现有的 iFrame 中？
如何在 Wordpress 插件中使用 jQuery 从 Iframe 调用 Iframe？