如何在iframe的本地范围内执行注入的javascript代码？

2023年11月22日 508次阅读

我在iframe中加载了一个html文档.

我已经在
javascript中为该文档开发了一些弹出菜单代码,我将代码从主文档注入iframe.

但我的代码在iframe中不起作用,因为它使用“文档”对象,并且令人惊讶地引用主文档而不是iframe文档.

我也玩内容选择,我需要window.getSelection(),它返回到主文档的选择,我需要window.frames [0] .getSelection().

我做错了吗？
有没有简单的解决方案来克服这个问题？

更新：(澄清)
正如Bergi指出的那样,我的问题是如何运行正确注入的javascript代码来获取iframe中的本地范围而不是全局范围？
所以我不必在代码中重写文档和窗口…

更新：
(我的HTML的骨架)

<html>
  <head></head> <!-- script launches on jquery's $(document).ready -->
  <body>
    <iframe>
    [
      <body>
        ...
        <script></script> <!-- code injected here from the code (appended to the body) -->
      </body>
    ]
    </iframe>
  </body>
</html>

脚本是这样的(使用jquery)：

$(function(){
$('iframe').load(function(){

var $doc = $('iframe').contents();
var $head = $('head', $doc);
$head.append('<link rel="stylesheet" href="/stylesheets/book-popup-menu.css" />');

var $body = $('body', $doc);
$body.append(' \
    <div id="popup"> \
    </div> \
');
$body.append(' \
    <script type="text/javascript"> \
              console.log(document.body);// it still displays the global body \
            </script> \
');
});
});

更新：A fiddle demonstrating the issue

最佳答案 最后,我找到了答案！

如果您使用jQuery(如$body.append(‘< script>‘))附加jQuery代码,那么”元素将由document.createElement(‘script’)创建,因此将成为全局文档的一部分.即使将其插入iframe文档后,它也将在全局命名空间中执行.

所以解决方案是 – 利用这个神话般的解决方案：(Injecting Javascript to Iframe) – 回归到vanilla javascript：

$('iframe').load(function(){

    var $doc = $('iframe').contents();
    var $head = $('head', $doc);
    $head.append('<link rel="stylesheet" href="/stylesheets/book-popup-menu.css" />');

    var $body = $('body', $doc);
    $body.append('<div id="popup"></div>');// non-javascript content works fine

    var doc = $('iframe').contents()[0]; // doc = $doc[0] does not work for some reason... 

    var script = doc.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.textContent = "console.log(document.body)"; // this will be iframe's body
    $body[0].appendChild(script1); // $body.append(...) does not work
});
点赞