监听浏览器后退事件，使其转向指定URL，控制某些页面不能返回

最新推荐文章于 2024-07-30 16:55:10 发布
最新推荐文章于 2024-07-30 16:55:10 发布
阅读量1.4w 收藏 16
点赞数 18
分类专栏： js/html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/dreamer_8399/article/details/75022144
版权

（一）开发过程中经常遇到这种情况:页面不允许返回到上一页面或者需要转到指定页面，这时候我们就需要监听到浏览器后退事件，从而将它的浏览历史记录删除，然后转向你指定的URL。 具体执行过程如下:

$(function(){
//清空浏览器历史记录
pushHistory();
//监听浏览器后退事件
window.addEventListener("popstate",
    function(e) {
    //转向指定的URL
    location.href=url;
    }, false);
    //清空浏览器历史记录
 function pushHistory() {
        var url = "#";
        var state = {
            title: "title",
            url: "#"
        };
        window.history.pushState(state, "title", "#");
    }
});
注：这种方法有种缺陷，你将后退事件强制转到URL，如果你连续点击物理返回时会出现这两个页面之间来回跳，已经不是正常的返回了。如果想要返回正常，则需要在之前的n个页面都进行强制跳转，页面多的时候是不可行的。

（二）最近遇到了微信浏览器的后退事件处理，转到指定的URL上述方法就可以实现，但是如果需要监控到返回事件时关闭微信浏览器，因为微信有着自己的JS-SDK，所以需引入微信的js-sdk，传统js:window.close(); 在微信浏览器中不起作用。步骤如下（Java）：

