uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.
在 UniApp 中使用 iframe 加载外部页面时,可能会遇到返回键行为不符合预期的问题。这是因为 iframe 本身可以包含多个页面的历史记录,而默认情况下,浏览器的返回键会控制 iframe 内部页面的历史记录,而不是外部页面的历史记录。
解决方案(禁用 iframe 的历史记录)
html
<template>
<view>
<iframe ref="myIframe" :src="iframeSrc" frameborder="0" @load="onIframeLoad"></iframe>
</view>
</template>
<script>
export default {
data() {
return {
iframeSrc: 'http://example.com',
};
},
methods: {
onIframeLoad(event) {
if(this.$refs.myIframe.contentWindow){
// 禁用 iframe 中的历史记录
this.$refs.myIframe.contentWindow.history.pushState({}, '');
this.$refs.myIframe.contentWindow.onpopstate = (event) => {
event.preventDefault();
// 跳转到上一页
uni.switchTab({
url: "/pages/index/index",
});
};
}
},
}
};
</script>