将 iframe 放置在 HTML 页面正文中的特定位置？答案

【问题标题】：place iframe at specific point in HTML page's body?将 iframe 放置在 HTML 页面正文中的特定位置？
【发布时间】：2011-06-25 15:39:20
【问题描述】：

我有以下..

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>

【问题讨论】：

如果我没看错，您是在尝试将其插入 before <body>?你确定这就是你所追求的吗？
是的，这样做会产生我希望在 Firefox 中实现的效果，但由于某种原因，在 Chrome 中执行 insertbeforenode.parentNode.insertBefore(outerdiv, insertbeforenode); 不起作用。
@Skizit 只有 HEAD 和 BODY 在 HTML 元素内有效 - 您尝试做的事情不是标准化的。您应该认真重新考虑您的方法。
@Sean 我意识到这一点，但我希望重新创建在 Firefox for Chrome 中完成的效果。
@Skizit ...好吧，这和你把它放在体外有什么关系？像我们其他人一样使用 css 和绝对定位。

标签： javascript html dom google-chrome

【解决方案1】：

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

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

看起来和这个一样：

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

但是您的 cmets 和注释表明您正在尝试将 iframe 放在页面上而不改变底层内容的外观。

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

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

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

在<body> 的底部添加一个绝对定位的元素是实现您想要做的事情的常用方法，它在任何可以处理iframe 的浏览器中的工作方式几乎相同。

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

【讨论】：