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

Posted

技术标签:

【中文标题】如何使用 jQuery 将 JavaScript 代码添加到现有的 iFrame 中？【英文标题】：How to add JavaScript code into existing iFrame using jQuery? 【发布时间】：2013-08-24 12:46:39 【问题描述】：

我想使用 jQuery 将 javascript sn-p 添加到页面中的现有 iFrame 中。我有以下代码...

代码：

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

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

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

【问题讨论】：

请发布所有相关代码。 是的……内容iFrame是我的，基本同域 @Gandalf sn-p 是嵌入在标记 (&lt;script&gt;...&lt;/script&gt;) 中还是单独的 .js 文件中？ 这个 sn-p 将只在（脚本）标签内... 有趣.. 试试这个怎么样：frames[0].window.$ = frames[0].window.jQuery = window.$; 【参考方案1】：

问题在于，如果您的脚本中包含结束脚本标记 (&lt;/script&gt;)，html 解析器会感到困惑，并且它会过早地关闭脚本标记。

解决方案是在"&lt;\/script&gt;" 中转义/。这是因为 JavaScript（和其他一些语言）中的字符串，任何无效的 escape sequences 都会被忽略，所以 "\l" 被视为 "l"，"\/" 被视为 "/"。然而，HTML 解析器不使用反斜杠来转义它们，因此不会混淆（感谢 https://***.com/users/405681/keaukraine）。

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

原方案

分解结束标记，这样您就不会弄乱 HTML 解析器。此页面上的其他解决方案有效，因为它们的代码中从未包含字符串 &lt;/script&gt; (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);

【讨论】：

转义斜线：var scriptTag = "&lt;script&gt;alert(1)&lt;\/script&gt;"; - jsfiddle.net/tLHn5 @keaukraine 这是一个很棒的技术，以前从未见过，因为不需要逃避正斜杠。我想知道是否指定了这种行为。 转义斜线效果很好。我将脚本标签直接放入 src 中，没有任何问题【参考方案2】： 
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);
        
    );

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

【讨论】：

【参考方案3】： 
var script = "alert('hello world');";
$('#iframe').contents().find('body').append($('<script>').html(script))

在Fiddle工作

【讨论】：

想解释一下有什么区别？我看到它有效，但不明白为什么 我相信区别与jQuery中text()方法和html()方法的区别是一样的。如果您要附加一个字符串，它可能不会被评估为 html 那么它一定与脚本标签有关。 @JuanMendes 不完全清楚为什么原来的不起作用，但猜测 sn-p 在 &lt;script&gt; 元素中，其中提到 &lt;/script&gt; 会关闭元素而不是保留为String 值。这避免提及它。 @JonathanLonowski 没错，我在您输入此评论时添加了一个解释它的答案。【参考方案4】：

您需要转义/script。 它出现了。

例如喜欢谷歌分析

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

用这个转义的替换 script 和 /script

希望对你有帮助。

【讨论】：

这行得通，但在我看来仍然没有意义，请补充说明 好吧.. 我想 jQuery 正在使用脚本进行某种验证。 不是jquery，我找到问题了，贴个答案【参考方案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 文件 - 这似乎很重要，大概是因为框架本身没有路径，因为它的内容是动态生成的。 p>

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

【讨论】：

嗯...您是否尝试将整个内容构建为一个字符串，然后将其设置为 iframe 的 src 属性？ l=" @Gandalf 查看编辑，可行。您可能可以使用它并使用您的 jQuery 方法使其也可以工作，但通常字符串构建 HTML 无论如何都比在 jQuery 中更快。 在 IE9 中，iframe 显示“无法显示网页”错误。有什么原因吗？ IE 可能需要一点特殊处理，请查看此线程：***.com/questions/16504816/…【参考方案6】：

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

使用评估

function initFrame (code)

    eval (code);



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

没有评估

var initFrame = new Function(js_code);


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

【讨论】：

使用 new Function 与 eval 基本相同。在另一个框架的上下文中运行函数可能会出现问题并且难以调试，因为两个上下文中的全局对象是不同的...... eval 收不到return 语句，function 无法解析像(5) 这样的值，eval 和 new Function 不同。 是的，它们略有不同，但在您的情况下，这根本不重要。 new Function 仍然在引擎盖下进行评估。因此，为new Function 避免eval 也不是更好。 eval 可能不允许使用 return 语句，但它会返回最后一个被评估的表达式的值。 如果 js_code 的内容是核心 JavaScript，这似乎可以工作。如果 js_code 的内容是一个 jQuery sn-p 怎么办？这似乎不起作用。有什么建议吗？【参考方案7】：

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

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

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

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

【讨论】：

【参考方案8】：

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

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

【讨论】：

以上是关于如何使用 jQuery 将 JavaScript 代码添加到现有的 iFrame 中？的主要内容，如果未能解决你的问题，请参考以下文章

如何使用jquery将javascript代码注入iframe头部

如何使用 javascript/jquery 将大型 html 块附加到刀片文件？

如何将jquery转换为javascript

当您使用 javascript 或 jquery 将鼠标悬停时，如何使图像或按钮发光？

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

如何使用 javascript 或 jquery 将 html 表单数据保存到 sql db [关闭]