vue项目如何内嵌如iframe页面

Posted 2023-04-23

参考技术A 父页面

    <iframe :src="url" :style="width:style.width,height:style.height" frameborder="0"></iframe>       接收传来的页面即子页面

在vue页面中

     created () 

           window.addEventListener("message", this.receiveMessageFromIframePage, false);

       ,

    receiveMessageFromIframePage(event)

          if (event.data && event.data.data && event.data.data.type) 

                   // do somthing, you want to do

                

   

子页面

postMessage(message,targetOrigin,[transfer]);

注释：

    message：将要发送到其他window的数据。

    targetOrigin：指定那些窗口能接收到消息事件，其值可以是字符串 “*” 表示无限制，或者是一个URI。

    transfer：是一串和message同时传递的Transferable对象，这些对象的所有权将被转移给消息的接收方，而发送方将不再保留所有权。

    postMessage方法被调用时，会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息，该MessageEvent消息有四个属性需要注意：

    type：表示该message的类型

    data：为 postMessage 的第一个参数

    origin：表示调用postMessage方法窗口的源

    source：记录调用postMessage方法的窗口对象

记录app webview内嵌vue单页应用所遇到的坑

参考技术A

so在这个过程中无可避免的还是踩了一些坑，所以记录之，先大致说下用到的技术栈：vue全家桶（vue/vue-router/vuex）、sass、axios还有一套ui框架mint-ui，大致也就这些。下面来扒扒都遇到哪些坑。

1.vue-cli脚手架打包的项目部署到服务器上打开空白
首先可以确保路径是没问题的，vue-cli打包生产环境直接修改config目录下的index文件即可。将assetsPublicPath指向你所要放置的服务器目录，并用最后一个文件夹名作为你的项目名。如 http://baidu.com/app/events/my_activity 。 那路径没问题的话。问题出在哪里呢？经过排查，是vue-router中将mode设置为\'history\'的缘故。由于一开始以hash模式的url是带\'#\'号的，本来想着让url好看点，所以用了history模式。虽然在本地调试的时候没问题，但是不部署的话还是需要后台进行相关配置的。这里百度一大堆，不赘述了，随便贴个地址， 看这里

2.webview上自带的坑
讲真的这个只能找你们移动开发的同事。比如我这边遇到的是H5页面内嵌的时候上拉下拉会出现回弹的效果，这是他们加上的，这个难免会对h5造成一些手势冲突。比如我只是想滑动底部的时间选择器来选时间，但是页面不受控制会自动上弹。还有就是定位在中部或底部的输入框，理应在弹出软键盘时自动将键盘顶上去的，这个也应该由移动端开发那边来做相关设置。

3.单页应用不重载页面导致无法调用IOS的某些回调函数
这个是真的坑。在浏览器上跑都好好的，内嵌进app的时候发现ios打开页面后一直有一朵小菊花在loading，尽管数据已经加载完成了。切换页面也一样，除非刷新页面。那问题来了，谁的锅？又是经过一系列排查，发现这个是单页应用跟移动端那边开发的控件相互作用引起的坑。（关我毛事?）那个loading控件是移动端那边用来判断webview加载情况的，在网络请求跟数据请求时都会调用打开这个控件，然而悲剧的是关闭这个控件也就是 WebviewDidFinishLoad 函数却必须是页面有进行重载才会发起调用的，也就是说loading你是开了，但是我 单页应用 怎么来都是在一个页面上操作，自然 不会重载 ，所以也就导致了那朵小菊花一直在转，这也是为什么强制刷新的话可以关闭掉loading控件的原因。这个嘛安卓那边不会有问题，所以应该是ios开发那边的问题，就算loading也应该有个时长可以关闭，或者可以写个接口通过webview的形式让前端去手动调用关闭loading控件，都是可以的。

4.es6对于一些老旧的安卓机型和浏览器的兼容问题
这个一开始还是比较头痛的，毕竟是上了线才发现的问题，陆陆续续在后台收到一些安卓机的反馈，打开活动页面一片空白。看了下大多是安卓4.4.2还有一些4.4以下的安卓机型。这尼玛vuejs不是兼容到安卓4.4吗？所以一开始以为是axios跟mint-ui的问题，但后面发现其实不是。主要原因是对es6兼容不够到位，虽然vue-cli引入了babel对js语法进行降级，但是还是有些老旧的机型会发生各种各样的问题，这里需要引入一个叫babel-polyfill的包。所以你只需只在你引入import vue之前 import babel-polyfill进来就可以了，主要是为了让es6对个别机型做到兼容。