如何在 javascript 中使用父 postmessage 关闭 iframe

Question

我有一个包含 iframe 的简单块，我希望用户能够使用按钮关闭 iframe。

这是我目前所拥有的

JS

更新

  document.querySelector(DOM.videoclosebtn).addEventListener('click', closeIframeContainer);
    var closeIframeContainer =function(){
        window.parent.postMessage("event=closeiframe", "*");
    };

    window.addEventListener("message", receiveMessageFromIframe, false);
    function receiveMessageFromIframe(msg) {
        if (event == "closeiframe") {
            document.getElementById('iframe-container').remove();
        }else{
           alert('hehehe');
        }
    }

这里是带有 iframe 的 index.html

<div id="iframe-container">

            <iframe src="/videoexplainer/data.html" style="border:none"></iframe>
    </div>

这里是data.html

 <div id="video-close_btn" class="video-btn">
                    <img src="images/x.png" />
                </div>

错误：

Uncaught TypeError: Cannot read property 'window' of null
    at HTMLDivElement.closeIframeContainer (videoexplainer.js:123)

不幸的是它不起作用，我需要做什么才能得到我想要的？

Answer 1

您的代码将来自.postMessage() 调用的返回值分配给getIFrameID，但随后您希望将其用作DOM 节点引用。

var closeIframeContainer = function(){
   var getIframeID = document.getElementById('iframe-container');
   getIframeID.parent.postMessage("*");
   getIframeID.style.display="none";
};

先获取元素节点引用，再进行其他操作。