使用Javascript将Iframe插入到Div中-用于Greasemonkey

我需要使用javascript将iframe插入到div中。我需要用javascript编写，这样我就可以在greasemonkey脚本中使用代码（greasemonkey只允许使用javascript）

greasemonkey脚本将把AOL的搜索栏插入各种网站。我已经在下面包含了工作的HTML代码，所以您可以对其进行测试，看看当它工作时最终的结果是什么

以下正是我需要做的，用HTML编写：

<div style="overflow: hidden; width: 564px; height: 43px; position: relative;">
<iframe src="http://aol.com" style="border: 0pt none ; left: -453px; top: -70px; position: absolute; width: 1440px; height: 775px;" scrolling="no"></iframe>
</div>

<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>

我已经知道如何将iframe或div插入到需要插入的站点的源代码中，方法如下：

var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(iframe OR div, getRef);

我不知道怎么做，就是如何将iframe写入div，然后将该div插入源代码。最后一个代码段用于将div或iframe插入到源代码中，但我需要在div中插入iframe，然后将该div插入到源代码中（使用最后一个代码段）

有什么想法吗？

1-你可以用

2-或者像这样将iframe作为html附加到div中

makediv.innerHTML = '<iframe src="http://aol.com" style="border: 0pt none ;'+ 
                    'left: -453px; top: -70px; position: absolute;'+ 
                    'width: 1440px;'+ 
                    'height: 775px;" scrolling="no"></iframe>';

更新：

不能使用

setAttribute

函数设置样式

var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left =  "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";

var makediv = document.createElement("div");
makediv.style.height = "43px";
makediv.style.width = "564px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";

---

使用“在页面上重新加载”将页面重定向到iframe的src URL。
要避免这种情况，请使用沙盒iframe，如下所示：

虽然这两个建议实际上都可以将iframe放入div中，但出于某种原因，iframe显示为完整大小（它从div中“爆炸”）。换句话说，div不包含iframe&它应该隐藏溢出。虽然HTML代码完全按照它应该的方式工作，但它显示了整个页面iframe。iframe页面的左上角显示为与div插入页面的位置的左上角对齐，这告诉我iframe在div中。div不会阻止iframe显示完整大小，就像加载用纯HTML编写的相同代码时一样。也许这是一个油腻的瑕疵？或者JS代码有什么问题吗？@Robert，我第一次看不出来，但是你的代码中还有一个错误，你不能用

setAttribute

函数设置元素的样式，再看看我更新的答案。这真是太棒了，很有效！非常感谢您，不仅感谢您花时间回答，而且感谢您在我留下评论、回顾和重写您的答案后回来。我真的很感激！

var getRef = document.getElementById("div-id-to-insert-element-before");
var parentDiv = getRef.parentNode;
parentDiv.insertBefore(makediv, getRef);

var makeIframe = document.createElement("iframe");
makeIframe.setAttribute("src", "http://aol.com");
makeIframe.setAttribute("scrolling", "no");
makeIframe.style.border = "none";
makeIframe.style.left =  "-453px";
makeIframe.style.top = "-70px";
makeIframe.style.position = "absolute";
makeIframe.style.width = "1440px";
makeIframe.style.height = "775px";

var makediv = document.createElement("div");
makediv.style.height = "43px";
makediv.style.width = "564px";
makediv.style.position = "relative";
makediv.style.overflow = "hidden";

<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>