网上转来了, 方便以后查询参考

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

  1. var currentURL = window.location;

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

1.分析url

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

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

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

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

  1. 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

示例:

  1. var currentURL = window.location;
  2. alert ( currentURL.href );     // Displays 'http://www.example.com:80/example.cgi?x=3&y=4#results'
  3. alert ( currentURL.protocol ); // Displays 'http:'
  4. alert ( currentURL.host );     // Displays 'www.example.com:80'
  5. alert ( currentURL.hostname ); // Displays 'www.example.com'
  6. alert ( currentURL.port );     // Displays '80'
  7. alert ( currentURL.pathname ); // Displays '/example.cgi'
  8. alert ( currentURL.search );   // Displays '?x=3&y=4'
  9. alert ( currentURL.hash );     // Displays '#results'

3使用Location操作URL

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

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

示例:

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

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

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

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

  1. window.location.hash = "#moreResults";

例如:

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

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

4.重载刷新页面

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

  1. window.location.reload ( );

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

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

  1. window.location.reload ( true );

简单示例:

  1. <input type="button" onclick="window.location.reload()" value="Reload the page" />

利用javascript Location访问Url,重定向,刷新页面的更多相关文章

  1. HTML5 修改浏览器url而不刷新页面

    嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...

  2. Dynamics CRM2013 Form利用window.location.reload()进行全局刷新带来的问题及解决办法

    CRM2013以后,表单的保存后变成了局部刷新而非全局刷新,但很多情况下我们需要刷新整个页面,通过刷新页面来使脚本执行或者业务规则执行来实现某些业务效果,一般我们会使用window.location. ...

  3. Dynamics CRM2013 Form利用window.location.reload()进行全局刷新带来的问题及解决的方法

    CRM2013以后.表单的保存后变成了局部刷新而非全局刷新,但非常多情况下我们须要刷新整个页面.通过刷新页面来使脚本运行或者业务规则运行来实现某些业务效果,一般我们会使用window.location ...

  4. JS利用cookie记录当前位置实现刷新页面后还可以保持菜单栏的展开或闭合

    代码如下,重点是JS部分的代码(部分样式引用的是Bootstrapt中的):   <style> .sidebar-menu .special{ font-size: 16px; marg ...

  5. 替换url不刷新页面

    今天碰到一个有趣的问题, 从其他站点登录后,放回了一个token, 但是我切换了路由之后token还在, 路由直接跟在了token参数后面, 后面先利用location.href替换掉原来的连接, 但 ...

  6. 依据系统语言、设备、url 重定向对应页面

    1. 思路 获取浏览器语言.页面名称.区分手机端与电脑 根据特定方式命名 html 文件,然后独立文件,重定向 eg: - root -  gap.html     gap -    index.ht ...

  7. 利用JavaScript 的formdata 进行无刷新上传文件

          <html>     <head>         <title></title>         <script type=&quo ...

  8. js刷新页面和跳转

    javascript返回上一页: 1.返回上一页 history.go(-1); 返回上两个页面 history.go(-2); <a href="javascript:history ...

  9. javascript:window.location.replace 与 window.location.reload() 刷新页面的不同效果

    今天早上我发现一个问题,当一个网页的地址最后面是一个#时(比如:http://www.baidu.com/go.asp#), 执行:window.location.replace(window.loc ...

随机推荐

  1. IPv6介绍

    一.为什么需要IPv6 为了扩大地址空间,拟通过IPv6重新定义地址空间.IPv4采用32位地址长度,只有大约43亿个地址,估计在2005-2010年间将被分配完毕,而IPv6采用128位地址长度,几 ...

  2. 提高你的Java代码质量吧:如果有必要,使用变长数组吧

    一.分析  Java中的数组是定长的,一旦经过初始化声明就不可改变长度,这在实际使用中非常不方便. 二.场景  比如要对班级学生的信息进行统计,因为我们不知道一个班级会有多少学生(随时都有可能会有学生 ...

  3. OC语言--NSFileManager&amp; NSFileHandle

    1.关于文件的介绍 ->什么是文件: 文件概念, 广义文件. 狭义文件(磁盘文件). 文件常见的使用操作(可用命令行演示文件操作的使用场景). ->什么是路径: 简单来说就是,在系统中,要 ...

  4. Android背景渐变色效果

    Android设置背景色可以通过在res/drawable里定义一个xml,如下: [代码]xml代码: 1 <?xml version="1.0" encoding=&qu ...

  5. iOS开发——网络编程OC篇&Socket编程

    Socket编程 一.网络各个协议:TCP/IP.SOCKET.HTTP等 网络七层由下往上分别为物理层.数据链路层.网络层.传输层.会话层.表示层和应用层. 其中物理层.数据链路层和网络层通常被称作 ...

  6. [008]new、delete及动态内存分配

    1.new和delete都会用,这里只声明一点: C++ 没有明确定义如何释放指向不是用 new 分配的内存地址的指针. 比如下面的代码: #include<iostream> using ...

  7. mysql服务器辅助选项

    查看控制台命令行前缀 : echo $PS1 ,例如输出 '[\u@\h \w]#     其中,\u是用户名,\h是主机名称: hostname -s 可以查看当前主机名,  hostname 'z ...

  8. java.lang.NoSuchFieldError: RAW_XML_FILE_HEADER,调用XWPFTemplate动态合并生成一个新的docx文档时报错

    在使用 org.apache.poi 对office文件  根据表单内容和已上次的附件 动态合并成一个新的文档时,本地调试完全ok 但是发布倒Linux环境上就老是报这个错误java.lang.NoS ...

  9. android开发之路03

    一.Activity1.如何在一个应用程序中定义多个Activity:①定义一个类,继承Activity:②在该类当中,复写Activity当中的onCreate方法:③在AndroidManifes ...

  10. About Webkit

    http://blog.csdn.net/spacetiller/article/details/5784461 一 . WebKit 简介 Webkit 是一个开放源代码的浏览器引擎 (web br ...