Js an iframe Related Questions

 

I. Introduction:

　　In the web, in order to enrich our content, often need to refer to other HTML files, this time you need to use iframe tags, paper records about the main issues that need attention using iframe

 

　　iframe used environment (the author encountered)

　　1. web code compatible PC and the mobile terminal, at which time wanted movable end fixed to the page width and height limit range, then the relevant pages on the use of limited iframe wherein

　　2. web references HTML content of others, will be implemented using iframe

 

Second, the problems encountered:

1. How to determine whether the current in an iframe

// 1
if (self.frameElement && self.frameElement.tagName == "IFRAME") {
　　alert('在iframe中');
}

// 2
if (window.frames.length != parent.frames.length) {
　　alert('在iframe中');
}

// 3
if (self != top) { 
　　alert('在iframe中');
}

 Description:

• Are three ways for determining the current level of the window,
• These are targeted at page <frameset> or <iframe>, and
• self.frameElement iframe can get to the current node (if any), otherwise null

 Explanation: links and differences between window, top, parent, self

• window: the current window
• top: top-level window, for there are many layers iframe
• parent: the parent window, i.e., the current window on the window layer
• self: the current window, and the window, window.self equivalent

 

2. iframe and how its parent window of communication

　　Note that there are two cases:

• iframe parent window and homologous (i.e. not cross-domain, the same domain), or may be used as the node call window
• Get the parent node iframe window: parent.window.document.getElementById ( "parentNode")
• iframe calls the parent window method: parent.parentFunc ();
• Node obtain iframe parent window: iframeObj.contentWindow.document.getElementById ( "childNode")　　　
• • • this.myFrame iframe object representation

    • var obj=document.getElementsByTagName("iframe")[0].contentWindow;  
      var ifmObj=obj.document.getElementById("childNode");  

  Parent window calls the iframe method: iframeObj.contentWindow.parentFunc ()

  • var obj=document.getElementsByTagName("iframe")[0].contentWindow;  
    obj.parentFunc();

     

• and cross-domain iframe parent window (usually call someone else's HTML)
  • You must use a secure way to communicate postMessage

  • // to the parent window value passed 
    window.parent.postMessage ({code: 1, msg : ' pass value to the parent window'}, * ); 
    
    // to pass iframe value 
    document.getElementsByTagName ( "iframe") [0 ]. contentWindow.postMessage ({code: 2, msg : ' iframe to the traditional values'}, * ); 
    
    // receiving a pass value 
    window.addEventList ( 'Message', (E) => {
         the try {
             IF (type E e.data === .data 'String' ) { 
            the console.log (e.data); 
            } 
        } the catch (ERR) { 
            the console.log (ERR) 
        } 
    });

    • event.source: Window sending a message, the message may be received by differentiating the URL
    • event.origin: The message sent to the URL above
    • event.data: Message content

Description:

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

• message: The data to be transmitted to the other window, the data is automatically serialized data format is also not limited (strings, objects can)
• targetOrigin:  to specify which window through the origin of the Properties window to receive the message event, this value can be "*" (no limit), or a URI. When sending a message, if the protocol, host address of the target window, or any one of these three ports do not match the value targetOrigin provided, then the message will not be sent. 这个值最好始终存在，而不是*So can effectively avoid intercepted by a third party
• Transfer (optional): The message is a string and colleagues transferred Transferableobjects, ownership of these objects will be transferred to the recipient of the message, the sender side will no longer retain ownership.