如何将 <script> 加载到 iframe 中？

Question

我的逻辑可以从父级添加到我的 iframe 中

这行得通：

$('#iframe').load(function() {
  $(this).contents().find('#target').append('this text has been inserted into the iframe by jquery');    
});

这不是

$('#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

问题与插入的脚本标签没有正确转义有关。 一半的 javascript 在 html 中变得可见，就像第一个脚本标签突然结束一样。

Answer 1

也许错误在于您的字符串，切勿在 javascript 中创建带有文字 的字符串。

$('#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>');    
});

Answer 2

我有点惊讶，这不起作用 [编辑：一点也不惊讶，请参阅mtrovo's answer。]...但这就是我做，根据您在下面的评论，这大部分不是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);

题外话：我真的不会给 iframe（或其他任何东西）ID“iframe”。感觉就像是在自找麻烦（IE 存在命名空间问题，虽然我不知道它会混淆标签名称和 ID，但我不会完全震惊）。我使用了上面的“theframe”。

Answer 3

警告：以这种方式加载脚本会使脚本在主窗口上下文中运行 即：如果您使用 somescript.js 中的窗口，那将是 NOT iframe 的窗口！

$('#iframe').load(function() {
    $(this).contents().find('body').append('<scr' + 'ipt type="text/javascript" src="somescript.js"></scr' + 'ipt>');    
});

为了能够使用 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');
}