layer中子iframe跨域關(guān)掉父級iframe

網(wǎng)站建設(shè) 2023-10-22 次

在layer中如果iframe彈窗頁面為跨域請求時返回要關(guān)閉父級窗口時，會出現(xiàn)錯誤： Blocked a frame with origin “xxx“ from accessing a cross-origin frame

主要原因：

內(nèi)嵌 iframe 頁面，一般使用 window.parent 或 window.top 來獲取父頁面的 window 對象

在子頁面想使用(或傳遞給) 父頁面的參數(shù)，但是原因兩個的域名不一樣，所以會出現(xiàn)跨域問題。

解決方法：

1、父頁面監(jiān)聽 message，寫法固定

window.addEventListener('message', function (e) {

console.log(e)

})

2、子頁面發(fā)送 message 消息，并附帶參數(shù)

// window.parent 是 iframe 子頁面獲取父頁面的 window 對象

// 后面的 * 號就是處理跨域問題的，任何域名都不會出現(xiàn)跨域問題

window.parent.postMessage("需要傳遞的參數(shù)", '*')

// 也可以指定傳送域名地址，這個域名不會出現(xiàn)跨域問題，寫父頁面(接收)域名地址

window.parent.postMessage("需要傳遞的參數(shù)", 'http://0.0.0.0:8080')

如果不跨域的話，關(guān)閉方法為：

layer.open({
 content:data
 ,btn: ["確定"]
 ,yes: function (index,layero) {
     let indexOfFather = parent.layer.getFrameIndex(window.name);
     parent.layer.close(indexOfFather); //關(guān)閉頁面
     window.parent.location.reload();    //刷新父頁面
  }
})

【版權(quán)聲明】:本站內(nèi)容來自于與互聯(lián)網(wǎng)(注明原創(chuàng)稿件除外),供訪客免費學(xué)習(xí)需要。如文章或圖像侵犯到您的權(quán)益，請及時告知，我們第一時間刪除處理！謝謝！

上一篇:phpstorm正則表達(dá)式匹配搜索替換

返回列表網(wǎng)站建設(shè)