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

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

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

主要原因：

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

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

解決方法：

1、父頁(yè)面監(jiān)聽(tīng) message，寫(xiě)法固定

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

console.log(e)

})

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

// window.parent 是 iframe 子頁(yè)面獲取父頁(yè)面的 window 對(duì)象

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

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

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

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)閉頁(yè)面
     window.parent.location.reload();    //刷新父頁(yè)面
  }
})

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

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

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