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

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>
相关推荐
slim~4 分钟前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼8 分钟前
leetcode常用解题方案总结
前端·算法·leetcode
惜.己21 分钟前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js
F2E_Zhangmo1 小时前
基于cornerstone3D的dicom影像浏览器 第二章 加载本地文件夹中的dicom文件并归档
前端·javascript·css
用户21411832636021 小时前
Nano Banana免费方案来了!Docker 一键部署 + 魔搭即开即用,小白也能玩转 AI 图像编辑
前端
Zacks_xdc2 小时前
【前端】使用Vercel部署前端项目,api转发到后端服务器
运维·服务器·前端·安全·react.js
给月亮点灯|2 小时前
Vue基础知识-脚手架开发-使用Axios发送异步请求+代理服务器解决前后端分离项目的跨域问题
前端·javascript·vue.js
张迅之2 小时前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
软工的小白3 小时前
uniapp开发前端静态视频界面+如何将本地视频转换成网络地址
uni-app·音视频
蔗理苦3 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3