监听H5浏览器返回事件,解决监听webviewH5返回事件,触发H5给小程序传参(亲测有效)

这篇具有很好参考价值的文章主要介绍了监听H5浏览器返回事件,解决监听webviewH5返回事件,触发H5给小程序传参(亲测有效)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在浏览器中,会有点击返回、后退、上一页等按钮实现自己的关闭页面、调整到指定页面、确认离开页面或执行一些其它操作的需求。可以使用 popstate 事件进行监听返回、后退、上一页操作。

一、 简单介绍 history 中的操作

1.window.history.back(),后退

2.window.history.forward(),前进

3.window.history.go(num),前进或后退指定数量历史记录

4.window.history.pushState(state, title, utl),在页面中创建一个 history 实体。直接添加到历史记录中。

参数:state:存储一个对象,可以添加相关信息,可以使用 history.state 读取其中的内容。
title:历史记录的标题。
url:创建的历史记录的链接。进行历史记录操作时会跳转到该链接。

5.window.history.replaceState(),修改当前的 history 实体。

6.popstate 事件,history 实体改变时触发的事件。

7.window.history.state,会获得 history 实体中的 state 对象。

二 监听H5浏览器返回事件,同时给小程序传递参数

要求:在H5页面为进行操作时,返回小程序,触发弹框显示

问题:在小程序的成功回调方法中触发打开H5页面(通过webview方式),如果在H5页面点击左上角的物理返回键时,会返回到小程序中,这时将无法再次触发跳转H5页面

解决方法:
1、监听H5页面的物理返回键
2、返回时给小程序传递参数;
3、在小程序中接收参数,通过参数判断,拉起弹框提示再次跳转

取消默认的返回操作:

1.添加一条 history 实体作为替代原来的 history 实体
function pushHistory(){
  var state = {
       title: "title",
       url: "#"     
    }
  window.history.pushState(state, "title", "#");   
}
pushHistory()
2.监听 popstate 事件

window.addEventListener("popstate", function(){
    //doSomething
}, false)

在项目中使用

H5页面代码:

1、安装微信sdk
npm install weixin-js-sdk –save
2、在页面引入微信sdk
import wx from 'weixin-js-sdk'
3、H5页面监听返回,给小程序传递参数

 mounted () {
    const that = this
    // 监听返回
    this.pushHistory()
    window.addEventListener('popstate', function (e) {
      // 为了避免只调用一次
      that.pushHistory('title1')
      // 自定义方法, 直接关闭网页或返回小程序上一页
      that.goBack()
    },
    false
    )
  },
methods:{
// 添加一条 history 实体作为替代原来的 history 实体
    pushHistory (str = 'title', url = '#') {
      const state = {
        title: str,
        url
      }
      window.history.pushState(state, state.title, state.url)
    },
    goBack () {
      wx.miniProgram.navigateBack()
      // postMessage给小程序传递参数,只有当小程序页面退出和当前页面销毁的情况下才会触发传参
      wx.miniProgram.postMessage({ data: { passWord: this.passwordValue } })
    },
}

小程序中代码:

1、在webview页面接收H5页面传参,并通过页面栈给小程序上一个页面传参
<template>
	<view>
		<web-view :src="url" @message="handleMessage"></web-view>
	</view>
</template>

<script>
	import apiUrl from '@/utils/commonUrl.js';
	export default {
		data() {
			return {
				url: '',
			};
		},
		onLoad(option) {
			this.url = apiUrl.videoUrl + "?t=" + new Date().getTime() + '&message=' + option.message
		},
		methods:{
			handleMessage(res){
				let pages = getCurrentPages(); //获取所有页面栈实例列表
				let nowPage = pages[pages.length - 1]; //当前页页面实例
				let prevPage = pages[pages.length - 2]; //上一页页面实例
				prevPage.$vm.passwordValue = res.detail.data[res.detail.data.length - 1].passWord; //修改上一页data里面的参数值 
			},
		}
	}
</script>

<style lang="scss">

</style>
2、在跳转webview页面前的页面watch监听参数变化,触发弹框显示
<!-- 请输入密码 -->
		<view class="success-box" v-if="passwordsubmitIshow">
			<view class="contain-top">
				温馨提示
			</view>
			<view class="success-text1">
				请前往重置密码
			</view>
			<button class="bottom-submit" @click="passwordConfirm">确认</button>
		</view>
watch: {
	'passwordValue': {
		handler(newVal) {
			if (newVal == 0) {
				this.passwordsubmitIshow = true;
			} else if (newVal == 1) {
				this.passwordsubmitIshow = false;
			}
		},
		deep: true
	},
},

实现效果

在H5页面为进行操作或未完成操作时,返回小程序,触发弹框显示

h5监听返回事件,小程序
h5监听返回事件,小程序

三 在指定页面监听H5浏览器返回事件,页面销毁时清除监听事件,同时给小程序传递参数

当H5只有一个页面时,上面的方法可以正常使用;但是当H5有很多页面时,需要在指定页面添加返回的监听事件和返回的取消监听事件

