[求助]js如何监控地址栏中地址的变化

Inpool 2010-01-27 02:37:33

项目里用到这样的功能：
一旦地址栏中的地址发生变化就调用某个函数。
比如：

<html>

<head>

	<title> test </title>

</head>

<body>

	<a name="test1" /><a name="test2" /><a name="test3" /><a name="test4" />



	<div id="info" style="width:300px;height:50px;border:1px solid #ddd;">the infomation field</div>

	<a class="func" href="#test1">test1</a><br />

	<a class="func" href="#test2">test2</a><br />

	<a class="func" href="#test3">test3</a><br />

	<a class="func" href="#test4">test4</a><br />



<script type="text/javascript">

function getArgs (url)

{

	var _url = "";

	if (url)

	{

		_url = url;

	}

	else

	{

		var _url = window.location.href;

	}

	if (_url.split("#").length <= 1)

	{

		return "";

	}

	else

	{

		return _url.split("#")[1].split(".");

	}

}

function reload (url)

{

	document.getElementById("info").innerHTML = getArgs(url);

}

</script>

</body>

</html>

现在点击链接以后，页面没有刷新，但是地址栏的地址中的内容发生了变化
要求每次变化以后调用reload()函数。
请问大大们怎么实现。用下面的方法可以达到点击链接调用的目的
但是点浏览器后退按钮的时候没用

window.onload=function()

{

	var links = document.getElementsByTagName("a");

	for (var i=0; i<links.length; i++)

	{

		if (/(^|\s)func($|\s)/.test(links[i].className))

		{

			links[i].onclick = function (){reload(this.href)};

		}

	}

}

...全文

2141 28 打赏收藏转发到动态举报

写回复

用AI写文章

28 条回复

切换为时间正序

请发表友善的回复…

发表回复

Inpool 2010-02-05

打赏
举报

[Quote=引用 24 楼 tntooo 的回复:]
我又想到一个解决后退问题的办法,在每个锚连接的函数中写window.open(),在锚点被点击的时候同时多了个动作就是在一个高宽全部为0的iframe中打开一个特定页,这个页面的onload与onbeforeunload写函数,去调用父窗口的函数中reload,也就是说把原来父窗口的函数搬这里来了, 浏览器的后退按钮是肯定要使这个iframe中的页面后退的!这我肯定.
呵呵,这想法纯粹是冲着"后退按钮"来的,有些不登大雅之堂,与楼主共同期待精通锚点的高手出现!
[/Quote]
这个方法貌似可以。不过没试，有空试试

Inpool 2010-01-29

打赏
举报

eduyu 2010-01-28

打赏
举报

估计你是希望能有个监控回调函数，事实上，没有，开始已经说了，没有这样的api。
像easyXDM这样的跨域库都是用setInterval来监控的。

xiuyouxu 2010-01-28

打赏
举报

...

千游 2010-01-28

打赏
举报

学习

tntooo 2010-01-28

打赏
举报

我又想到一个解决后退问题的办法,在每个锚连接的函数中写window.open(),在锚点被点击的时候同时多了个动作就是在一个高宽全部为0的iframe中打开一个特定页,这个页面的onload与onbeforeunload写函数,去调用父窗口的函数中reload,也就是说把原来父窗口的函数搬这里来了, 浏览器的后退按钮是肯定要使这个iframe中的页面后退的!这我肯定.
呵呵,这想法纯粹是冲着"后退按钮"来的,有些不登大雅之堂,与楼主共同期待精通锚点的高手出现!

Inpool 2010-01-27

打赏
举报

Re 21楼：
只需要改变#后面的部分就可以了，只要JS能根据#后面的变化作出相应反应。除了setInterval没有更好的办法了吗？

eduyu 2010-01-27

打赏
举报

怎么可能，地址栏没有API给js，手动敲地址栏，程序无法得知。而程序改动地址栏如果不跳转的话，只能改变地址的“#”后的部分，这也是跨域js经常用的，一旦跳转就是令一页了，你只能通过unload事件来做一些附加处理。

Inpool 2010-01-27

打赏
举报

沉了

Alien 2010-01-27

打赏
举报

可以控制这个么

Inpool 2010-01-27

打赏
举报

[Quote=引用 16 楼 sohighthesky 的回复:]
JScript codedocument.onclick=function(){}
判断下有没有改变不就可以了
[/Quote]
没用哦，点浏览器按钮也不会触发document.click事件。
[Quote=引用 17 楼 donet_expert 的回复:]
你看这样可以吗？
JScript codevar oldLocation= location.href;
setInterval(function() {if(location.href!= oldLocation) {do your action
oldLocation= location.href；
}
},1000);
[/Quote]
我现在暂时用的就是这种办法，看一楼：在不用setInterval的前提下。

donet_expert 2010-01-27

打赏
举报

你看这样可以吗？



var oldLocation = location.href;

 setInterval(function() {

      if(location.href != oldLocation) {

           do your action

           oldLocation = location.href；

      }

  }, 1000);

sohighthesky 2010-01-27

打赏
举报

document.onclick=function(){}

判断下有没有改变不就可以了

Inpool 2010-01-27

打赏
举报

页面没变，只改了锚点，所以不会触发那两个函数。最少我在IE8下试是不行的

itliyi 2010-01-27

打赏
举报



window.onload=window.onbeforeunload=function() { var links = document.getElementsByTagName("a"); for (var i=0; i<links.length; i++) { if (/(^|\s)func($|\s)/.test(links[i].className)) { links[i].onclick = function (){reload(this.href)}; } } }

这样不行？

itliyi 2010-01-27

打赏
举报

ls已经有了

itliyi 2010-01-27

打赏
举报

window.onbeforeunload=function(){...}

这个事件调用那个函数呢？

Inpool 2010-01-27

打赏
举报

[Quote=引用 10 楼 itliyi 的回复:]
不是可以禁止浏览器后退的么？
[/Quote]
禁止后退影响用户体验。

itliyi 2010-01-27

打赏
举报

不是可以禁止浏览器后退的么？

tntooo 2010-01-27

打赏
举报

还是没找到锚点触发的事件,
你不用setInterval是不希望页面一直那么循环,scroll不一定变化~那
我觉得在网页上鼠标肯定在动的吧,没有谁有键盘操作下拉条的吧,
要不写个
document.onmousemove=reload;
鼠标动一下这个就执行几十到上百次(其实现在的浏览器执行上万次也不会卡的);
优点就是鼠标不动或者在其他页面的话这个页面很安静~缺点就是你点了浏览器的"后退",鼠标不拿进document还是没反应~