`
zhangcxy
  • 浏览: 41311 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js location访问Url,重定向,刷新页面

阅读更多

js location访问Url,重定向,刷新页面

本文介绍怎么使用javascript Location对象读和修改Url.怎么重载或刷新页面。
javascript提供了许多方法访问,修改当前用户在浏览器中访问的url.所有的这些技术都是基于location对象的。它是作为window对象的属性。你可以生成一个包含当前url的新location对象:

var currentURL = window.location;  

在这片文章你将看到location对象的所有属性和方法,你将学到:
    * 怎么读取url不同部分
    * 怎么重定向网页
    * 怎么自动刷新或重载页面.

1.分析url

URL有6部分组成,一些是可选的:

<协议>//<域名>:<端口>/<路径><查询参数><hash>  <protocol>//<hostname>:<port>/<pathname><search><hash>  

协议和域名是必须项,其它是可选项。

下面是一个包含所有部分的URL例子:

http://www.example.com:80/example.cgi?x=3&y=4#results  

在这个例子中, http: 是 协议, www.example.com 是 域名, 80 是端口, /example.cgi 是路径, ?x=3&y=4是查询字符串, #results是hash, 或页面内部的锚点.

2.通过Location读取当前的URL

你可以使用location对象的protocol,hostname,port,pathname,search,hash属性访问URL各个部分。你还可以使用下面属性:
host
    包含域名和端口例如: www.example.com:80
href
    包含整个URL例如:http://www.example.com:80/example.cgi?x=3&y=4#results

示例:

var currentURL = window.location;  alert ( currentURL.href );     // Displays ''http://www.example.com:80/example.cgi?x=3&y=4#results''  alert ( currentURL.protocol ); // Displays ''http:''  alert ( currentURL.host );     // Displays ''www.example.com:80''  alert ( currentURL.hostname ); // Displays ''www.example.com''  alert ( currentURL.port );     // Displays ''80''  alert ( currentURL.pathname ); // Displays ''/example.cgi''  alert ( currentURL.search );   // Displays ''?x=3&y=4''  alert ( currentURL.hash );     // Displays ''#results''  3使用Location操作URL

你可以使用location的href属性,把页面跳转到不同于当前页面的页面。

window.location.href = "http://www.example.com/anotherpage.html";  

示例:

<input type="button" onclick="window.location.href=''http://www.google.com/''" value="Visit www.google.com" />  

使用Location的href属性跳转页面,前一页的Url会保存在浏览器的history历史中。当用户点击浏览器的“后退”按钮可以返回前一页。如果你不想让返回前一页可使用Location.replace()代替:

window.location.replace ( "http://www.example.com/anotherpage.html" );  

除了可以将页面重定向不用的页面,还可重定向当前页面不同的锚点

window.location.hash = "#moreResults";  

例如:

<input type="button" onclick="window.location.hash=''#top''" value="Jump to the top of the page" />  

在页面有个名为#top的锚点。点击按钮时浏览器会移动到顶部。注意观察浏览器地址栏的变化,当你点击浏览器后退按钮可回到前一位置。

4.重载刷新页面

可以调用Location.reload()强制浏览器重新刷新当前URL.就像当前用户点击浏览器的刷新按钮或F5一样。

window.location.reload ( );  

如果该方法没有规定参数,或者参数是 false,它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变,reload() 会再次下载该文档。如果文档未改变,则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。

如果把该方法的参数设置为 true,那么无论文档的最后修改日期是什么,它都会绕过缓存,从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。

window.location.reload ( true );  

简单示例:

<input type="button" onclick="window.location.reload()" value="Reload the page" />  
<转发>
另附:
jQuery(function($){
				//加载当前用户信息
				$("#repaymentDiv dd").click(function(){
					。。。。
				});
				
			});


	<div class="search_option" id="repaymentDiv">
	       	<dl>
	         	<dt>方式:</dt>
	             <dd class="bg86">不限</dd>
	             <dd class="">1</dd>
	             <dd class="">2</dd>
	             <dd class="">3</dd>
	         </dl>
	     </div>
 实现不用<a></a>的点击操作。
 注意加样式:cursor:pointer
 <a href="javascript:openInterDiv();">计算器</a>这样是实现href调用js函数。
分享到:
评论

相关推荐

    JS基于Location实现访问Url、重定向及刷新页面的方法分析

    本文实例讲述了JS基于Location实现访问Url、重定向及刷新页面的方法。分享给大家供大家参考,具体如下: js通过Location实现访问Url,重定向,刷新页 web中经常会使用到刷新页面,访问url、重定向请求的功能。 ...

    详解nginx配置url重定向-反向代理

    本文系统:Centos6.5_x64 ... 一、nginx 地址重定向 二、nginx 反向代理 1、地址重定向:是指当使用者浏览某个网址时,将他导向到另一...又有可能因为换了网路的免费网页空间,网址又必须要变更,不知情的使用者还以为

    在nuxt中使用路由重定向的实例

    我们都知道,在写SPA的时候,我们可以通过配置vue-router来实现...这样,我们在访问/foo的时候,就会被重定向到/foo/bar。这些都是老生常谈了。 然而,到了SSR的环境下,如果使用nuxt,因为nuxt采用了约定大于配置的

    js刷新当前页面的几种方法(相当牛X)

    用js刷新当前页面的几种方法,包括reload方法、replace方法、自动刷新方法 如何实现刷新当前页面呢?借助js你将无所不能。 1,reload 方法,该方法强迫浏览器刷新当前页面。 语法:location.reload([bForceGet]) ...

    js获取url,javascript获取url参数等

    设置或获取对象指定的文件名或路径。 设置或获取整个 URL 为字符串。 设置或获取与 URL 关联的端口号码。...设置或获取 location 或 URL 的 hostname 和 port 号码。 设置或获取 href 属性中跟在问号后面的部分。

    js刷新当前页面

    因为这种做法就像是客户端点F5刷新页面,所以页面的method="post"的时候,会出现"网页过期"的提示。那是因为Session的安全保护机制。可以想到: 当调用 location.reload() 方法的时候, aspx页面此时在服务端内存里...

    nginx地址重定向的方法

    1、假设要把webroot/static/index.html访问重定向到static/index.html 例如当我们通过浏览器访问http://192.168.11.210/webroot/static/index.html,实际访问的是web目录下面的static/index.html文件,也及去掉了web...

    javascript 强制刷新页面的实现代码

    Javascript刷新页面的几种方法: 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand(‘Refresh’) 6 window.navigate(location) 7 location.replace...

    JS刷新父页面 父窗口

    // 刷新父页面。此段代码放在被弹出的页面 function refreshOpener() { var win = top.window; try { if (win.opener) win.opener.location.reload();//或parent.location.reload(); } catch (ex) { } } .......

    JavaScript刷新页面的几种方法总结

    方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。 语法: location.replace(URL) 通常使用: location.reload() 或者是 ...

    jsp 刷新父页面

    用iframe、弹出子页面刷新父页面 iframe parent.location.reload(); 弹出子页面 window.opener.location.reload(); 子窗口刷新父窗口 self.window.opener.locaction.reload(); 刷新一open()方法打开的窗口 ...

    js 页面刷新location.reload和location.replace的区别小结.docx

    js 页面刷新location.reload和location.replace的区别小结.docx

    js刷新页面location.reload()用法详解

    本文介绍了js刷新页面函数location.reload()的用法,有关js location.reload()函数的例子,有需要的朋友参考下。 在javascript编程中,多使用location.reload实现页面刷新。 例子: [removed].href=[removed].href...

    js 页面刷新location.reload和location.replace的区别小结

    GET 方式,从服务端取最新的页面, 相当于客户端点击 F5(“刷新”) replace 方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被...

    javascript 页面只自动刷新一次

    1.看看下面这段代码 代码如下: [removed] function reurl(){ url = location.href;... //刷新页面 } } onload=reurl [removed] 2.原理 充分利用地址栏可带参数的选项,用脚本来取得页面间的传递参数

    使用JavaScript刷新网页的方法

    可以使用JavaScript location.reload方法刷新网页。当用户点击一个链接此代码可以自动在一个事件调用。 如果想使用鼠标点击刷新网页,可以用下面的代码: &lt;a&gt;Refresh Page 要了解它更好的办法,可以刷新页面 自动...

    Express URL跳转(重定向)的实现方法

    Express是一个基于Node.js实现的Web框架,其响应HTTP请求的response对象中有两个用于URL跳转方法res.location()和res.redirect(),使用它们可以实现URL的301或302重定向。 res.location(path) res.location(path) ...

    详解js location.href和window.open的几种用法和区别.docx

    详解js location.href和window.open的几种用法和区别.docx

Global site tag (gtag.js) - Google Analytics