javascript的location对象

你的名字 2022-08-27 05:49 201阅读 0赞

对于Location这个JS内建的对象，似乎很多人都仅仅是应用href和search这两个属性。其实Location对象内建有多个属性和方法，都可以直接调用的。

## 属性 ##

<table>  Location Properties  
 <tbody> 
  <tr> 
   <th>Properties</th> 
   <th align="left">Description</th> 
   <th title="Javascipt版本" align="center">JS</th> 
   <th title="IE版本" align="center">IE</th> 
   <th title="Netscape版本" align="center">NS</th> 
   <th title="Opera版本" align="center">OP</th> 
   <th title="Firefox版本" align="center">FF</th> 
   <th title="Konqueror版本" align="center">KQ</th> 
   <th title="Safari版本" align="center">SF</th> 
  </tr> 
  <tr> 
   <td>hash</td> 
   <td>锚点，即#及其后面的锚点</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>主机名称+端口号</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">5.12</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>主机名称</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">5.12</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>url完整地址</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>路径</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>端口</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>协议</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>搜索条件，即?及其后的参数字串</td> 
   <td align="center">1.0</td> 
   <td align="center">3.0</td> 
   <td align="center">2.0</td> 
   <td align="center">7.1</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
 </tbody> 
</table>

## 方法 ##

<table>  Location Methods  
 <tbody> 
  <tr> 
   <th>Methods</th> 
   <th align="left">Description</th> 
   <th title="Javascipt版本" align="center">JS</th> 
   <th title="IE版本" align="center">IE</th> 
   <th title="Netscape版本" align="center">NS</th> 
   <th title="Opera版本" align="center">OP</th> 
   <th title="Firefox版本" align="center">FF</th> 
   <th title="Konqueror版本" align="center">KQ</th> 
   <th title="Safari版本" align="center">SF</th> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>更改当前页面url</td> 
   <td align="center">1.1</td> 
   <td align="center">4.0</td> 
   <td align="center">3.0</td> 
   <td align="center">5.12</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
  <tr> 
   <td>reload()</td> 
   <td>从缓存中重新加载页面内容</td> 
   <td align="center">1.1</td> 
   <td align="center">4.0</td> 
   <td align="center">3.0</td> 
   <td align="center">5.12</td> 
   <td align="center">1.0</td> 
   <td align="center">3.3</td> 
   <td align="center">1.2</td> 
  </tr> 
 </tbody> 
</table>

## 范例 ##

我们可以看一个范例:

http://blog.imkink.com:80/jssample/location.html?id=3#sample

这个URL地址中，我们可以列出Locaiton对应的各个属性:

<table>  Location Properties  
 <tbody> 
  <tr> 
   <th>Properties</th> 
   <th align="left">Value</th> 
  </tr> 
  <tr> 
   <td>protocol</td> 
   <td>http:</td> 
  </tr> 
  <tr> 
   <td>host</td> 
   <td>blog.imkink.com:80</td> 
  </tr> 
  <tr> 
   <td>hostname</td> 
   <td>blog.imkink.com</td> 
  </tr> 
  <tr> 
   <td>href</td> 
   <td>http://blog.imkink.com:80/jssample/location.html?id=3#sample</td> 
  </tr> 
  <tr> 
   <td>pathname</td> 
   <td>/jssample/location.html</td> 
  </tr> 
  <tr> 
   <td>port</td> 
   <td>80</td> 
  </tr> 
  <tr> 
   <td>search</td> 
   <td>?id=3</td> 
  </tr> 
  <tr> 
   <td>hash</td> 
   <td>#sample</td> 
  </tr> 
 </tbody> 
</table>

## 说明 ##

### 协议 ###

关于协议，下表列出了主要的一些协议，请注意File协议要多带一个/号。

<table>  Protocol types  
 <tbody> 
  <tr> 
   <th><strong><strong></strong></strong>Protocol</th> 
   <th><strong><strong></strong></strong>URL type</th> 
   <th><strong><strong></strong></strong>Example</th> 
  </tr> 
  <tr> 
   <td>javascript:</td> 
   <td>JavaScript code</td> 
   <td>javascript:history.go(-1)</td> 
  </tr> 
  <tr> 
   <td>view-source:</td> 
   <td>Navigator source viewer</td> 
   <td>view-source:wysiwyg://0/file:/c|/temp/genhtml.html</td> 
  </tr> 
  <tr> 
   <td>about:</td> 
   <td>Navigator info</td> 
   <td>about:cache</td> 
  </tr> 
  <tr> 
   <td>http:</td> 
   <td>World Wide Web</td> 
   <td>http://home.netscape.com/</td> 
  </tr> 
  <tr> 
   <td>file:/</td> 
   <td>File</td> 
   <td>file:///javascript/methods.html</td> 
  </tr> 
  <tr> 
   <td>ftp:</td> 
   <td>FTP</td> 
   <td>ftp://ftp.mine.com/home/mine</td> 
  </tr> 
  <tr> 
   <td>mailto:</td> 
   <td>MailTo</td> 
   <td>mailto:info@netscape.com</td> 
  </tr> 
  <tr> 
   <td>news:</td> 
   <td>Usenet</td> 
   <td>news://news.scruznet.com/comp.lang.javascript</td> 
  </tr> 
  <tr> 
   <td>gopher:</td> 
   <td>Gopher</td> 
   <td>gopher.myhost.com</td> 
  </tr> 
 </tbody> 
</table>

### 两个方法的说明 ###

replace()方法在效果上与直接将新URL地址赋值给location.href属性基本一致，但是使用replace()方法后，我们无法通过浏览器的“返回”按钮来回到上一页。

reload()方法和浏览器的“刷新”功能也有所区别，reload()方法仅仅是重新加载本地的缓存，而不会向服务器重新发出请求，这点还没有严格的测试过，不过应该在包含有表单的页面中特别注意。

附：

javascript 的history对象 history.back() 等同于按浏览器的后退按钮 history.forward() 等同于按浏览器的前进按钮 history.current 指当前的url(等同于location.href), 在历史中的索引位置总为 0 history.go(-2)或 history.go("任意.html") 向前或向后移动， 或查找字符串标明的最新url