uniapp 嵌入外部h5 报错/收不到消息
- [h5 不是uniapp 框架](#h5 不是uniapp 框架)
- [h5 是uniapp 框架](#h5 是uniapp 框架)
使用的版本:
h5 不是uniapp 框架
报错:会报window.__f__is not function...
在引入uni.webview.1.5.8.js 最前面加入window.f = function() {};
h5 是uniapp 框架
报错:会报window.__f__is not function...
此时加入 window.f = function() {}; 还是不能收到消息,需要在引入uni.webview.1.5.8.js 后打补丁
javascript
<script type="text/javascript" >
window.__f__ = function() {};
</script>
<script type="text/javascript" src="/js/uni.webview.1.5.8.js"></script>
<script>
// 等待 uni.webview.js 加载完成
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
console.log('检查 uni.postMessage 是否可用...');
// 如果 uni.postMessage 不存在,手动创建
if (window.uni && !window.uni.postMessage) {
console.log('uni.postMessage 不存在,手动创建');
// 创建 uni.postMessage 方法
window.uni.postMessage = function(message) {
console.log('uni.postMessage 被调用:', message);
// 方式1:使用 __dcloud_weex_postMessage(weex 环境)
if (window.__dcloud_weex_postMessage) {
console.log('使用 __dcloud_weex_postMessage');
window.__dcloud_weex_postMessage({
data: message.data || []
});
return;
}
// 方式2:使用 __uniapp_x_postMessage(uni-app x 环境)
if (window.__uniapp_x_postMessage) {
console.log('使用 __uniapp_x_postMessage');
window.__uniapp_x_postMessage({
options: { timestamp: +new Date },
name: 'postMessage',
arg: message.data || {}
});
return;
}
// 方式3:使用 plus.webview.postMessageToUniNView(plus 环境)
if (window.plus && window.plus.webview) {
console.log('使用 plus.webview.postMessageToUniNView');
try {
var webviewIds = [];
var currentWebview = plus.webview.currentWebview();
if (currentWebview) {
var parentWebview = currentWebview.parent();
if (parentWebview) {
webviewIds.push(parentWebview.id);
}
// 发送消息到 uni-app 服务层
plus.webview.postMessageToUniNView({
type: "WEB_INVOKE_APPSERVICE",
args: {
data: {
options: { timestamp: +new Date },
name: 'postMessage',
arg: message.data || {}
},
webviewIds: webviewIds
}
}, "__uniapp__service");
console.log('✓ 消息已发送到 uni-app 服务层');
}
} catch(e) {
console.error('plus.webview.postMessageToUniNView 失败:', e);
}
return;
}
console.warn('没有可用的 postMessage 方式');
};
console.log('✓ uni.postMessage 方法已创建');
} else {
console.log('uni.postMessage 已存在:', typeof window.uni?.postMessage);
}
}, 100);
});
</script>