1、h5环境,webview可以接收主项目发过来的值
主项目添加以下代码:
<web-view ref="webview" :src="path"></web-view>
onShow() {
this.$nextTick(function() {
if (this.path) {
// #ifdef H5
// 向webview发送消息
this.$refs.webview.iframe.contentWindow.postMessage({ isOnShow: true }, "*");
// #endif
}
})
},
webview项目添加以下代码:
// h5环境的webview环境
window.addEventListener("message", (e) => {
if (e.data.isOnShow) {
// 执行相关逻辑
}
}, false);
2、app环境,webview可以接收主项目发过来的值
主项目添加以下代码:
<web-view :src="path"></web-view>
onShow() {
this.$nextTick(function() {
// #ifdef APP
if (this.$scope.$getAppWebview().children() && this.$scope.$getAppWebview().children().length > 0) {
const webview = this.$scope.$getAppWebview().children()[0];
const msg = { isOnShow: true }
webview.evalJS(`msgFromApp(${JSON.stringify(msg)})`);
}
// #endif
})
}
webview项目添加以下代码:
// app环境的webview环境
window.msgFromApp = (e) => {
if (e.isOnShow) {
// 执行相关逻辑
}
}
3、微信小程序环境(只在手机上生效),webview不可以接收主项目发过来的值,除非更换webview标签上的src属性
主项目添加以下代码:
<web-view :src="path"></web-view>
webview项目添加以下代码:
const enums = {
"hidden": "visibilitychange",
"mozHidden": "mozVisibilitychange",
"msHidden": "msVisibilitychange",
"webkitHidden": "webkitVisibilitychange"
}
let visibilitychange = "";
let hidden = "";
Object.keys(enums).map(key => {
if (typeof document[key] === "boolean" && !visibilitychange) {
hidden = key;
visibilitychange = enums[key];
}
})
visibilitychange = visibilitychange || "visibilitychange";
hidden = hidden || "hidden";
window.frames.document.addEventListener(visibilitychange, () => {
console.log("当前页面是否隐藏:", document[hidden]);
if (document[hidden]) {
console.log('页面隐藏');
} else {
console.log('页面显示')
// 执行相关逻辑
}
})
↓↓↓ 各位大佬点点赞
0 个评论
要回复文章请先登录或注册