Question

我创建了以下网站：

www.ppp.one

无论何时打开图像，都会加载弹出窗口。

可以使用右上角的X关闭此弹出窗口。但是，如果您单击弹出窗口中的一个缩略图（重新加载框架），X按钮将无法再关闭它。

我使用的JavaScript：

function hide(){

    if(currentIframe){
        currentIframe.hide();
        currentIframe = null;
    }

    popupBG.remove();
    popup.remove();
}

和html：

<a class="small align-top" onclick="frameWarp.hide();">&#10006</a>

关于导致问题的原因的任何想法？

Answer 1

当您打开弹出窗口时，调用函数setUpAPI，将frameWrap对象插入到iframe的全局范围内。单击缩略图时，将重新加载框架，frameWrap实例不再可用。

您可以尝试在iframe上搜索load个事件，而不是ready个事件：

iframe.ready(function(){
  frameCacheDiv.append(iframe);
});
iframe.load(function(){
  setUpAPI(iframe, settings);
  settings.onShow();
});

Answer 2

看起来当iframe的URL更改时，frameWarp变量变为未定义。尝试的一个想法是听取iframe的load事件并在那里进行更改:(你必须给它ID“iframeId”）

$('#iframeId').load(function(){
    console.log('URL changed');
    // code to attach hide event here
});

另一个想法是更改您的设置以使用postMessage API进行父和iframe之间的通信。您可以在此处阅读有关如何执行此操作的教程：

http://robertnyman.com/html5/postMessage/postMessage.html

编辑：实际上，这篇博文是一个更好的例子：http://davidwalsh.name/window-iframe

在重新加载另一个html页面后关闭iframe

2 个答案: