H5关闭当前页面，包括微信浏览器

前端_贾公子
1,052 阅读4分钟

H5关闭当前页面，包括微信浏览器

目录

[TOC]

关闭浏览器当前页面

window.close()方法只能关闭由window.open()或者浏览器直接输入url打开的页面，其余情况安全考虑是被限制的

解决方法

if (navigator.userAgent.indexOf('Firefox') !== -1 || navigator.userAgent.indexOf('Chrome') !== -1) {
          window.location.href = 'about:blank'
          window.close()
        } else {
          window.opener = null
          window.open('', '_self')
          window.close()
        }

Window.close

Window.close() 方法关闭当前窗口或某个指定的窗口。

该方法只能由 Window.open() 方法打开的窗口的 window 对象来调用。如果一个窗口不是由脚本打开的，那么，在调用该方法时，JavaScript控制台会出现类似下面的错误： 不能使用脚本关闭一个不是由脚本打开的窗口。 或 Scripts may not close windows that were not opened by script. 。

同时也要注意，对于由 HTMLIFrameElement.contentWindow 返回的 Window 对象， close() 也没有效果。

语法
window.close();
例子

关闭一个由 window.open()方法打开的窗口

这个例子展示了如何使用这个方法关闭使用 window.open() 打开的窗口

// 用于存储将要打开的窗口（的引用）的全局变量
var openedWindow;
 
function openWindow() {
  openedWindow = window.open("moreinfo.htm");
}
 
function closeOpenedWindow() {
  openedWindow.close();
}

关闭当前窗口

当直接调用 window 对象的 close() 方法而非在一个 window 实例上调用 close() 时，浏览器会关闭最前面的窗口，无论是不是你的脚本创建的这个窗口。（Firefox35.0.1：脚本不能关闭不是他打开的窗口）

function closeCurrentWindow() {
  window.close();
}

关闭微信内置浏览器

关闭微信内置浏览器

判断环境

这段代码是一个JavaScript函数，用于判断当前是否在微信浏览器环境中。让我为您解释每个部分：

  1. var ua = window.navigator.userAgent.toLowerCase(); : 这一行代码声明了一个变量 ua 并将其设置为当前浏览器用户代理字符串（User Agent）的小写版本。用户代理字符串是浏览器发送给服务器的一部分信息，其中包含了关于浏览器类型和版本的信息。

  2. if (ua.match(/micromessenger/i) == 'micromessenger') { ... } :用于检查用户代理字符串中是否包含"micromessenger"，即微信浏览器的标识。这里使用正则表达式来匹配， /micromessenger/i 中的 /i 表示不区分大小写。

  • 如果匹配成功，即用户代理字符串中包含"micromessenger"，那么条件表达式的值将等于'micromessenger'，条件成立，函数返回 true ，表示当前环境是微信浏览器。
  • 如果匹配不成功，条件表达式的值将为 null ，因此条件不成立，函数返回 false ，表示当前环境不是微信浏览器。
	// 判断环境
	isWechat() {
			var ua = window.navigator.userAgent.toLowerCase();
			if (ua.match(/micromessenger/i) == 'micromessenger') { // 判断是否在微信浏览器内
				return true;
			} else {
				return false;
			}
		},

微信内置浏览器关闭

这段代码是一个JavaScript函数，用于关闭当前页面的操作。它主要针对在微信内置浏览器中运行的情况进行处理，而在非微信环境下则不执行任何操作。

具体解释如下：

  1. 首先，通过调用 this.isWechat() 方法来检查当前环境是否是微信内置浏览器。如果不是微信环境，函数直接返回，不执行后续操作。

  2. 如果当前环境是微信内置浏览器，代码会进入 if 语句块。

  3. 在 if 语句块中，使用 setTimeout 函数，延迟100毫秒执行后续操作。这是为了确保在微信环境中调用 WeixinJSBridge 相关的函数。

  4. 再次进入 if 语句块内部，检查 WeixinJSBridge 是否存在并且是否具有 invoke 方法。这是为了确保微信客户端提供了关闭窗口的功能。

  5. 如果条件满足，使用 WeixinJSBridge.invoke('closeWindow', {}, function(res) { ... }) 来调用微信客户端的关闭窗口功能。在调用中传递了一个空对象 {} 作为参数，以及一个回调函数，用于处理关闭窗口的结果。

  6. 在回调函数中，根据 res.err_msg 的值来判断关闭窗口的结果。如果 res.err_msg 的值为 "close_window:ok"，表示关闭成功，会打印"关闭成功的处理"。否则，会打印"关闭失败的处理"。

		closePageWx() {
				// isWechat是我写的一个判断当前环境是否是微信内置浏览器 的方法
				if (!this.isWechat()) return // 非微信环境下，不做处理 
				setTimeout(function() {
					if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
						WeixinJSBridge.invoke('closeWindow', {}, function(res) {
							if (res.err_msg == "close_window:ok") {
								// 关闭成功的处理
								console.log('关闭成功的处理')
							} else {
								// 关闭失败的处理
								console.log('关闭失败的处理')
							}
						});
					}
				}, 100);
			},

完整代码

			// 判断环境
			isWechat() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/micromessenger/i) == 'micromessenger') { // 判断是否在微信浏览器内
					return true;
				} else {
					return false;
				}
			},
			// 微信内置浏览器关闭
			closePageWx() {
				// isWechat是我写的一个判断当前环境是否是微信内置浏览器 的方法
				if (!this.isWechat()) return // 非微信环境下，不做处理 
				setTimeout(function() {
					if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
						WeixinJSBridge.invoke('closeWindow', {}, function(res) {
							if (res.err_msg == "close_window:ok") {
								// 关闭成功的处理
								console.log('关闭成功的处理')
							} else {
								// 关闭失败的处理
								console.log('关闭失败的处理')
							}
						});
					}
				}, 100);
			},
 
			//关闭页面
			closePage() {
				if ((navigator.userAgent.indexOf('Firefox') != -1 || navigator.userAgent.indexOf('Chrome') != -1) && !this
					.isWechat()) {
					console.log('Firefox或者Chrome浏览器');
					window.location.href = 'about:blank'
					window.close()
				} else if (this.isWechat()) {
					console.log('微信内置浏览器');
					this.closePageWx()
				} else {
					console.log('其他浏览器');
					window.opener = null
					window.open('', '_self')
					window.close()
				}
			},
avatar
文章
阅读
粉丝