(不想看理论知识请直接跳转第五步)

一、嵌入iframe页面业务场景

项目是一个物流运营平台的管理系统，系统中对接了第三方的客服系统。因此这里需要在自己的页面中嵌入三方客服聊天的页面（这里对接了智齿）。ps：别问我为什么不自己写一个聊天的功能，问就是不知道。

二、iframe是什么

ifram标签规定了一个内联框架，让我们有可能在当前的HTML文档中嵌入另外一个文档，目前所有的主流浏览器都支持iframe标签，当然为了以防万一你可以在iframe标签中写入提示文本，以提示用户当前使用的浏览器不支持iframe。

<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()都无法执行。（详情见浏览器同源策略） 页面通信主要有三种 父子、子父、兄弟

通过name属性 name = “iframeContain”

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

子页面

    var data = [a,b,c]
    fun child(){
    return data
复制代码

后续两种这里不再介绍

如果有任何关于本文的意见，欢迎在文章下方留言，我会在看到的第一时间回复。