`
zhangcxy
  • 浏览: 42627 次
  • 性别: 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、重定向请求的功能。 ...

    html如何在刷新网页面时重定向跳转到另一个网页或网站域名.纯前端代码,无需后台JAVA,PHP配合

    在HTML中实现页面刷新时重定向到另一个网页或网站域名,主要是通过两种方式来完成:Meta刷新和JavaScript。这两种方法都是纯前端技术,无需后台语言如JAVA或PHP的配合。 一、Meta刷新重定向 Meta刷新是HTML元元素...

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

    在 JavaScript 中,我们经常使用 location.reload() 和 location.replace() 两个方法来刷新页面或重定向到新的 URL。但是,这两个方法之间有着明显的区别。 一、location.reload() 方法 location.reload() 方法...

    JS当前页面和框架自动刷新的方法

    在探讨“JS当前页面和框架自动刷新的方法”这一主题时,我们主要关注的是如何利用JavaScript来实现网页及其框架内的页面自动或手动刷新的功能。本文将深入解析提供的代码示例,并详细阐述各种刷新方法的工作原理及...

    JS页面跳转和js对iframe进行页面跳转、刷新

    在IT领域,特别是前端开发中,JavaScript(简称JS)被广泛用于实现网页的动态功能,包括页面跳转和对iframe内的页面进行跳转与刷新。本文将深入解析JS页面跳转的各种方法,以及如何利用JS操作iframe进行页面跳转和...

    自动刷新网页代码.rar

    这段代码会在页面加载完成后设置一个定时器,每5000毫秒(即5秒)执行一次`location.reload()`,从而刷新页面。 在"index.htm"中,可能会采用以上一种或两种方法,结合HTML结构和JavaScript逻辑,来展示自动刷新...

    js页面跳转和自动刷新

    ### JS页面跳转和自动刷新知识点详解 #### 一、页面跳转方法及其实现原理 页面跳转在Web开发中是一项非常基础且重要的功能,它涉及到用户在不同页面之间的导航与交互。JavaScript提供了多种方式来实现页面跳转,每...

    ASP.net中页面刷新

    这种方法利用JavaScript的计时器功能实现定时刷新页面,代码中定义了一个函数`beginrefresh()`,在页面加载完成后启动。它会递减一个计数器,并在达到零时刷新页面: ```html &lt;!-- var limit="3:00"; if ...

    解决webview 第二次调用loadUrl页面不刷新的问题

    webview.loadUrl( "javascript:window.location.reload( true )" ); } ``` 这个方法可以成功解决第二次调用 loadUrl 后,页面不刷新的问题。 补充知识:WebView.loadUrl 使用误区 当使用 loadUrl 加载网页时,有...

    javascript跳转与返回和刷新页面的实例代码.docx

    ### JavaScript跳转与返回及刷新页面的技术解析 #### 一、引言 在Web开发中,页面间的跳转、返回以及刷新是非常常见的操作。通过JavaScript,开发者可以灵活地控制这些行为,提供更好的用户体验。本文将深入探讨...

    刷新代码,刷新代码刷新代码

    `&lt;meta&gt;` 标签用于自动刷新页面 - **语法**: `时间间隔;url=跳转地址"&gt;` - `http-equiv` 属性设置为 `refresh` 表示该元信息用于控制页面刷新。 - `content` 属性用于定义刷新的时间间隔以及可选的跳转地址。 - ...

    js刷新大全.docx

    - 在弹出对话框后刷新页面,可以使用`showModalDialog`打开对话框,然后在返回后使用`document.location=document.location`刷新页面。 9. **框架页中的刷新**: - 刷新框架页的某一部分,例如左侧,可以使用`...

    .net页面刷新方法

    如果需要在特定时间后自动刷新页面,可以使用JavaScript的setTimeout()函数配合window.location.reload()。例如: ```html //... function beginrefresh() { //... setTimeout("beginrefresh()", 1000); } ...

    刷新aspx页面的六种方法 .doc

    在第二种方法中,我们使用JavaScript来刷新页面。我们使用Response.Write()方法来输出JavaScript代码,用于刷新当前页面。 ```csharp private void Button2_Click(object sender, System.EventArgs e) { ...

    ASP.NET刷新页面的六种方法

    另一种方法是利用JavaScript的`window.location.href`属性,将当前页面URL赋值给它,达到刷新页面的效果。这种方法可以更灵活地嵌入到HTML中,但需要注意的是,如果用户的浏览器禁用了JavaScript,此方法将无法生效...

    JS 当前页面打开URL页面

    【标题】"JS 当前页面打开URL页面"指的是在JavaScript编程环境下,如何通过代码实现从当前正在浏览的页面跳转到指定的URL页面。在Web开发中,这是一项基础但非常实用的功能,允许开发者控制用户的浏览体验,例如...

    自动刷新网页

    网页自动刷新技术是一种提高网站流量的方法,它允许网页在设定的时间间隔后自动重新加载或跳转到新的页面,而无需用户手动操作。这种技术在某些特定场景下非常有用,例如实时更新信息的网站或者需要持续关注变化的...

    自动刷新页面+自动跳转和关闭

    **自动刷新页面**是指网页在设定的时间间隔后自动重新加载自身的过程。这一功能可以通过多种技术实现,包括HTML元标签(`&lt;meta&gt;`标签)、JavaScript等。 ##### HTML元标签 HTML中的`&lt;meta&gt;`标签可以通过设置`...

    自动刷新个人网络页面

    然而,如果需要更灵活的控制,例如仅刷新页面内容而不是整个页面,JavaScript可以提供更多的可能性。在`main.html`中,我们可以用JavaScript的`setTimeout`函数来实现定时刷新: ```html window.onload = function...

Global site tag (gtag.js) - Google Analytics