Javascript 如何将 <script> 加载到 iframe 中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3935398/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how can i load <script>'s into an iframe?
提问by Haroldo
I've got the logic working to append into my iframe from the parent
我已经将逻辑从父级附加到我的 iframe 中
this works:
这有效：
$('#iframe').load(function() {
$(this).contents().find('#target').append('this text has been inserted into the iframe by jquery');
});
this doesn't
这不
$('#iframe').load(function() {
$(this).contents().find('body').append('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>');
});
.lf
。如果
The problem is something to do with the inserted script tags not being escaped properly. Half of the javascript is becomes visible in the html, like the first script tag has been abruptly ended.
问题与插入的脚本标签没有正确转义有关。一半的 javascript 在 html 中变得可见，就像第一个脚本标签突然结束一样。
回答by mtrovo
Maybe the error is with your string, never create a string in javascript with a literal < /script>in it.
也许错误出在你的字符串上，永远不要在 javascript 中创建一个带有文字</script>的字符串。
$('#iframe').load(function() {
$(this).contents().find('body').append('<scr' + 'ipt type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></scr' + 'ipt>');
});
回答by T.J. Crowder
I'm a bit surprised that isn't working[Edit: No longer surprised at all, see mtrovo's answer.]...but here's what I do, which is mostlynon-jQuery per your comment below but still quite brief:
我有点惊讶它不起作用[编辑：不再感到惊讶，请参阅mtrovo 的答案。]...但这是我所做的，根据您在下面的评论，这主要是非 jQuery，但仍然很简短：
var rawframe = document.getElementById('theframe');
var framedoc = rawframe.contentDocument;
if (!framedoc && rawframe.contentWindow) {
framedoc = rawframe.contentWindow.document;
}
var script = doc.createElement('script');
script.type = "text/javascript";
script.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
framedoc.body.appendChild(script);
Off-topic: I reallywouldn't give an iframe (or anything else) the ID "iframe". That just feels like it's asking for trouble (IE has namespace issues, and while I'm not aware of it confusing tag names and IDs, I wouldn't be completely shocked). I've used "theframe" above instead.
题外话：我真的不会给 iframe（或其他任何东西）ID“iframe”。感觉就像是在自找麻烦（IE 有命名空间问题，虽然我不知道它会混淆标签名称和 ID，但我不会完全感到震惊）。我在上面使用了“theframe”。
回答by Andriy F.
Warning: loading script in this manner would make scripts running in main window context i.e.: if you use window from somescript.js, it would be NOTiframe's window!
警告：以这种方式加载脚本会使脚本在主窗口上下文中运行，即：如果您使用 somescript.js 中的窗口，它将不是iframe 的窗口！
$('#iframe').load(function() {
$(this).contents().find('body').append('<scr' + 'ipt type="text/javascript" src="somescript.js"></scr' + 'ipt>');
});
To be able to use iframe context inject script with this:
为了能够使用 iframe 上下文注入脚本，请执行以下操作：
function insertScript(doc, target, src, callback) {
var s = doc.createElement("script");
s.type = "text/javascript";
if(callback) {
if (s.readyState){ //IE
s.onreadystatechange = function(){
if (s.readyState == "loaded" ||
s.readyState == "complete"){
s.onreadystatechange = null;
callback();
}
};
} else { //Others
s.onload = function(){
callback();
};
}
}
s.src = src;
target.appendChild(s);
}
var elFrame = document.getElementById('#iframe');
$(elFrame).load(function(){
var context = this.contentDocument;
var frameHead = context.getElementsByTagName('head').item(0);
insertScript(context, frameHead, '/js/somescript.js');
}
