当前位置: 首页> 财经> 访谈 > uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.

uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.

时间:2025/7/10 2:33:21来源:https://blog.csdn.net/zhao3756/article/details/141823688 浏览次数:1次

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>
关键字:uniapp h5项目页面中使用了iframe导致浏览器返回按键无法使用, 返回不了上一页.

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: