將iframe放在HTML頁面正文的特定位置？

我有以下..將iframe放在HTML頁面正文的特定位置？

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>

來源

2011-02-11 Skizit

如果我正在閱讀此權限，您正試圖在*``之前插入*？你確定這就是你的追求？ – 2011-02-11 15:45:48

當我這樣做在Firefox：

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

它看起來與此相同：

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

但是您的意見和筆記表明您正在嘗試p在頁面上綁定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來減少噪音。

來源

2011-02-11 18:58:34

將iframe放在HTML頁面正文的特定位置？

回答

相關問題