<iframe src="http://www.baidu.com">
    IE：你们都看我干吗，我现在也是支持的
</iframe>

说白了就是我们在一个页面中嵌入另外一个页面，一般这个页面是独立的。

三、iframe的应用场景包括

1.沙箱隔离（两个页面js/css互不影响）

2.引入三方内容（如三方(QQ)登录，本人引入了三方客服）

3.网页编辑器,所见即所得（element在线编辑器）

4.在页面中打开excel、pdf等文件

知乎的编辑器使用了 contentEditable，但是video使用了iframe标签
个人不建议在页面中嵌入iframe，除非业务真的需要这样做，两个页面之间的通信是iframe最先要解决的问题。后续需要解决的问题则更多。

四、如何控制和使用iframe

iframe 提供了一些属性供我们控制它：

width：iframe的宽

height：iframe的高

iframe页面的长宽高，页面样式，我们可以根据属性进行控制，同样我们也可以
使用 css 为iframe页面添加 class id 来控制iframe

src：我们嵌入页面的URL

name：iframe的name属性

scrolling：（auto，yes，no，默认auto）页面中的iframe是否显示滚动条。

这个属性可以让我们更好的控制 iframe 的滚动条，但是页面高度大于iframe高度时滚动条是一定会出现的，这时我们设置了 no 或者 yes 页面超出部分将不再显示，所以请根据自己的业务情况进行选择。

更多属性请移步：菜鸟教程

五、代码示例

    <iframe
        id="iframeContain"
        name="iframeContain"
        seamless
        scrolling="yes"
        :src="iframeURL"
      >
        您当前的浏览器不支持页面上的功能，请升级您当前的浏览器版本或使用谷歌浏览器访问当前页面
     </iframe>
<style lang='scss' scoped>

/** iframe样式 */
#iframeContain{
  width: 100%;
  height: 800px;
}
</style>

六、两个页面之间的通信

页面的通信大前提是页面在同一域名下，不同域名下的通信极其困难，甚至window.close()都无法执行。（详情见浏览器同源策略）
页面通信主要有三种 父子、子父、兄弟

1.父子

通过name属性 name = “iframeContain”

父页面

    fun parent（）{
    var chilsData = iframeContain.window.child()
    //  chilsData = [a,b,c]
    }

子页面

    var data = [a,b,c]
    fun child(){
    return data
    }
后续两种这里不再介绍

 
 


  
  
转载自https://blog.csdn.net/ForgivenCheney/article/details/97643114