iframe 页面嵌套

iframe

iframe作用

通常我们使用iframe直接直接在页面嵌套iframe标签指定src就可以了

<iframe src="demo.htm"></iframe>

iframe属性

iframe常用属性:
frameborder:是否显示边框，1(yes),0(no)
height:框架作为一个普通元素的高度，建议在使用css设置。
width:框架作为一个普通元素的宽度，建议使用css设置。
name:框架的名称，window.frames[name]时专用的属性。
scrolling:框架的是否滚动。yes,no,auto。
src：内框架的地址，可以使页面地址，也可以是图片的地址。
srcdoc , 用来替代原来HTML body里面的内容。但是IE不支持
sandbox: 对iframe进行一些列限制，IE10+支持我们通常使用iframe最基本的特性，就是能自由操作iframe和父框架的内容(DOM). 但前提条件是同域. 如果跨域顶多只能实现页面跳转window.location.href.

那什么是同域什么是跨域呢?

 A:<iframe id="mainIframe" name="mainIframe" src="/main.html" frameborder="0" scrolling="auto" ></iframe>
 B:<iframe id="mainIframe" name="mainIframe" src="http://www.baidu.com" frameborder="0" scrolling="auto" ></iframe>

使用A时，因为同域，父页面可以对子页面进行改写,反之亦然。
使用B时，不同域，父页面没有权限改动子页面,但可以实现页面的跳转

获取iframe里的内容

postMessage进行处理

满足跨域（不同域名间通信）
message 可以传递对象
targetOrigin 可以指定哪些窗口接收信息

父向子传递信息

window.parent //获取上一级的window对象，如果还是iframe则是该iframe的window对象
window.top //获取最顶级容器的window对象，即，就是你打开页面的文档
window.self //返回自身window的引用。可以理解 window===window.self

parent.html

html

  <iframe id="iframe" src="http://dome.com/child.html"></iframe>

  const iframe = document.getElementByID('iframe')
  const sendChildData = {
    obj: {
      age: 15
    }
  }
  // 默认只要是嵌套的页面都可以接收信息 *
  iframe.contentWindow.postMessage(sendChildData, '*')

child.html

html

  <button id="btn">提交</button>

  window.addEventListener('message', function (e) {
    if (!e.data) return
    const { obj } = e.data
    const btn = document.getElementByID('btn')
    btn.innerHTML =obj.age
  }, false)

子向父传递参数

需要明确谁发送postMessage，哪儿接受message

信息发给谁，谁就使用。在父向子时，需要找到 iframe窗口；同理子向父，就需要找到父窗口window.parent
message 直接使用 window.addEventListener('message', function () {}, false) 来进行处理即可

需要注意的一些问题

需要iframe加载完，才能发送信息，否者子元素无法获取到，推荐使用 window.onload（因为onload是等所有资源加载才执行）
由于并非是只有你一人使用 postMessage,因而最好相互沟通，或者传入特定参数进行判断，不然接收多次数据，就有些凌乱了

使用iframe可以完成什么

常见的iframe逻辑触发，页面样式跟着改变，因而需要实时通知父元素，自己的高度。这在之前，更多地是使用setInterval定时去查询，但是多少总有些不好。而使用postMessage便可以简化，事件触发就调用一下发送postMessage事件

页面的使用

上面两张图是两个不同的页面但是它们的基本框架都是一样，每点击一次左边的导航栏改变的都是中间的内容区域。也就是说共同的框架都是没有改变的，改变的是中间的内容。

一些常用属性

参数	解析
align	根据周围的文字排列 iframe。
frameBorder	是否显示框架周围的边框。
noResize	框架是否可调整大小
scrolling	框架是否有滚动条。
src	被嵌入html中文档的URL。

但是嵌入后页面出现了滚动条，嵌入页面的滚动条影响了用户体验和页面美观所以我们得去除掉这个滚动条。其实就是设置 iframe的高度，等于内嵌网页的高度，这样就看不出来滚动条和嵌套痕迹。
自动调节iframe高度Js代码

//根据浏览器大小调整iframe高度
        reSize();
        window.onresize = reSetSize;
        function reSetSize() {
            var windowsHeight = window.innerHeight;
            document.getElementById("content").style.height = (windowsHeight-框架顶部高度) + "px";
        }