如何将动态JavaScript代码插入iframe
[英]How in insert dynamic JavaScript tag into iframe
问题描述
FINAL UPDATE: The second code block is working--I just miss-typed the URL. 
最终更新：第二个代码块正在工作-我只是错误地键入了URL。
I'm trying to place a dynamically created script into an iframe. 我正在尝试将动态创建的脚本放入iframe。 I can access the head of the iframe, but it doesn't seem to accept the append request. 我可以访问iframe的头部，但它似乎不接受附加请求。 The console log call returns the head tag, and the following append of text into the body works fine. 控制台日志调用返回head标记，并且以下文本附加到主体中的效果很好。 I've also tried appending the script tag to the body. 我也尝试将script标签附加到正文中。 (note: the script tag is not on the same domain, so I've avoided using getScript or ajax). （注意：script标记不在同一个域中，因此我避免使用getScript或ajax）。
$(document).ready(function() {
$('<iframe></iframe>', {
name:"contentFrame"
,id:"contentFrame"
}).css("height", 300).css("width", 500).load(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//cross-domain.com/script.js";
console.log($(this).contents().find("head")); // outputs: [<head></head>]
$(this).contents().find("head").append(script); // doesn't work
$(this).contents().find("body").append(script); // doesn't work
$(this).contents().find("body").append("Test"); // works
}).appendTo("#content");
});
Here is the new version that successfully appends the script based upon the suggestion below, but the script doesn't evaluate (as tested by a simple alert). 这是根据以下建议成功添加脚本的新版本，但是脚本没有评估（通过简单的警报测试）。 Plus, another oddity: the "working" icon displays for about 15 seconds and the status (in chrome) says "retrieving..." Eventually it stops, but nothing happens. 另外，还有一个奇怪的地方：“工作”图标显示约15秒钟，状态（镶边）显示为“正在检索...”，最终它停止了，但是什么也没发生。
$(document).ready(function() {
$('<iframe></iframe>', {
name:"contentFrame"
,id:"contentFrame"
}).css("height", 300).css("width", 500).load(function() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "//cross-domain.com/script.js";
console.log($(this).contents().find("head"));
$(this).contents().find("head")[0].appendChild(script);
$(this).contents().find("body").append("Test");
}).appendTo("#content");
});
Update: When the cursor icon finally finishes working (about 10 seconds, which is odd because it's a local server with one line of code), I get this message in the Chrome console (it's in all red with a red circle "X" icon next to it): 更新：当光标图标最终完成工作时（大约10秒钟，这很奇怪，因为它是具有一行代码的本地服务器），我在Chrome控制台中收到了此消息（全部为红色，带有红色圆圈“ X”图标）在它的旁边）：
GET http://cross-domain.com/script.js
(anonymous function)temp.html:16
jQuery.event.dispatchjquery-1.7.1.js:3261
jQuery.event.add.elemData.handle.eventHandlejquery-1.7.1.js:2880
jQuery.fn.extend.appendjquery-1.7.1.js:5771
jQuery.fn.extend.domManipjquery-1.7.1.js:5973
jQuery.fn.extend.appendjquery-1.7.1.js:5769
jQuery.each.jQuery.fn.(anonymous function)jquery-1.7.1.js:6162
(anonymous function)temp.html:18
jQuery.Callbacks.firejquery-1.7.1.js:1049
jQuery.Callbacks.self.fireWithjquery-1.7.1.js:1167
jQuery.extend.readyjquery-1.7.1.js:435
DOMContentLoaded
2 个解决方案
解决方案1
2 已采纳 2012-02-03 15:50:24
See this answer https://stackoverflow.com/a/3603496/220299 看到这个答案https://stackoverflow.com/a/3603496/220299
It may in fact be working, but the script tag is just not visible. 它实际上可能正在工作，但是script标签只是不可见。
解决方案2
0 2012-02-03 15:44:14
Try this. 尝试这个。
$(document).ready(function() {
$('<iframe></iframe>', {
name:"contentFrame"
,id:"contentFrame"
}).css("height", 300).css("width", 500).load(function() {
$(this).contents().find("head").append('<scr' + 'ipt type="text/javascript" src="//cross-domain.com/script.js"></scr' + 'ipt>');
}).appendTo("#content");
});
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.