如何将<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>');    
});

.如果

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

Answer 1

也许错误在于你的字符串,永远不会在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>');    
});

Answer 2

我有点惊讶的是没有工作 [编辑:不再感到惊讶,请看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);

偏离主题:我真的不会给iframe(或其他任何东西)ID"iframe".这只是感觉它有问题(IE有命名空间问题,虽然我不知道它混淆标签名称和ID,但我不会完全震惊).我上面使用了"theframe".

Answer 3

警告：以这种方式加载脚本会使脚本在主窗口上下文中运行，即：如果您使用 somescript.js 中的窗口，它将不是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');
}