引入参考公众号官网：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、后台代码：将微信公众号相关参数传到前台

	/**
	* <b>描述:</b> 
	* @param model
	* @param url 当前URL，必须保证一致
	* <br><b>Author:</b>
	* <br><b>Date:</b> 2017年7月25日 下午4:04:20
	*/
	public void weixinJS(Model model,String url){
		WechatInformation wci = wechatInformationService.load();
		String appId = wci.getAppid();
		String jsapi_ticket = wci.getJsapi();
		String noncestr = UUID.randomUUID().toString();
		String timestamp = Long.toString(System.currentTimeMillis() / 1000);
		model.addAttribute("appId", appId);
		model.addAttribute("jsapi_ticket", jsapi_ticket);
		model.addAttribute("noncestr", noncestr);
		model.addAttribute("timestamp", timestamp);
		model.addAttribute("url", url);
		String signature;
		try {
			signature = getSignature(jsapi_ticket,url,noncestr,timestamp);
			model.addAttribute("signature", signature);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		} catch (AesException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
	}
	/**
	* <b>描述:</b> JS-SDK使用权限签名
	* @return 
	* <br><b>Author:</b>
	* <br><b>Date:</b> 2017年6月5日 下午4:30:23
	 * @throws AesException 
	 * @throws IOException 
	*/
	public String getSignature(String jsapi_ticket,String url,String noncestr,String timestamp) throws IOException, AesException{
		String s = "jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url;
		String signature = getSha1(s);
		return signature;
	}
	public static String getSha1(String str) {
		if (str == null || str.length() == 0) {
			return null;
		}
		char hexDigits[] = { '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f' };
		try {
			MessageDigest mdTemp = MessageDigest.getInstance("SHA1");
			mdTemp.update(str.getBytes("UTF-8"));

			byte[] md = mdTemp.digest();
			int j = md.length;
			char buf[] = new char[j * 2];
			int k = 0;
			for (int i = 0; i < j; i++) {
				byte byte0 = md[i];
				buf[k++] = hexDigits[byte0 >>> 4 & 0xf];
				buf[k++] = hexDigits[byte0 & 0xf];
			}
			return new String(buf);
		} catch (Exception e) {
			// TODO: handle exception
			return null;
		}
	}


2、jsp页面操作

（1）引入js文件：<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

（2）

$(function(){
        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '${appId}', // 必填，公众号的唯一标识
            timestamp: '${timestamp}', // 必填，生成签名的时间戳
            nonceStr: '${noncestr}', // 必填，生成签名的随机串
            signature: '${signature}',// 必填，签名，见附录1
            jsApiList: ['closeWindow'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        pushHistory();
        window.addEventListener("popstate",
        function(e) {
            wx.closeWindow();
        },false);
        function pushHistory() {
            var url = "#";
            var state = {
                title: "title",
                url: "#"
            };
            window.history.pushState(state, "title", "#");
        }
    })
综上，就可以在返回的时候关闭微信浏览器。

注：上述（一）（二）都存在一个问题，在页面加载完毕之后，点击物理返回键，效果是成功的；但是当页面未加载完，物理点击的话js未被触发，就会按history中的记录来回跳转。

（三）要解决上述问题，归根结底是要让不想返回的页面，不要保存到history。这样跳转就不会存在上述问题。

纠结两天找到的解决方案：大致思路就是说将要不想返回的页面（以下简称A.jsp）的URL进行替换，替换成下一个跳转页面B.jsp的URL，当触发跳转事件时reload即可，这样history里头存放的是B.jsp的URL,浏览器history中没有存放，当然返回的时候就不会返回的A.jsp喽。具体如下：

var replaceUrl;  
        function pushHistory(replaceUrl) {  
            var state = {  
                title: "title",  
                url: replaceUrl  
            };  
            window.history.replaceState(state, "title",replaceUrl);  
        }  
     //当点击B.jsp跳转时  
    $("#btn").click(){  
        pushHistory("../"+url);//你要跳转的URL  
        location.reload();  
    }

注：这个replaceUrl必须是同域，跨域是不允许的














                

        

    

  



    



                



	

		

			

				
					
【React】监听浏览器返回事件

				
			

			

				

					qq_45677671的博客
				

				

					07-11
					
					1016
					
				

			

		

		

			
				
React 监听浏览器返回事件。

			
		

	



                

            
              



	

		

			

				
					
基于java的网页_基于java的简单网页浏览器

				
			

			

				

					weixin_35284593的博客
				

				

					02-12
					
					1164
					
				

			

		

		

			
				
用java编写简单网页浏览器，用到两个类WebBrowser and ViewSourceFreme，他们分别的功能是：WebBrowser.java 类是网页浏览器的主类文件，生成网页浏览器的主题框架，并实现框架上各个组件的监听事件。ViewSourceFrame.java类是实现网页浏览器源代码查看的主体框架，并提供了源代码的保存功能。好了，废话少说，直接上代码package Browser;...

			
		

	



              


  
              

                


	

		

			

				
					
监听浏览器后退事件

				
			

			

				

					IsolatedTraver
				

				

					05-10
					
					1万+
					
				

			

		

		

			
				
监听浏览器后退事件（手机通过JS监听返回按钮事件）
在开发过程中我们经常遇到需要自定义返回按钮跳转到指定位置，而并非按照历史纪录一级一级向后跳转
本文将详细介绍如何利用浏览器自带的popstate事件监听浏览器返回事件，并跳转到指定位置
popstate
The popstate event is fired when the active history entry changes. If th...

			
		

	





	

		

			

				
					
 监听浏览器的后退事件

				
			

			

				

					weixin_34054931的博客
				

				

					07-28
					
					953
					
				

			

		

		

			
				
1.window的popstate事件
监听浏览器回退事件，主要依赖于监听：window的popstate事件，因为浏览器在被点击“后退”或者“前进"按钮时，都会触发popstate事件。因此，可以在
window.on('popstate', function(){
    // to do
})
2.window的pushState事...

			
		

	



		

			
		



	

		

			

				
					
浏览器的后退或前进操作，监听popstate事件

				
			

			

				

					2401_83014000的博客
				

				

					05-24
					
					1066
					
				

			

		

		

			
				
修改图一中的图片，使用浏览器回退，图二中图片没有修改。

			
		

	





	

		

			

				
					
监听浏览器返回、后退、上一页按钮事件方法

				
			

			

				

					ithunzi的博客
				

				

					10-22
					
					4522
					
				

			

		

		

			
				
popstate事件监听不管用，因为history.state没有数据，直接返回至a.page。在b.page点击浏览器右上角返回让他监听到并且跳转到B网站的b_c.page。1.在B网站加一个空白的页面b_empty.page放入上面的监听代码。这样在b.page 返回b_empty.page的时候就能监听到了。2.A网站的a.page跳转到B网站的b_empty.page。网站A-页面a.page 转到网站B -页面b.page。3.b_empty.page 自动跳转到b.page。

			
		

	





	

		

			

				
					
【框架事件绑定大揭秘】：React和Vue中的高级事件监听与页面跳转技术

				
			

			

				

					
				

			

		

		

			
				
紧接着，文章转向Vue框架，阐述了Vue事件监听的基础、高级事件处理技巧以及如何在Vue中进行有效的页面导航与数据传递。在深入应用章节，本文比较了React与Vue的事件处理策略，提出了实现高级页面跳转技术的方案，

			
		

	





	

		

			

				
					
Java课程设计源码：简易网页浏览器解析

				
			

			

				

					
				

			

		

		

			
				
 - 在浏览器中运行Java代码需要浏览器支持Java插件，但是现代浏览器已经不再支持Java插件，因为它们转向了更加安全和高效的Web技术。  3. **Java与网络通信**：  - Java提供了丰富的网络API，例如java.net包，它包括...

			
		

	





	

		

			

				
					
C#网页浏览器

				
			

			

				

					09-13
				

			

		

		

			
				
3. 编写代码：通过编程控制WebBrowser控件的行为，如设置初始URL、监听导航事件、注入自定义JavaScript等。  4. 实现额外功能：根据需求，编写代码实现额外的功能，如搜索框、前进/后退按钮、地址栏等。  5. 调试与...

			
		

	





	

		

			

				
					
基于JAVA的Web浏览器

				
			

			

				

					locjent的博客
				

				

					07-25
					
					3771
					
				

			

		

		

			
				
网页浏览器是一个软件程序，用于与www建立联结，并与之进行通信。它可以在www系统中根据链接确定信息资源的位置，并将用户感兴趣的信息资源取回来，对HTML文件进行解释，然后将文字图像显示出来，或者将多媒体信息还原出来。本Web浏览器是采用JDIC项目提供的WebBrowser组件实现网页浏览，使用JavaSwing技术实现该浏览器的图形界面。

			
		

	





	

		

			

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

					
热门推荐

				
			

			

				

					m0_47791238的博客
				

				

					06-22
					
					1万+
					
				

			

		

		

			
				
小程序通过webview打开H5页面，监听H5返回事件，实现H5返回时，给小程序传递参数

			
		

	





	

		

			

				
					
浏览器前进或者回退 监听 发送接口

				
			

			

				

					kilito_01的博客
				

				

					07-30
					
					210
					
				

			

		

		

			
				
【代码】浏览器前进或者回退 监听 发送接口。

			
		

	





	

		

			

				
					
JS监听浏览器后退事件

				
			

			

				

					weixin_30555515的博客
				

				

					09-20
					
					418
					
				

			

		

		

			
				
在做报表开发时遇到问题：由第一层数据下钻到下一层，是在一个文件中开发，通过显示隐藏来控制，下钻到第二层后通过返回按钮来返回第一层，现根据业务需求调整，不能显示返回按钮，需通过浏览器的后退来返回到数据的第一层。
处理这个问题，首先要在下钻时，向浏览器的history插入一条记录，保证点击浏览器后退时，仍然在本文件中，而不是跳走了。其次，要监听浏览器的后退操作，处理页面显示隐藏逻辑。
1...

			
		

	





	

		

			

				
					
单点登录跳转到内容页，禁用浏览器返回功能

				
			

			

				

					u010973529的专栏
				

				

					10-06
					
					3263
					
				

			

		

		

			
				
前言
在项目上有这么个小需求，页面单点登录过来后跳转到某个页面。产品大哥说了，要求登录过来后不能再让用户通过浏览器返回按钮回到登录页，这显得很奇怪。OK，没有问题的，理论上来讲技术能解决一切问题。
思路

1.通过获取浏览器的历史记录，如果上一页是登录页的话，就不让返回了
答案当然是不可以的。因为经过了解，浏览器为了安全着想，只给了你获取历史长度，而不允许你查看距离的栈内容。此路不通。
2.当从登录页过来后，清空当前的历史记录
答案当然也是不可以的。同样的，浏览器为了安全着想，在操作历史记录这方面只允许你使

			
		

	





	

		

			

				
					
浏览器页面的回退实现

				
			

			

				

					promote的博客
				

				

					11-21
					
					3121
					
				

			

		

		

			
				
history.back():后退
history.forword():前进
history是浏览记录对象，go()方法可以跳到以当前页为基准的某个历史页面
history.go(0): 刷新当前页
history.go(1): 前进+刷新
history.go(-1):后退+刷新
history.go(-n): 回到前第n次的页面
go(-1):返回上一页，原页面表单中的内容会丢失；back():返回上一页，原页表表单中的内容会保留。

...

			
		

	





	

		

			

				
					
浏览器返回按钮跳转到指定页面

				
			

			

				

					start_sea的博客
				

				

					07-16
					
					6290
					
				

			

		

		

			
				
浏览器返回按钮跳转到指定页面
在使用手机浏览器打开网页时，我们会发现有时候点击浏览器下方的返回按钮，并未返回到首页，而是会跳转到其他页面。
怎么实现呢，下面跟大家简单分享一下：
1、改变浏览器回退的历史记录url地址：
每打开一条地址，浏览器会记录一条历史记录，浏览器回退按钮是读取上一条历史记录的地址并跳转。当只打开一个页面时浏览器返回按钮获取不到上一条历史记录，直接返回首页。（注：这里不考虑部分手机浏览器的无痕浏览设置）
为保证我们打开网页之后，浏览器的历史记录会有多条记录，打开网页时先进行添加历史记录的

			
		

	





	

		

			

				
					
html 禁用自动跳转,javascript 实现页面跳转，禁止返回上一页【转】

				
			

			

				

					weixin_39657662的博客
				

				

					05-30
					
					760
					
				

			

		

		

			
				
前言:有个几后来含些在到气时按式近篇来又的方浏消风需求就是访问指定URL自动跳转到指定的URL，禁止返回上一页。首先想到是写个静态网页，通过调用js相关方法可以实现。以下是示例代码一说为年供发架据制个似业告了到会转和大效以插各近步直了轻一过都业器项的务问一消进载滚效果达件种近步直了轻一过都业器项的务问一消进载滚效果达件种：webredirectionvar URL = "http://www.ba...

			
		

	





	

		

			

				
					
关于浏览器后退的一个问题

				
			

			

				

					cacalili的博客
				

				

					01-18
					
					370
					
				

			

		

		

			
				
禁止浏览器后退：在$(function() {})加入下面代码history.pushState(null,null,document.URL);window.addEventListener('popstate',function(){  history.pushState(null,null,document.URL);});在js中，加入下面代码，解决苹果微信浏览器后退时，页面不刷新问题：w

			
		

	





	

		

			

				
					
js监听浏览器回退监听事件

				
			

			

				

					weixin_71732962的博客
				

				

					08-11
					
					2328
					
				

			

		

		

			
				
浏览器监听回退前进操作

			
		

	





	

		

			

				
					
selenium网页的前进后退刷新以及地址栏的确认操作如果书写代码

					
最新发布

				
			

			

				

					03-30
				

			

		

		

			
				
<think>好的，我现在需要帮助用户解决关于Selenium中网页的前进、后退、刷新以及地址栏确认操作的代码编写问题。首先，我应该回顾用户之前的问题，看看是否有相关背景需要参考。

用户之前询问了如何使用threading实现多浏览器并发操作，我提供了相应的代码示例。现在用户的问题转向了Selenium的导航控制，这可能意味着他们在进行自动化测试或爬虫开发时，需要控制浏览器的导航行为。

接下来，我需要确定用户的具体需求。他们可能想要知道如何在Selenium中执行基本的浏览器导航操作，比如回退到上一页、前进到下一页、刷新当前页面，以及如何获取或跳转到特定的URL。这些都是Selenium WebDriver的基本功能，但用户可能需要具体的代码示例和说明。

我需要确保回答的结构清晰，分步骤解释每个操作，并提供可执行的代码示例。同时，要遵循用户之前的系统级指令，比如使用正确的中文，行内数学表达式用$...$格式，独立公式用$$...$$，不过在这个问题中可能不需要数学公式，但要注意LaTeX语法的正确性，如果有的话。

用户可能对每个方法的具体用法和注意事项不太清楚，比如driver.get()和driver.navigate().to()的区别，或者前进和后退操作的前提条件（需要有浏览历史）。因此，在解释每个方法时，需要说明其用途、使用场景以及可能的异常情况，比如在无法前进或后退时调用相关方法是否会抛出错误。

另外，用户可能希望代码示例能覆盖这些操作的综合应用，展示如何在一个流程中使用这些方法。例如，先访问一个页面，然后点击链接，再回退，再前进，最后刷新。这样的示例能帮助用户更好地理解这些方法在实际中的应用顺序和效果。

我还需要检查是否有遗漏的操作或常见问题需要提及，比如处理页面加载等待时间，或者在执行导航操作后如何确认当前URL是否符合预期。这可以通过添加注释或额外的代码行来实现，比如使用driver.current_url来获取当前地址，并与预期值进行比较。

最后，确保代码示例正确无误，符合Python和Selenium的最新版本语法。例如，确认Service类的导入路径是否正确（从selenium.webdriver.chrome.service导入Service），以及Chrome选项的设置是否恰当，如无头模式或其他参数的添加。

总结来说，我需要分步骤介绍每个导航操作，提供代码示例，解释其用途和注意事项，并给出一个综合应用的例子，帮助用户全面理解如何在Selenium中控制浏览器的导航行为。</think>以下是使用Selenium实现浏览器导航功能的详细代码说明：

---

### 一、基础导航操作

```python
from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.chrome.options import Options

# 初始化浏览器
def init_browser():
    chrome_options = Options()
    chrome_options.add_argument('--no-sandbox')
    driver = webdriver.Chrome(
        service=Service('chromedriver.exe'),
        options=chrome_options
    )
    return driver

driver = init_browser()
```

---

### 二、核心操作方法

#### 1. 地址栏操作
```python
# 跳转指定URL（两种方式）
driver.get("https://www.baidu.com")  # 推荐方式
driver.execute_script("window.location.href = 'https://www.google.com'")  # JS方式

# 获取当前URL
current_url = driver.current_url
print("当前地址：" + current_url)
```

#### 2. 页面刷新
```python
# 标准刷新方式
driver.refresh()

# 通过地址栏重载（等效刷新）
driver.get(driver.current_url)

# 快捷键方式（需焦点在页面）
driver.find_element_by_tag_name('body').send_keys(Keys.F5)
```

#### 3. 历史记录控制
```python
# 后退到前一页
driver.back()  # 等效浏览器←按钮

# 前进到下一页
driver.forward()  # 等效浏览器→按钮
```

---

### 三、综合应用示例

```python
# 模拟用户操作流程
driver.get("https://www.baidu.com")
print("当前页面1：" + driver.current_url)

driver.get("https://news.baidu.com")
print("当前页面2：" + driver.current_url)

driver.back()  # 返回百度首页
print("后退后页面：" + driver.current_url)

driver.forward()  # 前进到新闻页
print("前进后页面：" + driver.current_url)

driver.refresh()  # 刷新新闻页
print("刷新后地址：" + driver.current_url)
```

---

### 四、操作验证技巧

#### 1. 历史记录检测
```python
# 检测能否执行后退
can_go_back = driver.execute_script("return window.history.length > 1")
if can_go_back:
    driver.back()
```

#### 2. 页面状态监控
```python
# 结合显式等待确保加载完成
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

WebDriverWait(driver, 10).until(
    EC.url_contains("baidu")  # 等待URL包含特定内容
)
```

---

### 五、高级导航控制

#### 1. 新标签页操作
```python
# 打开新标签页
driver.execute_script("window.open('about:blank')")
driver.switch_to.window(driver.window_handles[-1])  # 切换到新标签页

# 关闭当前标签页
driver.close()
driver.switch_to.window(driver.window_handles[0])  # 切回主标签页
```

#### 2. URL重定向监控
```python
# 监听网络请求（需配合DevTools）
from selenium.webdriver.common.devtools import devtools

driver.execute_cdp_cmd('Network.enable', {})
driver.add_listener("request", lambda req: print("请求URL：" + req['url']))
```

---

### 六、最佳实践建议

1. **导航时机控制**：
   - 在`get()`操作后添加显式等待
   - 使用`EC.presence_of_element_located`确认页面元素加载完成

2. **异常处理**：
   ```python
   try:
       driver.refresh()
   except WebDriverException as e:
       print("刷新失败：" + str(e))
       driver.quit()
   ```

3. **性能优化**：
   ```python
   # 禁用图片加载提升速度
   chrome_options.add_experimental_option(
       "prefs", {"profile.managed_default_content_settings.images": 2}
   )
   ```

---

### 执行效果示意图
```
初始化浏览器 → 访问百度 → 跳转新闻页
          ↓         ↑
          执行后退 → 执行前进 → 刷新页面
```

根据具体需求可以组合这些基础操作构建复杂的浏览器导航流程。如果需要特定场景的实现方案，可以进一步说明需求。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值