如何在iframe的本地范围内执行注入的javascript代码？ [英] How can I get injected javascript code executed in local scope in iframe?
问题描述
我在iframe中加载了一个html文档。
我在javascript中为该文档开发了一些弹出菜单代码，然后将代码从主文档中注入iframe。
I have a html document loaded in an iframe.
I have developed some popup-menu code in javascript for that document and I inject the code into the iframe from the main document.
但是我的代码在iframe中不起作用，因为它使用了 document 对象，这令人惊讶地引用了主文档和不是iframe文件。
But my code does not work in the iframe because it uses the "document" object and that surprisingly refers to the main document and not the iframe document.
我也玩内容选择，我需要 window.getSelection（）这会回到主文件的选择，我需要 window.frames [0] .getSelection（）而不是。
I also play around content selection and there I need window.getSelection() which goes back to the main document's selections and I'd need window.frames[0].getSelection() instead.
我在做什么......错误？
有没有简单的解决方案可以解决这个问题？
Am I doing sth wrong?
Is there any simple solution to overcome this?
更新：（澄清）
正如Bergi所指出的，我的问题是关于如何运行正确注入的javascript代码以获取iframe中的本地范围而不是全局范围？
所以我不必须在代码中重写文件和窗口 ...
UPDATE:(clarification)
As Bergi pointed out, my question is about how to run correctly injected javascript code to get local scope and not global scope in the iframe?
So I do not have to rewrite document's and window's in the code...
更新：
（我的html的骨架）
UPDATE: (skeleton of my 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）：
The script goes like this (using 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> \
');
});
});
UPDATE ：演示问题的小提琴
推荐答案
最后，我发现了答案！
如果您使用jQuery附加代码，例如 $ body.append（'< script>'）然后''元素由创建document.createElement（'script'）因此将成为全局文档的一部分。即使将其插入iframe文档后，也会在全局命名空间中执行。
If you append code with jQuery like $body.append('<script>') then the '' element gets created by document.createElement('script') thus will be part of the global document. Even after it is inserted to the iframe document, it will execute in the global namespace.
所以解决方案是 - 利用这个神话般的解决方案:( 将Javascript注入iframe ） - 回归香草javascript：
So the solution is -- taking advantage of this fabulous solution:(Injecting Javascript to Iframe) -- to fall back to 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
});
这篇关于如何在iframe的本地范围内执行注入的javascript代码？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
