正文

JavaScript中清除URL的方法及实例

/0 浏览量
0402

在JavaScript中，清除URL中的查询参数或者路径片段是一个常见的操作，它可以帮助开发者根据需要动态地修改URL。以下是一些常用的方法以及具体的实例，帮助你更好地理解如何在JavaScript中清除URL。

1. 使用window.location

window.location是浏览器对象的一个属性，它包含了当前页面的URL。你可以直接修改这个属性来改变页面的URL。

清除查询参数

要清除查询参数，你可以直接给window.location赋一个新的URL值，其中不包含查询参数。

// 假设当前URL是 http://example.com/page?query=123
window.location.href = 'http://example.com/page';

清除路径片段

要清除路径片段（即URL中的#之后的部分），你可以使用window.location.hash属性。

// 假设当前URL是 http://example.com/page#section
window.location.hash = '';

2. 使用URL对象

从ECMAScript 2015（ES6）开始，JavaScript引入了URL对象，它可以用来解析、构造和操作URL。

清除查询参数

使用URL对象，你可以创建一个新的URL实例，并设置查询参数为空。

// 假设当前URL是 http://example.com/page?query=123
const url = new URL(window.location.href);
url.searchParams.delete('query');
window.location.href = url.href;

清除路径片段

与window.location.hash类似，你可以通过设置hash属性为空字符串来清除路径片段。

// 假设当前URL是 http://example.com/page#section
const url = new URL(window.location.href);
url.hash = '';
window.location.href = url.href;

实例

以下是一个HTML页面，其中包含JavaScript代码，演示了如何清除URL中的查询参数和路径片段。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Clear URL Example</title>
</head>
<body>
    <button onclick="clearQueryParams()">Clear Query Params</button>
    <button onclick="clearHash()">Clear Hash</button>

    <script>
        function clearQueryParams() {
            const url = new URL(window.location.href);
            url.searchParams.delete('query');
            window.location.href = url.href;
        }

        function clearHash() {
            const url = new URL(window.location.href);
            url.hash = '';
            window.location.href = url.href;
        }
    </script>
</body>
</html>

在这个例子中，有两个按钮分别用来清除URL的查询参数和路径片段。点击这些按钮后，页面会重新加载，URL会根据函数中的操作进行更新。

-- 展开阅读全文 --