博客

vue基于iframe标签实现客服聊天页面

  • Post author:
  • Post category:vue


html结构 

<iframe
      :src="this.data"  //请求后台接口返回的网址
      id="bdIframe"     
      scrolling="no"
      frameborder="0"
      style="width: 100%; height: 100%"
    ></iframe>

自动计算当前iframe标签高度 

 mounted() {
    /**
     * iframe-宽高自适应显示
     */
    const oIframe = document.getElementById("bdIframe");
    const deviceWidth = document.documentElement.clientWidth;
    const deviceHeight = document.documentElement.clientHeight;
    oIframe.style.width = Number(deviceWidth) + "px"; //数字是页面布局宽度差值
    oIframe.style.height = Number(deviceHeight) - 50 + "px"; //数字是页面布局高度差
  },


版权声明：本文为qq_42772507原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。