최근 직장에서 필요한 사항이 발생했습니다. 시나리오는 다음과 같습니다. h5 페이지가 미리보기 모듈로 PC 페이지에 포함되어 있습니다. 사용자가 PC 페이지에서 일부 작업을 수행하면 h5 페이지가 미리보기 효과를 얻기 위해 반응적으로 변경됩니다. .
여기서 가장 먼저 생각나는 것은 iframe을 사용하여 h5 페이지를 PC 웹페이지에 삽입한 후, PC는 postMessage 메소드를 통해 변경된 데이터를 iframe으로 전송한다는 것입니다. iframe에 내장된 h5는 addEventListener를 통해 데이터를 수신합니다. 을 선택한 다음 데이터에 대한 반응적인 변경을 수행합니다.
다음은 postMessage 사용에 대한 요약입니다. API는 매우 간단합니다.
otherWindow.postMessage(message, targetOrigin, [전송]);
otherWindow 는 현재 시나리오에서 iframe.contentWindow인 대상 창에 대한 참조입니다.
message 전송된 메시지입니다. Gecko 6.0 이전에는 메시지가 문자열이어야 했지만 이후 버전에서는 직접 직렬화하지 않고 객체를 직접 보낼 수 있습니다.
targetOrigin 대상 창의 원본을 나타내며 해당 값은 문자열 *(무제한을 나타냄) 또는 URI일 수 있습니다. 메시지를 보낼 때 대상 창의 프로토콜, 호스트 주소 또는 포트 중 하나라도 targetOrigin에서 제공한 값과 일치하지 않으면 세 가지가 완전히 일치하는 경우에만 메시지가 전송됩니다. 기밀 데이터의 경우 대상 창 원점을 설정하는 것이 매우 중요합니다.
postMessage()가 호출되면 메시지 이벤트가 대상 창으로 전달됩니다. 이 인터페이스에는 몇 가지 중요한 속성이 있는 메시지 이벤트가 있습니다.
1.data: 이름에서 알 수 있듯이 전달되는 메시지입니다.
2.source: 메시지를 보내는 창 개체
3.origin: 메시지 창의 소스(프로토콜 + 호스트 + 포트 번호)
이런 방식으로 우리는 도메인 간 메시지를 받을 수 있고 비슷한 방식으로 메시지를 다시 보낼 수도 있습니다.
선택적 매개변수 전송은 메시지와 함께 전달되는 전송 가능한 객체의 문자열입니다. 이러한 객체의 소유권은 메시지 수신자에게 전송되며 발신자는 더 이상 소유권을 보유하지 않습니다.
그런 다음 iframe 초기화되면 iframe에 대한 참조를 가져와 다음 코드를 통해 메시지를 보낼 수 있습니다.
// 이는 iframe의 dom 참조를 가져오는 것이 아니라 iframe 창의 참조를 가져오기 위한 것임을 참고하세요. const iframe = document.getElementById('myIFrame').contentWindow;iframe.postMessage('hello world', 'http:/ /yourhost.com');iframe에서는 다음 코드를 통해 메시지를 받을 수 있습니다.
window.addEventListener('message', msgHandler, false);수신 시 필요에 따라 메시지 원본을 필터링하여 불법 도메인 이름이 포함된 메시지 수신으로 인한 XSS 공격을 방지할 수 있습니다.
마지막으로 코드 재사용을 위해 메시지 송수신을 클래스로 캡슐화하고, 메시지 유형 API를 시뮬레이션해 사용이 매우 편리하다. 구체적인 코드는 다음과 같습니다.
기본 클래스 Messager { 생성자(win, targetOrigin) { this.win = win; this.targetOrigin = targetOrigin = {}; window.addEventListener('message', this.handleMessageListener, false); => { if (!event.data || !event.data.type) { return } const type = event.data.type; (!this.actions[type]) { return console.warn(`${type}: 누락된 리스너`) } this.actions[type](event.data.value) } on = (type, cb); > { this.actions[type] = cb; return this; 방출 = (type, value) => { this.win.postMessage({ type, value }, this.targetOrigin) } destroy(); window.removeEventListener('message', this.handleMessageListener) }}위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.