HTML5에서 도메인 간 통신을 수행하는 방법

이번에는 크로스 도메인 통신에 HTML5를 사용하는 방법과 크로스 도메인 통신에 h5를 사용하는 방법을 알려드리겠습니다. h5 도메인 간 통신 시 주의 사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

최근 직장에서 필요한 상황이 발생했습니다. h5 페이지가 미리보기 모듈로 PC 페이지에 포함되어 있으면 사용자가 PC 페이지에서 일부 작업을 수행할 수 있으며, 그런 다음 h5 페이지가 이를 달성하기 위해 반응적으로 변경됩니다. 미리보기 효과.

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

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

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

otherWindow는 대상 창의 reference이며, 현재 시나리오에서는

message가 전송된 메시지입니다. Gecko 6.0 이전에는 메시지가 String이어야 하며 이후 버전에서는 직접 직렬화하지 않고 개체를 직접 보낼 수 있습니다.

targetOrigin은 대상 창의 출처를 나타내며 해당 값은 "*"(무제한을 나타냄) 문자열일 수 있습니다. 또는 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);
    }
}

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

H5의 모든 요소와 기본 구문 요약

H5에서 비디오 및 오디오 태그와 진행률 표시줄을 사용하는 방법

H5에서 드래그 앤 드롭 기능을 구현하는 방법

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