Question

我想使用jQuery将JavaScript代码段添加到页面中的现有iFrame中。我有以下代码......

代码：

content = "<script>" + js_code + "</script>";

$('#iframe_id').contents().find('body').append(content);

但不知怎的，这不起作用。我检查了一些现有/相关的答案，似乎jQuery不太认可脚本标签为...脚本标签。 iFrame位于相同的域/相同的端口/相同的主机中，因此没有关于跨站点脚本等的问题。我该如何解决这个问题？

Answer 1

问题是，如果您的脚本中包含关闭脚本标记（</script>）并且它过早地关闭了脚本标记，则HTML解析器会感到困惑。

解决方案是逃避/中的"<\/script>"。这是因为JavaScript，（和其他一些语言）中的字符串，任何无效的escape sequences被忽略，因此"\l"被视为"l"，而"\/"被视为{ {1}}。但是，HTML解析器不使用反斜杠来转义它们，因此不会混淆（https://stackoverflow.com/users/405681/keaukraine的信用）。

"/"

原始解决方案

分解结束标记，这样就不会弄乱HTML解析器。此页面上的其他解决方案之所以有效，是因为它们的代码中始终没有字符串var scriptTag = "<script>alert(1)<\/script>"; $("#iframe").contents().find("body").append(scriptTag);

</script>

http://jsfiddle.net/ALpjZ/2/

Answer 2

var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

适用于Fiddle

Answer 3

function putScriptInIframes(script, scriptId) {

   var $iframes = $('iframe');
   $iframes.each(function () {
        var thisDoc = this.contentWindow.document;
        if ( ! thisDoc.getElementById(scriptID)) {
            var scriptObj = thisDoc.createElement("script");
            scriptObj.type = "text/javascript";
            scriptObj.id = scriptId;
            scriptObj.innerHTML = script;
            thisDoc.body.appendChild(scriptObj);
        }
    });
}

这是我能让它发挥作用的最简单方法。

Answer 4

你需要逃避/script。它出现了。

像谷歌分析一样

 $("#iframe").contents().find("body").append(decodeURI("**%3Cscript%3E** alert(2)  **%3C/script%3E**"));

将script和/script替换为此转义

希望它有所帮助。

Answer 5

当iframe以自己的window运行时，您还必须注入jquery.js文件的导入。

<script type="text/javascript" src="/jquery/jquery-ui-1.9.1.custom.js"></script>

编辑：所以我更多地玩这个，这就是我想出来的。

<强> HTML

<iframe id="frame"></iframe>

<强> JS

$("#frame").attr(
   "src", "data:text/html;charset=utf-8," + 
   "<html>" + 
   "<style>.red {color: red}</style>" + 
   "<div class=\"test\">Test</test>" + 
   "<script src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js\"><" + "/script>" +    
   "<script>$(function(){ $(\".test\").addClass(\"red\")});<" + "/script>" +         
   "</html>"
);

这有效，请参阅此处http://jsfiddle.net/WsCxj/。

所以有几点：

我将整个内容作为一个字符串传递。您必须先添加data:text/html;charset=utf-8,，然后才能将字符串设置为iframe的src。
我正在使用绝对路径添加jquery.js文件 - 这似乎很重要，大概是因为框架本身没有路径，因为它的内容是动态生成的。

我将脚本结束标记分割为此<" + "/script>，因为至少firefox会尝试在此时结束实际脚本。更简洁的方法可能是将js作为完全独立的文件。

Answer 6

您不需要添加标记脚本来执行javascript，您可以执行一项功能并应用iframe上下文......

使用eval

function initFrame (code){

    eval (code);

}

initFrame.apply ($('#iframe').contents(),[js_code]);

没有评估

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);

Answer 7

这对我有用，将以下代码粘贴到iframe中的页面中，而不是父页面中：

window.myFunction = function(args) {
   alert("script from iframe");
}

现在添加以下代码以调用上述函数：

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);

Answer 8

如何使用js interval函数设置ajax刷新以获取存储在文件/会话等中的任何数据？

它肯定不是最轻量级的模式，它涉及一点点PHP，但可以完成工作。

如何使用jQuery将JavaScript代码添加到现有的iFrame中？

8 个答案: