Vue 中使用iframe

最近在项目中遇到集成的需求  做集成会有多种的解决方案，但是最基本的方案可以采用

iframe解决。。。。

例如：在vue项目里需要集成其它的一个页面网页，但这个网页的权限不在vue项目里 ，或者说我要实现某一个特殊页面的需求和功能开发，我们vue有弹窗组件，ok没问题，但是我们想让其成为一个独立的页面。。。那我们的弹窗就不会很适合了，so我采用的就是iframe

iframe的弊端：

1：前端安全考虑，js它只可以防止一半的攻击，但是对于高手高手高高手的大盗来说所就是很easy的。

2.虽然是能将网页完整的呈现出来，但是对于seo还是很不友好的，如果用在首页，搜索引擎就和你的网站没关系喽~~动态网页的话include还是稍微ok的呢

3.iframe的渲染加载是需要时间的  ，它需要调用额外的css,从而使加载时间过长不是很友好

4.导航中涉及iframe时要额外注意了，每个跳转一定要设计好，不然跳到iframe，操作者就无处可去了，被困到iframe中

iframe比较传统，注：HTML5不再支持使用frame，iframe只有src 属性    还是要合理使用

使用时的注意措施：

onload:iframe阻塞---及时出发window的onload事件是很重要的，会及时发出信息“页面加载完毕”，当onload延时时，用户的体验就是你的这个网站会非常卡

vue与iframe的交互

我们不光将页面静态展示出来，如需要在页面内有一些操作  回调处理：

vue父调用iframe中的方法

  <template>          <div class="act-form">            <iframe :src="src" ref="iframe"></iframe>          </div>        </template>        <script>        export default {          data () {            return {              src: 'src地址'            }          },          mounted () {            // iframe的对象            console.log(this.$refs.iframe)            // iframe的window对象            console.log(this.$refs.iframe.contentWindow)          }        }

iframe调用vue父中的方法

毫无疑问我们当然是借助window.parent~~~~~~~~~~~

相互之间的传值

vue父传iframe

 data(){
     return{
        iframeFn
}
 methods: {            sendMessage () {              // 外部vue向iframe内部传数据              this.iframeFn.postMessage({                cmd: 'getFormJson',                params: {}              }, '*')            }

vue接收iframe

   // 在外部vue的window上添加postMessage的监听，并且绑定处理函数handleMessage            window.addEventListener('message', event => {                 // 根据上面制定的结构来解析iframe内部发回来的数据                const data = event.data                switch (data.cmd) {                  case 'returnFormJson':                    // 业务逻辑                    break                  case 'returnHeight':                    // 业务逻辑                    break                }            });            this.iframeWin = this.$refs.iframe.contentWindow          } 

iframe向vue父

发送消息：

      window.parent.postMessage({                        cmd: 'returnHeight',                        params: {                          success: true,                          data: document.body.scrollHeight + 'px'                        }                    }, '*');

接收消息：

 window.addEventListener("message", function(event){                      var data = event.data;                      switch (data.cmd) {                        case 'getFormJson':                            // 处理业务逻辑                            break;                        }                    });

以上的方法亲测有效~使用iframe时要慎用哦 希望对小伙伴们有一点点的作用

好的建议欢迎留言哦~作者是个菜鸟需要不断进步哦~~