江蘇layer中子iframe跨域關掉父級iframe

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

在layer中如果iframe彈窗頁面為跨域請求時返回要關閉父級窗口時，會出現(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')

如果不跨域的話，關閉方法為：

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

上一篇:江蘇phpstorm正則表達式匹配搜索替換

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