如何替換現有的iframe而不是將其附加到文檔正文？

雖然渲染iframes，我使用的代碼：如何替換現有的iframe而不是將其附加到文檔正文？

ifrm = document.createElement("IFRAME"); 
ifrm.style.width = "100%"; 
ifrm.style.height = 600+"px"; 
function makeFrame() { 
document.body.appendChild(ifrm); 
}

然而，這保持現有下方追加iframes，每次我調用該函數makeFrame()時間。所以，如果我打電話makeFrame()（說三次），那麼我得到三個iframes之一。如何防止並取代現有的而不是追加到最後一個？

來源

2013-01-11 saikat

最簡單的回答：

如果你想改變你的代碼儘可能少，和你在任何給定的時間

function makeFrame() { 
oldiframe = document.getElementsByTagName("IFRAME")[0] 
// getElementsByTagName will return an array (a list). 
// Adding [0] will return the first (and, under our assumptions, only) element 
ifrm = document.createElement("IFRAME"); 
ifrm.style.width = "100%"; 
ifrm.style.height = 600+"px"; 
document.body.replaceChild(ifrm, oldiframe); 
}

很肯定的是，你只有在頁面上只有一個IFRAME

來源

2013-01-11 15:02:09 mikemxm

你的意思是使用replaceChild而不是appendChild？我試圖使用你提供的代碼，但它不會創建任何iframe？我錯過了什麼？謝謝。 – saikat

啊，你的問題與[可變範圍]（https://en.wikipedia.org/wiki/Scope_（programming））有關。它的tl; dr是你的函數不知道你的oldiframe和ifrm。如果您將makeFrame中的所有內容都移除，問題就解決了。我編輯了我的原始答案以反映這一點。 – mikemxm

快速參考：如果你想設置新的iframe內容的URL，例如，你可以使用'ifrm.setAttribute（「src」，「blue.html」）;'你應該知道，如果你試圖把iframe中的外部網站（例如'src =「http://www.google.com」'）可能會遇到麻煩。外部服務器可能有防範措施以防止您（出於用戶安全/廣告收入/帶寬的原因）。 – mikemxm

創建一個div。比方說，DIV ID是iframecontainer 所以你的代碼應該是這樣的：

<div id="iframecontainer"> 
<!-- Iframe goes here --> 

</div>

現在，只需用的getElementById JavaScript和以「」追加的iframe之前設置的innerHTML。

來源

2013-01-11 14:54:16

嗨@mikemxm我終於能夠解決這個問題。最終代碼如下所示：

oldiframe = document.getElementsByTagName("IFRAME")[0]; 
ifrm = document.createElement("IFRAME"); 
ifrm.style.width = "100%"; 
ifrm.style.height = 600+"px"; 
function makeFrame() { 
    if(oldiframe == null) 
    document.body.appendChild(ifrm); 
    else 
    document.body.replaceChild(ifrm, oldiframe); 
}

並感謝對iframes的警告。你知道任何更好的方式/技術來呈現外部網站的內容嗎？有沒有版權問題？謝謝。

來源

2013-01-12 05:24:07 saikat

如何替換現有的iframe而不是將其附加到文檔正文？

回答

相關問題