postMessage를 통한 html5 도메인 간 통신 방법

h5 페이지는 미리보기 모듈로 PC 페이지에 내장되어 있습니다. 사용자는 PC 페이지에서 일부 작업을 수행한 다음 h5가 반응형 변경을 수행하여 미리보기 효과를 얻습니다. 여기서 가장 먼저 생각나는 것은 iframe을 사용하여 h5 페이지를 PC 웹페이지에 삽입한 후, PC는 postMessage 메소드를 통해 변경된 데이터를 iframe으로 전송한다는 것입니다. iframe에 내장된 h5는 addEventListener를 통해 데이터를 수신합니다. 을 선택한 다음 데이터에 대한 반응적인 변경을 수행합니다. 이 기사에서는 postMessage를 통해 HTML5에서 도메인 간 통신 방법을 자세히 소개합니다.

다음은 postMessage 사용에 대한 요약입니다. API는 매우 간단합니다.

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

otherWindow는 현재 시나리오에서 iframe.contentWindow인 대상 창에 대한 참조입니다. ; otherWindow是目标窗口的引用，在当前场景下就是iframe.contentWindow；

message是发送的消息，在Gecko 6.0之前，消息必须是字符串，而之后的版本可以做到直接发送对象而无需自己进行序列化；

targetOrigin表示设定目标窗口的origin，其值可以是字符串"*"（表示无限制）或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或端口这三者的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送；只有三者完全匹配，消息才会被发送。对于保密性的数据，设置目标窗口origin非常重要；

当postMessage()被调用的时，一个消息事件就会被分发到目标窗口上。该接口有一个message事件，该事件有几个重要的属性：

1.data：顾名思义，是传递来的message
2.source：发送消息的窗口对象
3.origin：发送消息窗口的源（协议+主机+端口号）

这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似。

可选参数transfer 是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

那么，当iframe

message는 전송된 메시지입니다. Gecko 6.0 이전에는 메시지가 문자열이어야 했지만 이후 버전에서는 직접 직렬화하지 않고 개체를 직접 보낼 수 있습니다. 대상 설정을 의미합니다. 창의 출처, 해당 값은 문자열 "*"(무제한 표시) 또는 URI일 수 있습니다. 메시지를 보낼 때 대상 창의 프로토콜, 호스트 주소 또는 포트 중 하나라도 targetOrigin에서 제공한 값과 일치하지 않으면 세 가지가 완전히 일치하는 경우에만 메시지가 전송됩니다. 기밀 데이터의 경우 대상 창 원본을 설정하는 것이 매우 중요합니다.

postMessage()가 호출되면 메시지 이벤트가 대상 창에 배포됩니다. 이 인터페이스에는 몇 가지 중요한 속성이 있는 메시지 이벤트가 있습니다.

1.data: 이름에서 알 수 있듯이 전달되는 메시지입니다.
2.source: 메시지를 보내는 창 개체
3 .origin: 메시지 보내기 창의 소스(프로토콜 + 호스트 + 포트 번호)

이렇게 하면 도메인 간 메시지를 받을 수 있고, 비슷한 방식으로 메시지를 다시 보낼 수도 있습니다.

선택적 매개변수 전송은 메시지와 동시에 전달되는 전송 가능한 개체의 문자열입니다. 이러한 개체의 소유권은 메시지 수신자에게 이전되며 발신자는 더 이상 소유권을 보유하지 않습니다.

그런 다음 iframe이 초기화되면 iframe에 대한 참조를 가져와 다음 코드를 통해 메시지를 보낼 수 있습니다.

// 注意这里不是要获取iframe的dom引用，而是iframe window的引用
const iframe = document.getElementById('myIFrame').contentWindow;
iframe.postMessage('hello world', 'http://yourhost.com');

iframe에서는 다음을 통해 메시지를 받을 수 있습니다. 다음 코드.

window.addEventListener('message', msgHandler, false);

수신 시 필요에 따라 메시지 출처를 필터링하여 불법 도메인 이름이 포함된 메시지 수신으로 인한 XSS 공격을 방지할 수 있습니다.

마지막으로 코드 재사용을 위해 메시지 송수신을 클래스로 캡슐화하고, 메시지 유형 API를 시뮬레이션해 사용이 매우 편리합니다. 구체적인 코드는 다음과 같습니다.

export default class Messager {
    constructor(win, targetOrigin) {
        this.win = win;
        this.targetOrigin = targetOrigin;
        this.actions = {};
        window.addEventListener('message', this.handleMessageListener, false);
    }

    handleMessageListener = event => {
        if (!event.data || !event.data.type) {
            return;
        }
        const type = event.data.type;
        if (!this.actions[type]) {
            return console.warn(`${type}: missing listener`);
        }
        this.actions[type](event.data.value);
    }

    on = (type, cb) => {
        this.actions[type] = cb;
        return this;
    }

    emit = (type, value) => {
        this.win.postMessage({
            type, value
        }, this.targetOrigin);
        return this;
    }

    destroy() {
        window.removeEventListener('message', this.handleMessageListener);
    }
}

위 내용은 postMessage를 통한 HTML5의 도메인 간 통신 방법입니다. 모두에게 도움이 되기를 바랍니다.

관련 권장 사항:

🎜HTML5에서 postMessage API의 기본 사용법 공유 🎜🎜🎜🎜HTML5의 postMessage를 사용하여 두 웹 페이지 간에 데이터 전송🎜🎜🎜🎜html5의 postMessage를 Ajax에서 POST 교차 도메인 문제 구현🎜🎜

위 내용은 postMessage를 통한 html5 도메인 간 통신 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!