postMessage_html5 튜토리얼 기술을 통한 html5 도메인 간 통신 방법

이 글은 HTML5에서 postMessage를 통해 도메인 간 통신 방법에 대한 관련 정보를 주로 소개하는데, 편집자는 이것이 꽤 좋다고 생각합니다. 이제 HTML5 소스 코드를 참고로 사용할 수 있습니다. HTML5에 관심 있는 친구들은 편집자를 따라가서 살펴보세요

최근 직장에서 필요를 느꼈습니다. 시나리오는 다음과 같습니다. h5 페이지가 미리보기 모듈로 PC 페이지에 삽입되어 사용자가 일부 작업을 수행할 수 있습니다. PC 페이지에서 h5는 반응형 변경을 수행하여 미리보기 효과를 얻습니다.

여기서 가장 먼저 떠오르는 것은 iframe을 사용하여 h5 페이지를 PC 웹페이지에 삽입한 다음, PC는 postMessage 메소드를 통해 변경된 데이터를 iframe으로 전송한다는 것입니다. addEventListener를 통해 데이터를 반응적으로 변경합니다.

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

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

otherWindow는 인용문 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, 현재 시나리오에서는 iframe.contentWindow입니다.

message는 전송된 메시지입니다. Gecko 6.0 이전에는 메시지가 문자열

및 이후 버전을 직접 보낼 수 있습니다 객체

를 직접 직렬화하지 않고;

targetOrigin은 대상 창의 원점을 나타내며 해당 값은 문자열 "*"일 수 있습니다(아니요를 나타냄). 제한) 또는 URI입니다. 메시지를 보낼 때 대상 창의 프로토콜, 호스트 주소 또는 포트가 three 세 가지 중 하나라도 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);
    }
}

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되길 바라며, PHP 중국어 홈페이지도 많이 응원해주시길 바랍니다.

관련 권장 사항: 🎜🎜🎜🎜🎜🎜HTML5는 휴대폰 스캔 기능과 그 장점과 단점을 켭니다_html5 튜토리얼 기술🎜🎜🎜🎜🎜H5 postMessage API 그래픽 및 텍스트 세부 소개 🎜🎜🎜🎜HTML5에서 postMessage를 사용한 구현 Ajax🎜🎜에서 POST 크로스 도메인

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