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

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

Logo

前往低代码交流专区

更多推荐