利用javascript 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" />
利用javascript Location访问Url,重定向,刷新页面的更多相关文章
- HTML5 修改浏览器url而不刷新页面
嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...
- Dynamics CRM2013 Form利用window.location.reload()进行全局刷新带来的问题及解决办法
CRM2013以后,表单的保存后变成了局部刷新而非全局刷新,但很多情况下我们需要刷新整个页面,通过刷新页面来使脚本执行或者业务规则执行来实现某些业务效果,一般我们会使用window.location. ...
- Dynamics CRM2013 Form利用window.location.reload()进行全局刷新带来的问题及解决的方法
CRM2013以后.表单的保存后变成了局部刷新而非全局刷新,但非常多情况下我们须要刷新整个页面.通过刷新页面来使脚本运行或者业务规则运行来实现某些业务效果,一般我们会使用window.location ...
- JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合
代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的): <style> .sidebar-menu .special{ font-size: 16px; marg ...
- 替换url不刷新页面
今天碰到一个有趣的问题, 从其他站点登录后,放回了一个token, 但是我切换了路由之后token还在, 路由直接跟在了token参数后面, 后面先利用location.href替换掉原来的连接, 但 ...
- 依据系统语言、设备、url 重定向对应页面
1. 思路 获取浏览器语言.页面名称.区分手机端与电脑 根据特定方式命名 html 文件,然后独立文件,重定向 eg: - root - gap.html gap - index.ht ...
- 利用JavaScript 的formdata 进行无刷新上传文件
<html> <head> <title></title> <script type=&quo ...
- js刷新页面和跳转
javascript返回上一页: 1.返回上一页 history.go(-1); 返回上两个页面 history.go(-2); <a href="javascript:history ...
- javascript:window.location.replace 与 window.location.reload() 刷新页面的不同效果
今天早上我发现一个问题,当一个网页的地址最后面是一个#时(比如:http://www.baidu.com/go.asp#), 执行:window.location.replace(window.loc ...
随机推荐
- 【21】必须返回对象时,别妄想返回器reference
1.考虑有理数Rational,有个友元操作符*,返回Rational对象.返回对象,导致临时对象的构造,析构.效率低,因此会想返回方法内局部对象的引用,这种方法不可行.为什么? 2.调用方法是在st ...
- 并发与同步 (一) ThreadLocal与Synchronized 用哪一个好
ThreadLocal是什么? 历史 早在JDK 1.2的版本中就提供java.lang.ThreadLocal,ThreadLocal为解决多线程程序的并发问题提供了一种新的思路.使用这个工具类可以 ...
- [Javascript + lodash] sortBy and sortedIndex
sortBy: var collection = ['John', 'Petteri', 'Antti', 'Joonas', 'Zhentian']; var sorted = _.sortBy(c ...
- iOS快速集成检查更新
一直以为Appstore有了检查版本是否更新的机制,我们在APP上做这个更新功能会被拒,但是也有看到一些APP也是做了这个更新功能的.因为在网上没有找到完全正确的方法能获取到iTunes里的数据的,于 ...
- javascript 递归之 快速排序
1. 快速排序思想 (1)在数据集之中,选择一个元素作为"基准"(pivot). (2)所有小于"基准"的元素,都移到"基准"的左边:所有大 ...
- ajax 用xml传递数据
页面代码 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Index.aspx. ...
- ADO.Net的小知识(连接数据库)二
上次提到数据库连接有两种形式断开式连接和打开式连接,断开式连接我已经讲解了,下面我来给大家讲解一下打开式连接 (1)引入命名空间:using System.Data.SqlClient; 该语句用于导 ...
- Linux SPI框架(下)
分类: Linux驱动程序2012-07-11 20:44 3006人阅读 评论(2) 收藏 举报 linuxstructlistclassdelayprocessing 水平有限,描述不当之处还请之 ...
- 数据结构及算法分析(0)——引论
引论提到算法递归的概念,递归在很多算法中都会出现.所谓递归,当一个函数用它自己来定义的时候就称为递归. 递归调用有两大要素: 基准情况. 递归调用. 并非所有的数学递归函数 ...
- 用Java原子变量的CAS方法实现一个自旋锁
为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/ShiJiaqi. http://www.cnblogs.com/shijiaqi1066/p/5999610. ...