澳门新葡萄京官网注册 1

澳门新葡萄京官网注册BOM

location 对象的属性

BOM(浏览器对象模型),BOM提供了很多对象,用于访问浏览器的功能.

跟浏览器打交道,不可避免会用到location对象。就比如我上次通过一个url地址,抓取它的html内容,然后展示到我们的网站上,中间有很多的跳转链接,都是原网站上的相对地址,那么我就要进行一个个截取,刚开始我用的字符串位数截取,但是发现可能不太精确,后来就用到了location上的属性,用它就行拼接,这样就避免了截取字符不精确的问题。

假设我们的 URL 是:

location

location提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.
location既是window对象的属性,也是document对象属性.
location对象所用属性:

  • hash 返回URL中的hash
  • host 返回服务器名称和端口号
  • hostname 返回不带端口号的服务器名称
  • pathname 返回URL中的目录和(或)文件名
  • port 返回URL中指定的端口号。如果URL中不包含端口号,
    则这个属性返回空字符串
  • 澳门新葡萄京官网注册,protocol 返回页面使用的协议。通常是http:或https:
  • search 返回URL的查询字符串。这个字符串以问号开头
    //获取当前文档的路径
    //alert(location);
    //应用程序的端口
    //alert(location.port);
    //主机名
    //location.hostname
    //设置路径名
    // location.pathName = “index”;
    // alert(location.pathName);
    //设置网络协议
    // location.protocal = ‘ftp’;
    // alert(location.protocal);
    //搜索
    // alert(location.search);
    跳转链接
    location.href =
    ‘http://www.baidu.com’;;
    location.assign =
    ‘http://www.baidu.com’;;
    location.replace =
    ‘http://www.baidu.com’;;
    刷新网页
    location.reload(); //首先从本地缓存刷新,如果没有缓存,从网络加载
    location.reload(true); //直接从网络加载

http://( 协议 ) www( 子域名 )
baidu.com( 主域名 ) :
80( 端口 ) sources/index.html( 请求的资源 )

location
它包含了当前URL的信息,你可以随意打开一个网页,按F12,在console控制台打印location,就能看到location下的所有属性和方法。

history

history用于保存用户上网的信息.
alert(history.length); // 历史记录的长度,从1开始
history.back(); // 前一个历史记录,沿着历史纪录向前查找
history.forward(); // 后一个历史记录,沿着历史纪录向后查找
history.go(num); // 指定跳转到哪个页面

澳门新葡萄京官网注册 1

那么 location 对象的属性结果是:

navigator

navigator对象的属性通常用于检测显示网页的浏览器类型.(有很多属性)

  • appCodeName 浏览器的名称。
  • language 浏览器语言
  • userAgent 浏览器的用户代理字符串

console location

location.hostname = www.itpow.com
location.href =
location.host = www.itpow.com:81
location.hash = #result
location.port = 81
location.pathname = /location.htm
location.search = ?key=asp
location.protocol = http:

我们可以通过 window.location 来访问它,和setTimeOut()
一样,它也是window对象
下的一部分,一般我们用的时候,会把window省略掉

需要说明

1.下面就熟悉以下location对象有哪些属性?

1.host:域名+端口号
2.hostname:域名
3.port:端口号
4.protocol:协议
5.href:完整路径
6.origin:协议+域名+端口
7.hash:井号 (#) 开始的 URL(hash)
8.pathname:文档路径+文档名
9.search:(?)后面的内容

  • href: 设置或返回当前完整的url地址

  • protocol:设置或返回当前url的 协议

  • hostname:设置或返回当前URL的主机名

  • host:设置或返回主机名与当前URL的 端口号

  • port: 设置或返回当前url的端口号

  • pathname: 设置或返回当前url的 路径部分

  • search: 设置或返回从?号 开始的url查询部分

  • hash: 设置或返回从 #号开始的URL

这个记住

  • origin : 返回url中pathname之前的部分,它只能get值,不能set值
  • 如果 port 不为空,则 host = hostname + “:” + port;如果 port
    为空,则 host = hostname。一般来说我们都使用默认端口 80,所以 port
    一般为空。
  • hash 是包含 # 的。
  • pathname 是包含 / 的。
  • search 是包含 ? 的。
  • protocol 是包含 : 的。
  • 以上属性均是可读可写的。
  • 如果直接对 location 取值赋值,就相当于对 location.href 取值赋值。
  • 在 Ajax 中,可利用 hash 实现前进后退功能。
1.2 以上属性的使用?

location对象下的属性都是一个可读可写的字符串!!!

orgin外,其他属性都有get/set的方法,orgin只能get,不能set

get返回值,set设置值

  • 返回location的某个属性值:

location.属性名;

  • 设置location的某个属性:

location.属性名 = “这里设置属性值(字符串)”

href = protocol + “//” + host + pathname + search + hash(在本地双击 htm
文件用浏览器打开时可能不适用本公式)

2. location下的方法:
  • assifn(): 加载新文档;
  • reload(): 重新加载当前的文档;
  • replace(): 用新地址的文档替换当前文档;

location 对象的方法

2.2 使用示例:

语法:

location.assign(URL);
location.reload(URL);
location.replace(URL);

function toNewUrl(){
              window.location.assign("www.baidu.com");// or
              window.location.reload("www.baidu.com"); //or
              window.location.replace("www.baidu.com");
}
  • assign(sURL) 读取新的 URL。
  • reload([bReloadSource]) bReloadSource 默认为
    false,表示从缓存中重新读取;如果为 true,表示从服务端重新读取。
  • replace(sURL) 读取新的 URL。
2.3 小区别:

Location 对象的 reload() 方法可以重新装载当前文档,replace()
可以装载一个新文档而无须为它创建一个新的历史记录,也就是说,在浏览器的历史列表中,新文档将替换当前文档。

1.assign:改变url的值,并且将当前的url添加到历史记录中history.length会增加1。location.assig(‘#’

  • x)会改变url但是不刷新页面。
    2.reload:刷新页面。
    3.replace:改变url的值,但是history.length不变。使用方法同assign。

需要说明

  • assign 与 replace 是有区别的。假设有 assign.htm 用 assign 跳转到
    history.htm,那么在 history.htm 的 JavaScript 对象
    history
    中就会记录两条历史记录;假设有 replace.htm 用 replace 跳转到
    history.htm,那么在 history.htm 的 JavaScript 对象 history
    中就只有一条历史记录(该记录为 history.htm,而不是 replace.htm)。
  • 用 assign 跳转和 href 跳转则没有什么区别。

相关阅读

  • window.location、document.location、document.URL
    等区别

发表评论

电子邮件地址不会被公开。 必填项已用*标注