HTML / JavaScript：如何通過ID關閉父頁面的iframe？

Question

我有一個帶有按鈕的頁面，該按鈕創建iframe並將其附加到div：

function createIFRAME() {
    $.get("../../../GetIframeID", function(data){
        alert(data);

        ifrm = document.createElement("IFRAME");
        ifrm.setAttribute("id", data);
        ifrm.setAttribute("src", "chat.html");
        //ifrm.setAttribute("scrolling", "no");
        ifrm.setAttribute("frameborder", "0");
        ifrm.style.width = 304+"px";
        ifrm.style.height = 284+"px";

        document.getElementById("content").appendChild(ifrm);
    });
}

使用具有靜態屬性的servlet，可以確保iframe ID的唯一性。

問題：每個創建的頁面（chat.html）都包含一個用於關閉頁面的按鈕。 我找到了用於從其父頁面關閉iframe的腳本，但是我不知道如何獲取特定iframe的ID。

function closeIframe() {
    var iframe = document.getElementById(id);
    iframe.parentNode.removeChild(iframe);
}

在關閉iframe時，我使用“ chat.html”頁面：

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="javascript: window.parent.closeIframe()"" />

如何獲取特定iframe的ID，以便可以使用上述功能將其關閉？

Answer 1

解

我已經更改了創建iframe並使其如下的功能（我已將id參數的參數發送到“ chat.html”）：

function createIFRAME() {
            $.get("../../../GetIframeID", function(data){
                alert(data);

                ifrm = document.createElement("IFRAME");
                ifrm.setAttribute("id", data);
                ifrm.setAttribute("src", "chat.html?id="+data);
                //ifrm.setAttribute("scrolling", "no");
                ifrm.setAttribute("frameborder", "0");
                ifrm.style.width = 304+"px";
                ifrm.style.height = 284+"px";

                document.getElementById("content").appendChild(ifrm);
            });
        }

我修改了用於關閉框架的按鈕，如下所示：

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="closeIFRAME()" />

現在，我有2個函數：在“ chat.html”中找到一個函數，該函數具有從URL獲取頁面ID並將其作為參數發送給位於iframe父級中的第二個函數的作用。

函數closeIFRAME（） （來自“ chat.html”）：

function closeIFRAME() {
            alert("1");
            var param1var = getQueryVariable("id");

            function getQueryVariable(variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i=0;i<vars.length;i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1]; 
                    }
                }
            }

            parent.closeIframe(param1var);
        }

函數closeIframe（id） （來自iframe的父項）：

function closeIframe(id) {
            var iframe = document.getElementById(id);
            iframe.parentNode.removeChild(iframe);
        }

謝謝大家的支持！

Answer 2

您可以嘗試在按鈕的onclick中傳輸iFrame的ID。

<input id="closeButton" type="image" src="../../../images/closeButton.png" onclick="javascript: window.parent.closeIframe([insert iframes ID here])"" />

希望能對您有所幫助。

無論如何，您使用的技術來自另一個時代。 iframe？ 選擇ajax，現在更容易使用。 我什至會說websockets更易於與nodejs進行聊天（但一切取決於您網站的其余部分）。

您也許還可以嘗試onclick =“ window.parent.removeChild（window）”（完全不確定是否可行）