怎么在js中输出网址

要在JavaScript中输出网址，你可以使用window.location对象、document.URL属性、console.log方法、以及在HTML中显示等方法。最常用的方式包括：使用window.location.href获取当前网址、使用document.URL获取当前页面的URL、将URL打印到控制台、将URL显示在网页上。以下将详细介绍如何使用这些方法来实现不同场景下的需求。

一、使用 `window.location.href` 获取当前网址

window.location.href 是 JavaScript 中最常用的属性之一，用于获取当前页面的完整URL。这个属性不仅可以获取当前URL，还可以用于重定向页面。

// 获取当前页面的URL
var currentURL = window.location.href;
console.log(currentURL);

在上面的代码中，我们使用window.location.href获取当前页面的URL，并将其输出到控制台。

二、使用 `document.URL` 获取当前页面的URL

document.URL 也是一个非常方便的方法，用于获取当前页面的URL。它返回的是一个字符串，代表当前文档的URL。

// 获取当前页面的URL
var currentURL = document.URL;
console.log(currentURL);

虽然document.URL和window.location.href在大多数情况下是相同的，但它们在某些特定条件下可能会有所不同。

三、将URL打印到控制台

控制台是调试JavaScript代码时非常有用的工具。你可以使用console.log方法将当前页面的URL打印到控制台。

// 使用 console.log 打印当前URL
console.log("当前页面的URL是：" + window.location.href);

这个方法非常适合在调试时使用，方便开发者快速查看当前页面的URL。

四、将URL显示在网页上

有时你可能需要将当前页面的URL显示在网页上。这可以通过修改HTML元素的内容来实现。

<!DOCTYPE html>
<html>
<head>
    <title>显示当前URL</title>
</head>
<body>
    <p id="urlDisplay">当前页面的URL是： </p>
    <script>
        // 获取当前页面的URL
        var currentURL = window.location.href;
        // 将URL显示在网页上
        document.getElementById("urlDisplay").innerText += currentURL;
    </script>
</body>
</html>

在这个示例中，我们首先创建了一个带有id的<p>标签，然后使用JavaScript获取当前页面的URL，并将其显示在网页上。

五、使用事件触发输出URL

你还可以使用事件触发器来输出当前页面的URL。例如，当用户点击一个按钮时，显示当前页面的URL。

<!DOCTYPE html>
<html>
<head>
    <title>点击按钮显示URL</title>
</head>
<body>
    <button id="showURLBtn">显示当前URL</button>
    <p id="urlDisplay"></p>
    <script>
        // 获取按钮和显示URL的元素
        var btn = document.getElementById("showURLBtn");
        var urlDisplay = document.getElementById("urlDisplay");
        // 添加点击事件监听器
        btn.addEventListener("click", function() {
            // 获取当前页面的URL
            var currentURL = window.location.href;
            // 将URL显示在网页上
            urlDisplay.innerText = "当前页面的URL是：" + currentURL;
        });
    </script>
</body>
</html>

在这个示例中，当用户点击按钮时，会触发一个事件，获取当前页面的URL并将其显示在网页上。

六、使用 `window.location` 对象的其他属性

window.location 对象还有其他属性，可以用来获取URL的不同部分，例如主机名、路径名、查询字符串等。

// 获取 URL 的不同部分
console.log("完整URL: " + window.location.href);
console.log("主机名: " + window.location.hostname);
console.log("路径名: " + window.location.pathname);
console.log("查询字符串: " + window.location.search);

这些属性可以帮助你在不同的情况下更灵活地处理URL。

总结

以上介绍了在JavaScript中输出网址的各种方法，包括使用window.location.href获取当前网址、使用document.URL获取当前页面的URL、将URL打印到控制台、将URL显示在网页上等。这些方法在不同的场景下都有各自的优势，可以根据具体需求进行选择。无论是调试代码还是在网页上显示URL，这些方法都能提供很大的帮助。

怎么在js中输出网址

一、使用 window.location.href 获取当前网址

二、使用 document.URL 获取当前页面的URL