如何通過使用javascript刪除iframe本身iframe

我知道有幾個類似的問題，但由於無法解決問題，我必須再次使用附加代碼提問。我在JSF項目中有兩個.xhtml文件。一個是mainPage.xhtml有一個生成動態html代碼的按鈕來創建一個iframe（iFramePage.xhtml）並在瀏覽器上顯示它;如何通過使用javascript刪除iframe本身iframe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 

<h:head> 
    <h:outputStylesheet library="css" name="style.css" /> 

    <script type="text/javascript"> 

     /** Create dynamic iframe HTML code for iFramePage.xhtml **/ 
     function createIFrameHTML(){ 
      document.getElementById("iFrameContainer").innerHTML = '<div id="iframe0"><iframe src="iFramePage.xhtml" width="450px" height="300px"></iframe></div>'; 
     } 

     /** Close iFrame **/ 
     function removeElement() { 

     /*Both lines work properly when I call inside this page, */ 
     /*..however it does not work by calling from iFramePage.xhtml */     

     //document.getElementById("iFrameContainer").removeChild("iframe0"); 
     $('iframe0').remove(); 
     } 
    </script> 
</h:head> 
<body> 
    <f:view> 
     <h:form id="mainForm"> 

      <!-- Control Menu --> 
      <div id="cntrMenu"> 
       <h:commandButton id="cntrBtn1" 
        onclick="createIFrameHTML();return false;"></h:commandButton> 
       <h:commandButton id="cntrBtn2" 
        onclick="removeElement();return false;"></h:commandButton> 
      </div> 

      <div id="iFrameContainer"> 
       <!-- an iframe will be generated by createIFrameHTML() --> 
      </div> 
     </h:form> 
    </f:view> 
</body> 
</html>

另一頁是iFramePage.xhtml，它有一些html和javascript代碼;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core" 
    xmlns:ui="http://java.sun.com/jsf/facelets"> 
<h:head> 
    <h:outputScript name="......js" /> 
    <h:outputStylesheet name="....css" /> 
    <script> 

     /** Close iFrame.**/ 
     function closeSelf() { 
      /* Two lines works properly, however third line does not work!*/ 
      //window.top.location.href = "HIDDEN"; 
      //parent.document.location.href = "HIDDEN"; 
      parent.removeElement(); 

     } 
    </script> 
</h:head> 
<body> 
    <input jsfc="h:commandButton" id="exitBtn" value="Kapat" onclick="closeSelf();" /> 
</body> 
</html>

我可以通過點擊「cntrBtn1」按鈕，通過點擊「cntrBtn2」內部mainPage.xhtml除去生成的IFRAME。但是，我需要刪除自身內部的iframe（iFramePage.xhtml）。當我點擊iFramePage.xhtml中的「exitBtn」時，iframe不會消失。沒有關於跨域的內容，因爲mainPage.xhtml和iFramePage.xhtml在同一個JSF項目中，即使在同一個目錄中。我可以重定向父頁面（在iFramePage.xhtml的closeSelf（）中查看兩行），但是我無法通過使用父元素刪除iframe，爲什麼！請幫助我:)

來源

2014-02-19 séan35

'父'不訪問'iframe' DOM，但父窗口。你也許可以嘗試'parent.document.getElementById（「iframe0」）。style.display ='none''。或者使用父子通信http://davidwalsh.name/window-iframe – TastySpaceApple

而不是「parent.document.getElementById（」iframe0「）。style.display ='none'」，「parent.document.getElementById（」iFrameContainer「）.innerHTML =''「是更合適的行動，我想。你的建議給了我靈感，謝謝。但是，我無法成功應用消息中鏈接中提到的window.postMessage。 –

可能的重複[如何在iframe中關閉iframe]（http://stackoverflow.com/questions/6754935/how-to-close-an-iframe-within-iframe-itself） –

使用window.postMessage之間的父級和iframe之間的溝通。

更換closeSelf（）函數在IFRAME頁爲以下：

function closeSelf() { 
    parent.window.postMessage("removetheiframe", "*"); 
}

和父頁上，添加以下代碼來聽當IFRAME發送消息：

function receiveMessage(event){ 
    if (event.data=="removetheiframe"){ 
     var element = document.getElementById('iframe-element'); 
     element.parentNode.removeChild(element); 
    } 
} 
window.addEventListener("message", receiveMessage, false);

您還可以檢查起源的postMessage通過event.origin來確保要求刪除iframe的權利iframe。

來源

2014-02-19 13:54:23 Subin

我試圖應用您的解決方案，但我無法正常工作。解決方案後，mainPage.xhtml甚至不會生成iframe，儘管單擊了「cntrBtn1」按鈕。 –

@séan35嘗試我更新的答案 – Subin

如何通過使用javascript刪除iframe本身iframe

回答

相關問題