Ext.History浏览器自定义前进后退功能

最新推荐文章于 2024-06-24 10:54:10 发布

mengqingyu21

最新推荐文章于 2024-06-24 10:54:10 发布

阅读量408

点赞数

分类专栏： JavaScript 文章标签： ext

本文链接：https://blog.csdn.net/mengqingyu21/article/details/84466782

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!--
	在当前页面中，如果做出了一些页面功能操作，想在页面跳转之后，在点后退，可后退到当前页面某个指定功能状态的情况下，
	可以在做出相对操作时执行addHistory(module)方法来给地址栏添加参数状态记录当前状态，这样可在后退时退到当前状态下
-->
<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>Ext3浏览器后退功能</title>
<script type="text/javascript">
	Ext.onReady(function() {
		//初始化history组件   
		Ext.History.init();
		//判断如果当前路蓝旗地址#后有test参数,执行传入的方法
		initHistoryUrl("test", function() {
			//js函数，内部自定义实现
		});

		//特殊情况可覆盖浏览器前进后退按钮，当浏览器被添加标记时，点击后退按钮仅执行此方法   
		/*
		Ext.History.on('change', function(token){
			if(token){
				//相应操作
			}
		});
		Ext.History.back(); ext的后退前进方法
		Ext.History.forward();
		*/
	});

	/**
	 * 页面初始化时，截取地址栏#后的标记来判断是否需要执行相应的方法
	 */
	function initHistoryUrl(module, fn) {
		var url = window.location.href;
		var has = url.indexOf('#');
		if (has != -1) {
			var history = url.substring(has + 1);
			if (history == module) fn();
		}
	}

	/**
	 * 在浏览器地址上添加标记
	 */
	function addHistory(module) {
		Ext.History.add(module);
	}
</script>
</head>
<body>
<!-- Ext.History所需的form  begin-->
<form id="history-form" class="x-hidden"><input type="hidden" id="x-history-field" /> <iframe id="x-history-frame"> </iframe></form>
<!-- Ext.History所需的form  end -->
</body>
</html>