javascript的location对象

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

属性

Location Properties Properties Description JS IE NS OP FF KQ SF

 
hash 锚点,即#及其后面的锚点 1.0 3.0 2.0 7.1 1.0 3.3 1.2
host 主机名称+端口号 1.0 3.0 2.0 5.12 1.0 3.3 1.2
hostname 主机名称 1.0 3.0 2.0 5.12 1.0 3.3 1.2
href url完整地址 1.0 3.0 2.0 7.1 1.0 3.3 1.2
pathname 路径 1.0 3.0 2.0 7.1 1.0 3.3 1.2
port 端口 1.0 3.0 2.0 7.1 1.0 3.3 1.2
protocol 协议 1.0 3.0 2.0 7.1 1.0 3.3 1.2
search 搜索条件,即?及其后的参数字串 1.0 3.0 2.0 7.1 1.0 3.3 1.2

方法


Location Methods
Methods Description JS IE NS OP FF KQ SF

 
replace() 更改当前页面url 1.1 4.0 3.0 5.12 1.0 3.3 1.2
reload() 从缓存中重新加载页面内容 1.1 4.0 3.0 5.12 1.0 3.3 1.2

范例

我们可以看一个范例:

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

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


Location Properties
Properties Value

 
protocol http:
host blog.imkink.com:80
hostname blog.imkink.com
href http://blog.imkink.com:80/jssample/location.html?id=3#sample
pathname /jssample/location.html
port 80
search ?id=3
hash #sample

说明

协议

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


Protocol types
Protocol URL type Example

 
javascript: JavaScript code javascript:history.go(-1)
view-source: Navigator source viewer view-source:wysiwyg://0/file:/c|/temp/genhtml.html
about: Navigator info about:cache
http: World Wide Web http://home.netscape.com/
file:/ File file:///javascript/methods.html
ftp: FTP ftp://ftp.mine.com/home/mine
mailto: MailTo mailto:info@netscape.com
news: Usenet news://news.scruznet.com/comp.lang.javascript
gopher: Gopher gopher.myhost.com

两个方法的说明

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

原文地址:https://www.cnblogs.com/pigtail/p/2528215.html