Uncaught DOMException。原点クロスドメイン問題解決フレームがブロックされた

最近、ポップアップレイヤーで他のシステムからページを呼び出し、選択されたコンテンツを取得する必要があるプロジェクトを書きましたが、Uncaught DOMExceptionに遭遇しました。起源 "url" を持つフレームがクロスオリジンフレームにアクセスするのをブロックしました。.

postMessage()メソッドを使用すると、ドメインをまたいだ値の受け渡しの問題が解決されるので、以下にposetMessage APIを掲載します。

https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage

さっそく、コードを見てみましょう。

フロントエンドのフレームワークとしてレイヤーを使っているので、window.open()で開くポップアップレイヤーとは少し違うかもしれませんね。

親ページ

layer.open({
    //layer sends a message to the child page when the layer popup layer is successfully opened
    success: function (layero, index) {
      var data = $('[id*="id"]').val()
      //because it's a company intranet, the url used is *
      window[layero.find('iframe')[0]['name']].postMessage(data, '*');
     },
    //Get the return value of the subpage after clicking the confirm button on the page
     yes: function (index, layero) {                       
        //Send a 'return' to indicate that the subpage needs a return value
        window[layero.find('iframe')[0]['name']].postMessage('return', '*')
        layer.close(index);
    }
});

//Listen to the postMessage of the subpage
function receiveMessage(event) {
     console.log(event.data)//Get the value passed back from the subpage
     $("#id").val(event.data)
 }
 window.addEventListener('message', receiveMessage, false);

ここで、Urlパラメータについての注意事項がありますので、使用する際はセキュリティに注意する必要があります。

子ページは親ページから送られた値を受け取る

window.addEventListener('message',function(e){    
    var value = e.data;
    // The child page calls the return method to send data to the parent page if the value of the received data is 'return'
    if (value ! = null && value == 'return')
        // return data
        returnSelectUser()
    else if (value ! = null && value.trim().length ! = 0) {
        //do something      
    }
}, false);

// send data to the parent page
function returnSelectUser() {
    var value = $("#id").text();
    console.log(value)
    parent.postMessage(value, "*");    
}