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

zsd_666

已于 2024-09-02 16:44:02 修改

阅读量150

点赞数 4

分类专栏： Web前端文章标签： uni-app chrome 前端

于 2024-09-02 16:43:18 首次发布

本文链接：https://blog.csdn.net/zhao3756/article/details/141823688

版权

Web前端专栏收录该内容

106 篇文章 0 订阅

订阅专栏

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>