未捕获的SyntaxError：在调用'postMessage'时，目标起源“my_page”无效。

Question

我有以下脚本

父页面(pair_pixel_filter.php)：

 window.addEventListener("message", function(e) {
            $('#log').append("Received message: " + (e.data));
        }, false);
 $('.photo-upload-btn').click(function(event) {
            event.preventDefault();
            window.open($(this).attr("href"), "popupWindow", "width=600,height=600,scrollbars=yes");
        });

子页面

$.ajax({
            type: 'post',
            url: url,
            data: {
                base64data: dataURL
            },
            success: function(data) {
                window.opener.postMessage(data, "pair_pixel_filter.php");
                window.close(); }
        });

基本上是打开一个弹出窗口，然后在弹出窗口上执行一些ajax操作，并将结果返回给父窗口。但是从子窗口中我得到了这个错误。

未捕获的SyntaxError: 在调用'postMessage'时，目标原点'pair_pixel_filter.php' 无效

- noobie-php

Answer 1

postMessage的第二个参数是“目标源”。这是页面所在的域名，而不是（php）文件的名称。

它需要类似于：

window.opener.postMessage(data, "http://example.com");

请参阅：https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

- gen_Eric

---

非常正确，我刚刚发现我们需要传递完整路径，例如 localhost/abc/mypage.php。 - noobie-php

@noobie-php 实际上，JavaScript 会忽略域名后的任何内容，因此如果主机是 localhost，即使路径不同，目标窗口也会接受它。因此，将 http://localhost/abc/mypage.php 传递作为来源将产生与传递 http://localhost 或 http://localhost/literally/anything/xyz.php 相同的效果。 - Jay Dadhania

但是您需要包括端口号。 - Dave

@Dave 只有在非标准情况下才需要这样做。就像通常在浏览器中输入URL一样。 - gen_Eric