iframe向父级传递值

我们这的需求就是要在微信公众嵌套入的h5+页面里在嵌入一个页面并且那个页面还需要有一些跳转到(打开手机)浏览器的操作
我第一反应就是写一个plus.webview直接嵌入
但是写完发现不行
微信公众根本就带不开我写的plus.webview应该是就不支持webview嵌入

iframe+postMessage

因此我选择iframe+postMessage的方法
选择这个方法的原因就是iframe是无法让iframe内部的顶级对象是没有 plus对象的 就算父级有也不行
因为我的业务要求就是能获得iframe内的需要跳转到浏览器路径并且让他浏览器里显示
因此不是必须在嵌入的iframe里完成我只需要让他把路径反到父级行
我尝试过也通过window.parent.变量 = xxxxx来直接让iframe调用父级这个要求比较严重,需要同源同策存在跨域问题当不是同源同策会报Blocked a frame with origin "xxxxxxx"from accessing a cross-origin frame.
因此为了不收同源同策的影响
使用postMessage

iframe

// 最好是上标记属性 因为在框架下比如(webpack打包的项目)回自己发一些postMessage
let data = {url:'https://view.xdocin.com/view?src=' + this.iframeSrc,type:'openUrl'}
// 第二个 '*' 就是用于解决跨域问题
//parent属性返回当前窗口的父窗口。
window.parent.postMessage(data,'*')

父级

父级监听message事件
然后通过传过来的url在浏览器中打开

window.addEventListener('message',function(e){if(e.data.type == 'openUrl'){console.log('ggggqqq',e.data)if(window.plus){plus.runtime.openURL(e.data.url)}}},false);},

h5+ 的plus对象

因为微信公众号嵌入页用的是x5 QQ浏览器的内核
是不支持plus对象是的
如果你写的是h5+应用嵌入微信公众号
最好加上是否有plus的判断并且做好没有plus对象的处理
比如在跳转页面就可以这样写

if(window.plus){plus.runtime.openURL(e.data.url);
} else {window.open(e.data.url)
}

微信公众嵌套页面里再嵌入其他页面的一些问题相关推荐

微信公众号开发--自定义菜单跳转页面并获取用户信息(续)
之前写过一篇微信公众号开发–自定义菜单跳转页面并获取用户信息由于当时是刚学习微信公众号开发当时的思路虽然可行,不过不是最好的,最近也用到了需要获取用户信息的地方,再次整理一下. 流程注意点 ### ...
微信公众号html怎么做的,微信公众平台页面模板怎么用？分类目录页面是如何制作的？...
原标题:微信公众平台页面模板怎么用?分类目录页面是如何制作的? 专业自媒体文章排版工具! 众所周知,微信公众平台在前一段推出了一个功能,称其名为"页面模板":那么有些朋友就要问我了 ...
公众号如何跳转到页面php,图文详解微信公众号开发自定义菜单跳转页面并获取用户信息实例...
这篇文章主要介绍了微信公众号开发自定义菜单跳转页面并获取用户信息实例详解的相关资料,需要的朋友可以参考下微信公众号开发自定义菜单请先读完本文再进行配置开发请先前往微信平台开发者文档阅读&qu ...
修改审查元素怎么保存_[图解]微信公众号链接里的音频保存方法
第1步,登陆"微信PC版",将含有音频的微信公众号链接发送至"文件传输助手"或者发送给自己,左键单击链接,弹出微信浏览界面第2步,在微信浏览界面,左键单击按钮 ...
微信公众号菜单跳小程序提示页面不存在的解决办法
今天在微信公众号添加了菜单准备跳转到小程序的. 显示获取了我要跳转的页面路径 "pages/orderList/orderList.html?sts=0" 然后在公众号菜单里直接 ...
微信公众号页面支付接口java,[Java教程]微信公众号支付（三）：页面调用微信支付JS并完成支付...
[Java教程]微信公众号支付(三):页面调用微信支付JS并完成支付 0 2015-09-15 15:00:30 一.调用微信的JS文件 1.首先要绑定[JS接口安全域名],"公众号设置&q ...
java自定义菜单跳转页面_微信公众号开发自定义菜单跳转页面并获取用户信息实例详解...
微信公众号开发自定义菜单请先读完本文再进行配置开发请先前往微信平台开发者文档阅读"网页授权获取用户基本信息"的接口说明在微信公众账号开发中,往往有定义一个菜单,然后用户点击 ...
批量获取微信公众号文章里的图片
有人在群里转了一本书电子版的公众号,想把里面的图片都下下来做成PDF文档电商图片助手下载:http://www.pc6.com/softview/SoftView_584608.html 转载自:微 ...
怎么在微信公众号文章里添加附件(如word、excel、pdf等)
您是否想在自己的公众号文章插入一些资料分享呢?单位的公众号文章需要添加招聘录用表格怎么办?学校的公众号需要在开学通知文章中插入健康承诺书文档怎么办呢? 我们作为一个公众号运营者都知道,在微信公众号中发 ...

微信公众嵌套页面里再嵌入其他页面的一些问题

iframe向父级传递值

iframe+postMessage

iframe

父级

h5+ 的plus对象

微信公众嵌套页面里再嵌入其他页面的一些问题相关推荐

最新文章

热门文章