示例:H5项目中代码文章来源地址https://www.toymoban.com/news/detail-560046.html

  mounted () {
    // 监听返回
    this.pushHistory()
    if (this.personList.token != '') {
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  // 页面销毁时,清除返回监听事件
  beforeDestroy () {
    window.removeEventListener('popstate', this.goBack, false)
  },
  methods: {
    // 插入浏览器历史
    pushHistory (str = 'title', url = '#/detail') {
      const state = {
        title: str,
        url
      }
      window.history.pushState(state, state.title, state.url)
    },
    goBack () {
      // 为了避免只调用一次
      this.pushHistory('title1')
      // 自定义方法, 当页面路由为指定页面时,执行监听的方法
      if (window.location.href == 'https://cbstest.ncbmip.com/minip/rongshu/index.html#/detail') {
        wx.miniProgram.navigateBack()
        wx.miniProgram.postMessage({ data: { passWord: this.passwordValue } })
      }
    },

到了这里,关于监听H5浏览器返回事件,解决监听webviewH5返回事件,触发H5给小程序传参(亲测有效)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信H5下载文件、微信浏览器无法下载文件解决方案

    手机端的微信访问网页的时候,是禁止直接下载文件的 但是IOS端可以预览.txt/.doc/.docx/.xls/xlsx/.pdf等格式的文件,Android端在下载这些格式的文件时,可以唤起 ‘即将离开微信,在浏览器打开’ 提示 所以,根据手机微信的这些限制,考虑在下载文件时,使Android微信在下载任何

    2024年02月16日
    浏览(90)
  • 在uniapp Vue3版本中如何解决web/H5网页浏览器跨域的问题

    uniapp项目在浏览器运行,有可能调用某些接口会出现跨域问题,报错如下图所示: 存在跨域问题的原因是因为浏览器的同源策略,也就是说前端无法直接发起跨域请求。同源策略是一个基础的安全策略,但是这也会给uniapp/Vue开发者在部署时带来一定的麻烦。一般来说,浏览

    2024年01月21日
    浏览(59)
  • 微信浏览器(公众号小程序),h5端,小程序 ,app端 解决video视频自动触发播放问题,

    最近一直在开发h5端 和公众号小程序,一般总会遇到video不能自动触发播放(由于不同浏览器限制)、 微信浏览器: 写一个方法: 2.在onload和change方法中执行:调用  不加延时器时器没有效果得,这样在微信公众号在微信浏览器中会实现自动播放 h5端 ,微信小程序 实现自动

    2024年02月05日
    浏览(62)
  • 小程序内嵌H5页面监听小程序的返回事件

    因为业务上有需求,在开发小程序的时候有些页面要使用web-view组件嵌套H5页面 有个页面内有个表单,在表单内容还为填写完成的时候,监听用户点击左上角返回事件,弹出一个提示框,因为H5页面在小程序中的层级很高,所以弹出提示框只能在H5页面内完成,因此要在H5页面

    2024年02月11日
    浏览(50)
  • vue3 动态监听浏览器窗口变化

    定义一个属性记录宽度 在 vue mounted 的时候 去挂载一下 window.onresize 方法 去监听这个 属性值的变化,如果发生变化则讲这个 val 传递给 this.screenWidth 这样screenWidth就跟随浏览器的窗口大小动态变化了 进行使用

    2024年02月13日
    浏览(49)
  • H5静态页面开发环境跳转小程序(微信浏览器,外部浏览器)

    网上有很多教程,但是具体的坑避不开,这里就以图文形式全流程介绍如何实现微信外环境静态h5跳转小程序。 1.官方开发文档参考:https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html 官方文档只提供了关键代码,但是没说怎么上传静态文件,怎么上

    2024年02月04日
    浏览(76)
  • 浏览器事件循环(事件轮询)

    浏览器事件循环(Browser Event Loop)是浏览器用于处理用户输入、网络请求、渲染和其他异步事件的机制。这个循环确保了 JavaScript 代码的执行是非阻塞的,允许浏览器同时处理多个任务,从而提高用户体验。以下是浏览器事件循环的详细说明: 调用栈: 当一个 JavaScript 脚本

    2024年01月19日
    浏览(51)
  • 微信浏览器H5下载文件

    微信浏览器无法下载文件,我们可以跳转外部浏览器进行下载。 首先绑定按钮事件(我这里用的uniapp开发) button class=“btn” @click=“downFile”点击下载 然后判断当前页面是否是微信浏览器,若是,提示用户打开右上角选择浏览器打开链接,若不是,进行下载 进入默认浏览器

    2024年02月16日
    浏览(79)
  • h5跳转微信小程序(微信内部浏览器以及外部浏览器均适用)

    1,先把这个链接给后端 让后端写个接口 获取scheme码 | 微信开放文档 需要把path路径(跳到小程序的那个页面的路径)给后端 2,上代码(vue2框架) 延迟一点拿到路径再跳 完事~

    2024年01月23日
    浏览(68)
  • 事件类型(鼠标、键盘、浏览器)

    1、onmouseover鼠标移入事件 在鼠标指针移动到元素上时触发 2、onmouseout 鼠标移出事件 在鼠标指针移出元素后触发 3、onmouseenter鼠标进入事件 在鼠标指针进入到元素上时触发 4、onmouseleave 鼠标离开事件 在鼠标指针离开元素后触发 5、onfocus获取焦点事件 在鼠标光标获取输入框焦

    2024年02月20日
    浏览(42)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包