uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.
uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.
在 UniApp 中使用 iframe 加载外部页面时,可能会遇到返回键行为不符合预期的问题。这是因为 iframe 本身可以包含多个页面的历史记录,而默认情况下,浏览器的返回键会控制 iframe 内部页面的历史记录,而不是外部页面的历史记录。
解决方案(禁用 iframe 的历史记录)
<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>