gpt4 book ai didi

javascript - 通过 JS 添加新元素到现有的 Iframe

转载 作者:行者123 更新时间:2023-12-03 11:20:36 32 4
gpt4 key购买 nike

我正在尝试在 iframe 中添加一些 html 元素,以个性化网站。我正在构建一个浏览器扩展,因此不存在跨域问题。我有 iframe:

<iframe id="container" src="http://www.google.com">
<p>Your browser does not support iframes.</p>
</iframe>

然后,当文档已经加载时,我创建元素并插入它......但它永远不会显示在 iframe 中。但我可以获取 iframe 存在的元素并更改其属性。那么,我可以访问这些元素,但不能创建新元素?为什么?

var ifr = document.querySelector("#container");
var ifrDoc = ifr.contentWindow || ifr.contentDocument;
if (ifrDoc.document) ifrDoc = ifrDoc.document;

var elem = ifrDoc.createElement("div");
elem.innerHTML = "Demo Box";
elem.style.width = "50px";
elem.style.height = "50px";
elem.style.position = "absolute";
elem.style.background = "red";

ifrDoc.body.appendChild(elem);

这里有一个 JSFiddle 演示来理解问题(记住扩展有另一个权限):http://jsfiddle.net/TH48e/40/

有什么想法吗?

最佳答案

在评论中澄清后:

var ifr = gBrowser.selectedBrowser.contentDocument.getElementById('container')

不要这样做.contentWindow然后得到 document由此看来,它是无用的冗余等。

也不要这样做querySelector如果你想通过 id 获得一些东西无论如何,巨大的速度差异,getElementById速度要快得多。

也不要这样做.innerHTML插件批准者不会接受它,因为它会导致安全问题。做.textContent .

你的 fiddle 无法工作,因为:

  1. 您无法进行跨框架通信
  2. 我不确定,但我认为:createElement是 javascript 中的“ native ”函数,因此保留在away中,尽管它是 document.createElement但是你啊

这个 fiddle 有效,rawr函数在正文中未定义,我不确定为什么,所以我将脚本移至文档中:

http://jsfiddle.net/TH48e/43/

<script>
function createElementMY(){
var doc = document.getElementById('container');

var ifrDoc = doc.contentDocument;


var elem = ifrDoc.createElement("div");
elem.textContent = 'Test';
ifrDoc.body.appendChild(elem);
}
</script>
<iframe id="container" src="data:text/html,rawr"></iframe>
<button onclick="createElementMY()">Click me!</button>

关于javascript - 通过 JS 添加新元素到现有的 Iframe,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27140118/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com