Iframe usage and contentwindow, parent and PostMessage communication methods

problem ：

1. How to communicate messages （ Parent to child , The child receives messages from the parent , You can also call a child's method directly from the parent ; Son to father , The parent receives messages from the child ;）

2. How to find the specified child or parent window（ If iframe Too many levels ）, And how to send messages without affecting others message monitor

One 、iframe Use

<iframe style={
    {
    border:0,width:"100%",height:630,}} src={
    src} />

1. How to communicate messages （ Parent to child , The child receives messages from the parent ; Son to father , The parent receives messages from the child ）

Method 1 ： Directly by getting a parent or child window To operate （ Limit ： Must be in the same domain ）

//  Method of parent calling child ：
 this.iframe.contentWindow.iframe Properties of / Method 
//  or 
document.getElementById("myIframe").contentWindow.iframe Properties of / Method 

//  The child calls the parent method ： adopt parent Get the parent directly window
parent.document. Properties of / Method 

Method 2 ： adopt postMessage communicate （ Limit ： Father son agreement is required ）

//  The parent listens to the child messages ：
 window.addEventListener('message',function(event){
    
   ...
   })
//  The child sends a message to the parent ：  It can be done by window The corresponding parent is found for the attribute of （ there parent Represents the parent of the immediate parent ）
// Nest one layer to use window.top(parent), Multi-storey window.frameElement,
// Use top instead of window,top Point to iframe Topmost window 
window.top.postMessage(msg,' Parent window source ');
parent.postMessage(data, "*");  


//  Father sends message to son 
document.getElementById("iframe").contentWindow.postMessage(msg,' Child window source ')
iFrame.onload = function(){
    
//iframe Send a message immediately after loading 
iFrame.contentWindow.postMessage({
    msg: 'MessageFromIndexPage'},'*');
}
//  The child listens to the parent's message 
window.addEventListener("message", (e) => this.listenFunc(e));

2. How to find the specified child or parent window（ If iframe Too many levels ）, And how to send messages without affecting others message monitor

while(true) {
    
    //  Judge , Find the parent you are looking for window, This can be done by window Binding properties on the 
　　if(currentWindow.isParent = true) {
    　　
　　　　currentWindow.postMessage(data, "*")
　　}

　　if(currentWindow == window.top) {
    
　　　　break;　　//  Prevent a dead cycle 
　　} else {
    
　　　　currentWindow = currentWindwo.parent;
　　}
}

3. origin Usefulness

event.origin You can get the source path of the current message , By judging the present iframe Of url, Determine whether it is the message source of the specified page

Two 、React Native Of WebView Communication with sub content

// RN Of WebView
<WebView
    ref={
    ref => this.webview = ref}
    source={
    {
    uri: ...}}
    javaScriptEnabled={
    true}
    onMessage={
    this.handleMassage}
    allowFileAccess={
    true}
    onLoadStart={
    }
    onLoadEnd={
    }
/>

1. Listening to receive web（ Son ） Message sent

//  receive web Message sent 
handleMessage(event) {
    
　　const data = JSON.parse(event.nativeEvent.data);
　　const code = data.code;
　　const msg = data.msg;
　　switch(code) {
    
　　　　case 0:
　　　　　　console.log(msg);
　　　　　　break;
　　}
}

2. web（ Son ） Send a message to react native

// web Send a message to react native
const data = {
    code: code, msg: msg};
window.ReactNativeWebView.postMessage(JSON.stringify(data));

3. React Native（ Father ） Send a message to web（ Son ）

//  Send a message to web
sendMessageToWebView(code, msg) {
    
　　const data = {
    code: code, msg: msg};
　　if(this.webview) {
    
　　　　this.webview.postMessage(JSON.stringify(data));
　　} else {
    
　　　　console.log("no webview ref")
　　}
}

4. web（ Son ） Yes React Native（ Father ） Monitoring of news

// web monitor react native Of postMessage news , There has to be document,  Otherwise, no message will be heard 
window.document.addEventListener("message", this.onMessageListener.bind(this));

onMessageListener(event) {
    
    const data = JSON.parse(event.data);
    const code = data.code;
    const msg = data.msg;
    switch(code) {
    
        case ...
    }
}

3、 ... and 、 android Of webview And communications containing content （ Just a brief introduction ）

agentWeb be relative to webview Use

android The current... Can be defined in window Under the name ,

web have access to similar window.WebAppInterface.onPostMessage(JSON.stringify(data)) To send a message ,WebAppInterface Need to be in Android In the definition of

Sum up ：

web Of iframe Between ,web and RN Of webview Between ,web and android Communication between , Is to use message To monitor , Need to pay attention to the source , Otherwise, if there are multiple messages of the same type but different types , It is easy to cause conflict and confusion of monitoring

For message sending , The three types are different , However, it is necessary to distinguish between multiple types of the same type , Otherwise, there is still the problem of conflict and confusion