Js的iframe相关问题，如何判断当前是否在iframe中，iframe和它的父窗口如何通信

一、前言：

　　在web中，为了丰富我们的内容，往往需要引用其它HTML文件，这时候就需要用到 iframe 标签，本文就主要记录一下使用iframe所需要注意的问题

　　iframe 所使用的环境（笔者所遇到的）

　　1. web代码兼容 PC端和移动端，这时候就想在移动端时把页面限制在固定的宽高范围中，于是就使用 iframe 把相关页面限制在其中

　　2. web引用别人的 HTML 内容，就使用iframe 来实现

二、遇到的问题：

1. 如何判断当前是否在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中');
}

说明：

三种方式都是根据当前的窗口层级进行判断，
以上是针对有 <frameset> 或者 <iframe> 的页面，
self.frameElement 可以获取到当前的 iframe 节点（如果有的话），否则为null

解释：window、top、parent、self 之间的联系和区别

window ：当前窗口
top: 顶层窗口，针对有很多层的iframe
parent: 父级窗口，即当前窗口的上一层窗口
self: 当前窗口，和window、window.self 等价

2. iframe 和它的父窗口如何通信

　　注意有两种情况：

iframe 和父窗口同源（即不会跨域，相同域名下），可以直接使用节点或 window 调用

iframe 获取父窗口节点：parent.window.document.getElementById("parentNode")
iframe 调用父窗口方法：parent.parentFunc();
父窗口获取 iframe节点：iframeObj.contentWindow.document.getElementById("childNode")

this.myFrame表示 iframe对象

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

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

iframe 和父窗口跨域（一般是调用别人的HTML ）

必须使用安全的 postMessage方式来进行通信

// 向父窗口传值
window.parent.postMessage({code: 1, msg: '向父窗口传值'}，*);

// 向iframe传值
document.getElementsByTagName("iframe")[0].contentWindow.postMessage({code: 2, msg: '向iframe传值'}，*);

// 接收传值
window.addEventList('message',  (e) => {
    try{
        if (e.data type e.data ==='string' ) {
        console.log(e.data);
        }
    } catch (err) {
        console.log(err)
    }
});

event.source：发送消息的窗口，可以通过区分网址来接收消息
event.origin: 消息发向的网址，同上
event.data: 消息内容

说明：

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

otherWindow： 其他窗口的一个引用，比如iframe的contentWindow属性、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames；
message： 将要发送到其他window的数据，这个数据会自动被序列化，数据格式也不受限制，String字符串，对象（包括JSON）都可以；
targetOrigin： 通过窗口的origin属性来指定哪些窗口能接收到消息事件，这个值可以是"*"(表示无限制)，或者一个URI。在发送消息的时候，如果目标窗口的协议、主机地址或者端口这三个的任意一项不匹配targetOrigin提供的值，那么消息就不会被发送。如果你明确的知道消息应该发送到哪个窗口，那么请始终提供一个有确切值的targetOrigin，而不是*。不提供确切的目标将导致数据泄露到任何对数据感兴趣的恶意站点。
transfer(可选)：是一串和message 同时传递的 Transferable 对象. 这些对象的所有权将被转移给消息的接收方，而发送一方将不再保有所有权。

三、最后

　　具体请看MDN： window.postMessage