Question

我有以下内容..

var insertbeforenode = document.body;


var outerdiv = doc.createElement('div');
outerdiv.id = '_dialog_div';
outerdiv.style.display = "none"; 

var overlay = doc.createElement("link");
overlay.href = chrome.extension.getURL("overlay.css");
overlay.rel = "stylesheet";
overlay.type = "text/css";
outerdiv.appendChild(overlay);

var iFrame = doc.createElement('iframe');
iFrame.id = '_dialog_iframe';
iFrame.name = '_dialog_iframe';

outerdiv.appendChild(iFrame);
doc.body.appendChild(outerdiv);

然而，正如预期的那样，它会将outerdiv附加到页面底部，这不是我想要做的。我想在insertbeforenode之前插入它。我尝试过insertbeforenode.parentNode.insertBefore(outerdiv, insertbeforenode);，但这似乎不适用于Chrome。有没有人有任何解决方案？

编辑：只是为了澄清我想要创建的效果是..

<html>
  <head></head>
    <iframe here> </iframe here>
  <body> </body>
</html>

Answer 1

当我在Firefox中执行此操作时：

<html>
    <head></head>
    <iframe> </iframe>
    <body> </body>
</html>

看起来与此相同：

<html>
    <head></head>
    <body>
        <iframe></iframe>
    </body>
</html>

但是您的评论和注释表明您试图将iframe放在页面上而不会改变基础内容的外观。

你真正想要的是这种结构：

<html>
    <head></head>
    <body>
        <!-- Normal content goes here -->
        <iframe>
            <!-- Added iframe goes at the bottom -->
        </iframe>
    </body>
</html>

然后在position:absolute;上设置iframe;给它通常的width和height;然后设置top，left和margins to center。您可能需要在z-index上使用iframe值，但这取决于网页的内容。

在<body>底部添加一个绝对定位的元素是实现您尝试执行的操作的常用方法，并且在任何可以处理{{1}的浏览器中它的工作方式几乎相同}。

这是一个简单的例子：http://jsfiddle.net/ambiguous/KrjBv/。你已经知道如何做JavaScript了，我只是想说明CSS定位，所以我用jQuery来减少噪音。

在HTML页面的正文中的特定点放置iframe？

1 个答案: