<iframe>框架标签的使用

同源下

1、iframe属性设置参考：https://blog.csdn.net/xiyiyindie/article/details/53415158

2、父子页面之间元素相互操作：https://www.cnblogs.com/loveamyforever/p/6222604.html

3、子页面的js，对父页面的操作：https://www.jb51.net/article/89931.htm（DOM操作）和 https://blog.csdn.net/u012374381/article/details/79578311（方法属性操作）

　　a、子页面操作父页面的DOM：(不同源的话，浏览器报错且没有执行操作)

      var parentDiv =window.parent.document.getElementById('parentH');
      parentDiv.style.color = 'red';

　　b、子页面操作父页面的属性和方法（必须是全局下的属性方法）：（父页面的方法属性挂在 window.parent 下，跨域访问无效）

// 父页面的方法：
    function sayhello() {
        alert('Hello World!');
    }
    var value = 'value'

// 子页面中调用
      //在iframe中调用父页面中定义的变量
      alert(parent.value);  // 正常执行
      //在iframe中调用父页面中定义的方法
      parent.sayhello();  // 正常执行

4、父页面的js，对子页面的操作：https://www.jb51.net/article/89931.htm（DOM操作）和 https://blog.csdn.net/qq_25391785/article/details/88101363（方法属性操作）

　　a、父页面操作子页面的DOM：(不同源的话，浏览器报错且没有执行操作) (DOM的操作，要注意加载完才能获取到，onload事件后)

    window.onload = function(){
      var iframePage = document.getElementById('eval').contentWindow;
      var childDiv = iframePage.document.getElementById('evalText');
      childDiv.style.backgroundColor = '#ccc';
    }

　　b、父页面操作子页面的属性和方法（必须是全局下的属性方法）：（跨域访问无效）

// 子页面的方法属性  
   function sayhello() {
        alert('Hello World!');
    }
    var value = 'value'

//  父页面中调用子页面的方法
      var iframePage = document.getElementById('eval').contentWindow;
      iframePage.sayhello()

总结：子窗口获取父窗口的window：父子窗口的获取是否同源都是可以获取的

var parentWindow = window.parent;

　　　父窗口获取子窗口的window：

var childWindow =  document.getElementById('eval').contentWindow // "eval" 是 ifram的id属性

不同源

1、iframe与父窗口交互(不同源不能拿到彼此的dom)：https://blog.csdn.net/weixin_43837268/article/details/91347640

2、iframe 中跨域的父子窗口，js 是无法直接进行彼此 DOM和js方法属性的操作的。（两者之间的数据传递需要使用其他的方法）

3、子页面传递信息给父页面：（不同源下，父子之间是可以彼此操作url的）

　　方案1、片段识别符：片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新

// 子窗口
parent.location.href = originURL + "#" + data; // 子窗口 改变父窗口url的hash值，触发父窗口的 onhashchange 事件

// 父窗口
window.onhashchange = function () { // 父窗口监听自己的窗口的rul的hash值变化。（url的改变应该是不会触发的，没有试过）
  var message = window.location.hash;
  console.log(message);
}

　　方案2、window.name：浏览器窗口有window.name属性。这个属性的最大特点是，无论是否同源，只要在同一个窗口里，前一个网页设置了这个属性，后一个网页可以读取它。

　　　　　使用说明：这个属性值，只要窗口没有关闭，不管页面怎么跳转（无论是否同源），这个值一直存在，所有页面都可以获取这个值。但是，iframe内的窗口和父窗口，是两个窗口。window.name无法在父子窗口传递，要借助一个中间页面。

　　　　　具体的参考链接 (不推荐这种方法，影响性能，用户体验也不好）

　　方案3、window.postMessage：跨文档通信 API （HTML5为了解决这个问题而引入的API）。基于这个API，参考链接上写了一个跨文档读写LocalStorage的方法。

// 子窗口
  window.parent.postMessage('Nice to see you', 'http://localhost:3000');  // 子窗口发送信息出去

// 父窗口
window.addEventListener('message', function(e) {  // 监听其它窗口发送过来的信息
  console.log('oooo',e.data);
},false);

4、父页面传递信息给子页面：（和上面的原理是一样的，正式反着操作就可以了，下面的就写下方案1和方案3）

　　方案1、片段识别符：片段标识符（fragment identifier）指的是，URL的#号后面的部分，比如http://example.com/x.html#fragment的#fragment。如果只是改变片段标识符，页面不会重新刷新

// 父窗口
document.getElementById('myIFrame').src = originURL + "#" + data; // 父窗口 改变子窗口的url的hash值，触发子窗口的 onhashchange 事件

// 子窗口
window.onhashchange = function () { // 子窗口监听自己的窗口的rul的hash值变化。（url的改变应该是不会触发的，没有试过）
  var message = window.location.hash;
  console.log(message);
}

　　方案3、window.postMessage：跨文档通信 API （HTML5为了解决这个问题而引入的API）

// 父窗口
window.onload = function(){
  document.getElementById('eval').contentWindow.postMessage('Nice to see you', 'http://192.30.255.104:3000');   // 跨文档发送信息
}

// 子页面
window.addEventListener('message', function(e) {  // 子页面监听发送过来的信息事件
  console.log('oooo',e.data);
},false);