JavaScript中的Location地址对象

2023年6月10日下午4:34 • JavaScript

JavaScript中的Location对象表示当前窗口中文档的URL信息，即当前页面的网址。使用Location对象可以获取当前页面的相关信息，如跳转页面、获取URL参数，以及修改当前页面的URL等任务。

获取Location对象

JavaScript中可以通过window.location或者location来获取当前页面Url的Location对象。

例如，可以使用以下代码获取当前页面的URL：

var currentLocation = window.location;
console.log(currentLocation.href); // 输出当前页面URL

Location对象属性

下面列举了Location对象最有用的属性：

hash - 返回 URL 中的锚点字符串，即 # 后面的内容。
host - 返回 URL 中的主机名和端口号。
hostname - 返回 URL 中的主机名。
href - 返回完整的 URL。
pathname - 返回 URL 的路径名。
port - 返回 URL 中的端口号。
protocol - 返回 URL 的协议。

例如，可以使用以下代码来获取当前页面的协议：

var currentLocation = window.location;
console.log(currentLocation.protocol); // 输出 "http:" 或 "https:"

修改Location对象

可以使用Location对象的assign()方法、replace()方法或者直接修改location对象来改变当前页面的URL。

1. `assign()`方法

assign()方法会在窗口的浏览器历史中生成一条新的记录，这样用户可以点击后退按钮回到之前的页面。例如：

var currentLocation = window.location;
currentLocation.assign('http://www.baidu.com');

2. `replace()`方法

replace()方法不会在浏览器历史中生成新的记录，而是直接替换原来的页面记录。例如：

var currentLocation = window.location;
currentLocation.replace('http://www.sogo.com');

3. 直接修改

也可以直接修改location对象的属性来改变当前页面的URL。例如：

var currentLocation = window.location;
currentLocation.href = 'http://www.taobao.com';

示例

下面是一个简单的示例，该示例从URL中获取参数并显示在页面上：

<!DOCTYPE html>
<html>
<head>
    <title>Location对象示例</title>
</head>
<body>
    <h1>Location对象示例</h1>
    <p>欢迎来到我的网站！</p>
    <script type="text/javascript">
        // 获取URL参数并显示
        var currentLocation = window.location;
        var query = currentLocation.search.substring(1);
        var params = query.split('&');
        var paramsObj = {};

        for (var i = 0; i < params.length; i++) {
            var pair = params[i].split('=');
            paramsObj[pair[0]] = pair[1];
        }

        if (paramsObj.username) {
            document.write('<p>你好，' + paramsObj.username + '</p>');
        }
    </script>
</body>
</html>

例如，当通过以下URL访问该页面时：

http://localhost:8080/index.html?username=张三

页面会显示：

欢迎来到我的网站！
你好，张三

以上是JavaScript中Location地址对象的完整攻略，包含获取Location对象、Location对象属性、修改Location对象以及示例说明等内容。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript中的Location地址对象 - Python技术站