20

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

代码：

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

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

但不知何故，这是行不通的。我检查了一些现有/相关的答案，似乎 jQuery 并没有将脚本标签识别为...脚本标签。iFrame 在同一个域/同一个端口/同一个主机中，所以跨站点脚本等没有问题。我该如何解决这个问题？

4

8 回答 8

26

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

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

var scriptTag = "<script>alert(1)<\/script>";
$("#iframe").contents().find("body").append(scriptTag);

原始解决方案

分解那个结束标签，这样你就不会弄乱 HTML 解析器。此页面上的其他解决方案有效，因为它们</script>的代码中从来没有字符串（jsfiddle）：

var scriptTag = "<script>alert(1)<";
scriptTag +=  "/script>";
console.log(scriptTag);
$("#iframe").contents().find("body").append(scriptTag);

或者（jsfiddle）：

var scriptTag = "<script>alert(1)<"+"/script>";
$("#iframe").contents().find("body").append(scriptTag);
于 2013-08-22T00:33:05.540 回答
8 
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);
        }
    });
}

这是我可以使它工作的最简单的方法。

于 2014-05-14T20:54:11.460 回答
5 
var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

在小提琴中工作

于 2013-08-22T00:17:32.520 回答
4

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

例如，喜欢谷歌分析

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

用这个转义的替换scriptand/script

希望能帮助到你。

于 2013-08-22T00:23:29.750 回答
2

由于 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/。

所以有几点：

  1. 我将整个内容作为一个字符串传递。您必须预先添加data:text/html;charset=utf-8,，然后您可以将您的字符串设置为 iframe 的 src。

  2. 我正在添加带有绝对路径的 jquery.js 文件- 这似乎很重要，大概是因为框架本身没有路径，因为它的内容是动态生成的。

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

于 2013-09-01T04:15:18.333 回答
1

你不需要添加标签脚本来执行 javascript，你可以做一个函数并应用 iframe 上下文......

使用评估

function initFrame (code){

    eval (code);

}

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

没有评估

var initFrame = new Function(js_code);


initFrame.apply ($('#iframe').contents(),[]);
于 2013-08-22T00:36:16.743 回答
0

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

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

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

var iframe = document.getElementById("iframeId");
iframe.contentWindow.myFunction(args);
于 2020-04-30T12:17:08.553 回答
-2

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

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

于 2013-09-01T14:16:20.020 回答