Question

我需要使用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>

我需要让这个HTML代码在greasemonkey中运行，这需要用javascript编写。这是我到目前为止所得到的（我的最后一个问题在“伪代码”之下）：

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

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

我已经知道如何插入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插入到源代码中（使用最后一段代码片段）。

有什么想法吗？

Answer 1

1-您可以使用element.appendChild

makediv.appendChild(makeIframe);

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>';

将makediv插入到你想要的地方，

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

<强>更新

您无法使用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";

Answer 2

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

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

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

2 个答案: