uniapp app 小程序 h5 兼容 通讯解决方案
<template>
<view class="video">
<iframe id="iframe"
v-if="url"
:src="url"
:style="{
width: '750rpx',
height:$mHelper.getScrollHeight(311)+'px'
}" frameborder="0"></iframe>
</view>
</template>
<script module="iframe" lang="renderjs">
let myChart
export default {
mounted() {
this.init()
},
methods: {
init(){
window.addEventListener('message', (event) =>{
console.log('Web收到iframe消息:', event.data);
if (event.data.type === 'imagePreviewEvent') {
//getMessage methods 里面的方法
this.$ownerInstance.callMethod('getMessage', {
urls:event.data.data.dataSource.map(item=>item.src),
current:event.data.data.index
});
}
});
}
},
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
html给原生安卓ios推送 uniapp不支持
function getDeviceType() {
var userAgent = navigator.userAgent;
if (/Android/i.test(userAgent)) {
return "安卓";
} else if (/iPhone|iPad|iPod/i.test(userAgent)) {
return "iOS";
} else {
return "其他";
}
}
if(getDeviceType()=='安卓'){
palyAppJSBridge.postMessage(JSON.stringify(opt))
}else{
window.webkit.messageHandlers.palyAppJSBridge.postMessage(opt)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
iOS 兼容性问题
问题：
iOS 可能因安全策略阻止 iframe 加载非 HTTPS 内容或限制媒体播放。 ### 解决方案： 在 pages.json 中配置允许任意加载：
{
"path": "pages/iframe",
"style": {
"app-plus": {
"allowsInlineMediaPlayback": "YES" // 允许内联媒体播放
}
}
}
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
同时需在 iOS 项目中配置 NSAppTransportSecurity 允许 HTTP。