5

我需要使用 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 插入源代码（使用最后一个代码片段）。

有任何想法吗？

4

2 回答 2

12

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";
于 2012-05-15T11:18:10.393 回答
0

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

<pre>
<code>
<iframe sandbox="allow-forms allow-same-origin allow-scripts" src="https://yoururl.com/"></iframe>
</code>
</pre>
于 2020-01-14T17:08:25.137 回答