postMessage可以進(jìn)行跨端口通信嗎？

window.postMessage() 方法可以安全地實(shí)現(xiàn)跨源通信。通常，對(duì)于兩個(gè)不同頁面的腳本，只有當(dāng)執(zhí)行它們的頁面位于具有相同的協(xié)議（通常為https），端口號(hào)（443為https的默認(rèn)值），以及主機(jī) (兩個(gè)頁面的模數(shù) Document.domain設(shè)置為相同的值) 時(shí)，這兩個(gè)腳本才能相互通信。window.postMessage() 方法提供了一種受控機(jī)制來規(guī)避此限制，只要正確的使用，這種方法就很安全。
參考自：https://developer.mozilla.org...

這里的跨源是否指的就是跨域？
查了一下關(guān)于postMessage的使用基本都是iframe向父窗口傳數(shù)據(jù)，那是不是不同協(xié)議和不同端口是無法通信的呢？
比如說我在localhost：3000啟動(dòng)一個(gè)頁面，localhost：3500啟動(dòng)一個(gè)頁面，可不可以進(jìn)行通信呢

btn.addEventListener('click', () => {
                try {
                    postMessage('helloWorld','localhost:3000' );
                    console.info('消息已經(jīng)成功發(fā)送')
                } catch (error) {
                    console.error(error)
                }
            })

我自己試了一下，會(huì)有報(bào)錯(cuò)，但是執(zhí)行時(shí)成功的

這是不是說只能在子頁面或者iframe這種情況下發(fā)送數(shù)據(jù)，不同端口不可以通信？

回答

編輯回答

浪婳

不好意思，審題不清，題主的報(bào)錯(cuò)截圖不影響，是另外的圖標(biāo)請(qǐng)求問題，不影響的，詳細(xì)了解可以戳這里

下面回答題主的其他問題：

可以跨域通信

如果跨域失敗是另一種提示，Access-Control-Allow-Origin，，，，，

跨域包含跨端口，可以自行百度下什么是跨域，大概是：協(xié)議，域名，端口有一個(gè)不同，就是跨域。

2018年6月25日 10:27

編輯回答

瘋子范

現(xiàn)在已經(jīng)弄明白了這個(gè)問題寫下自己的理解，希望可以對(duì)以后遇到相同問題的伙伴一些幫助。此答案不會(huì)給自己采納，歡迎有更好的答案，采納留給更好的答案。
postMessage是可以進(jìn)行跨域通信的。MDN中描述的跨源就是通常意義上的跨域。語法如下：

otherWindow.postMessage(message, targetOrigin, [transfer]);

這里的otherWindow指的是其他窗口的引用，比如iframe的contentWindow屬性、執(zhí)行window.open返回的窗口對(duì)象、或者是命名過或數(shù)值索引的window.frames。
所以此時(shí)的targetOrigin和otherWindow的引用必須是相互匹配的，否則不能進(jìn)行通信。也就是要和誰進(jìn)行通信就要拿到誰的引用。
關(guān)于window.open有一點(diǎn)需要特別注意的就是：要通過window.open獲取引用值，必須是在window.open打開頁面成功打開的情況下才會(huì)返回該窗口的引用，否則返回null。因?yàn)橛械臑g覽器會(huì)處于安全機(jī)制攔截非用戶點(diǎn)擊的自彈出窗口，此時(shí)window.open是無法獲取正常返回值的，postMessage也會(huì)失敗。

2017年2月19日 14:21