JavaScript Location 对象属性方法总结

虽然写这个博客主要目的是为了给我自己做一个思路记忆录，但是如果你恰好点了进来，那么先对你说一声欢迎。我并不是什么大触，只是一个菜菜的学生，如果您发现了什么错误或者您对于某些地方有更好的意见，非常欢迎您的斧正！

学习来源：http://www.php.cn/jsref/obj-location.html

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

我把下表中每个函数都进行了一个测试。代码在文末。

Location 对象属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

我的测试结果：这里每一个绿色条都是一个按钮，点击按钮就可以出现相应的函数效果。

JavaScript Location 对象属性方法总结

以下是源代码（有哪里需要我加注释的，欢迎在评论区与我交流）：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Location</title>
  <style media="screen" type="text/css">
    input[type=button] {
      width: 588px;
      height: 30px;
      background-color: rgb(185, 255, 0);
      display: block;
      border: 1px solid black;
      font-weight: bolder;
      font-size: 20px;
    }

    input:hover {
      background-color: rgb(255, 164, 210);
      border: 1px solid black;
    }
  </style>
  <script type="text/javascript">
    function Lassign() {
      window.location.assign("http://www.baidu.com");
    }

    function Relad() {
      window.location.reload();
    }

    function Replace() {
      window.location.replace("http://www.bing.com")
    }

    function Hash() {
      location.hash = "#part2";
      document.getElementById("hash").innerHTML = location.hash;
    }

    function Host() {
      document.getElementById("host").innerHTML = 'host:' + location.host;
    }

    function Hostname() {
      document.getElementById("hostname").innerHTML = 'hostname:' + location.hostname;
    }

    function Href() {
      document.getElementById("href").innerHTML = 'href:' + location.href;
    }

    function Pathname() {
      document.getElementById('pathname').innerHTML = 'pathname:' + location.pathname;
    }

    function Port() {
      document.getElementById('port').innerHTML = 'port:' + location.port;
    }

    function Portocol() {
      document.getElementById('portocol').innerHTML = 'portocol:' + location.portocol;
    }

    function Search() {
      document.getElementById('search').innerHTML = 'search:' + location.search;
    }
  </script>
</head>

<body>
  <input type="button" value="assign()载入一个新的文档"  onclick="Lassign()" />
  <input type="button" value="reload()重新加载当前文档。" onclick="Relad()">
  <input type="button" value="replace()用新的文档替换当前文档" onclick="Replace()"></input>
  <input type="button" value="hash返回一个URL的锚部分（从 # 号开始的部分）" onclick="Hash()"></input>
  <p id="hash"></p>
  <input type="button" value="host返回一个URL的主机名和端口" onclick="Host()"></input>
  <p id="host"></p>
  <input type="button" value="hostname返回URL的主机名" onclick="Hostname()"></input>
  <p id="hostname"></p>
  <input type="button" value="href返回完整的URL" onclick="Href()"></input>
  <p id="href"></p>
  <input type="button" value="pathname返回的URL路径名。" onclick="Pathname()"></input>
  <p id="pathname"></p>
  <input type="button" value="port返回一个URL服务器使用的端口号" onclick="Port()"></input>
  <p id="port"></p>
  <input type="button" value="protocol返回一个URL协议" onclick="Portocol()"></input>
  <p id="portocol"></p>
  <input type="button" value="search返回一个URL的查询部分" onclick="Search()"></input>
  <p id="search"></p>
</body>

</html>

JavaScript Location 对象属性方法总结

Location 对象属性

Location 对象方法

相关推荐