使用 JavaScript 获取规范 url答案

【问题标题】：Obtaining canonical url using JavaScript使用 JavaScript 获取规范 url
【发布时间】：2023-03-04 05:20:01
【问题描述】：

我正在内部构建一个网站，并且该页面在<head> 中设置了一个canonical URL，用于在外部指定页面的URL。

有没有什么方法可以使用 JavaScript 来获取规范的 URL？

【问题讨论】：

尊敬的先生，请提供一个 HTML 示例，以便我们更好地帮助您。

【解决方案1】：

现在你可以简单地使用：

document.querySelector("link[rel='canonical']").getAttribute("href");

以上答案将为您提供 href 属性的真实值。因此，如果您没有完整的 URL，它将显示像 /query.html 这样的 href。

但.href 方法将始终为您提供带有http://example.com/query.html 等域的完整 URL：

document.querySelector("link[rel='canonical']").href;

【讨论】：

是的。但是添加 90kB 的 jquery 来获得简单的东西并不是一个好的选择 imvho :-)
同意，但如果有人决定使用 jQuery，那么这些选择器也很方便。
我已经更新了答案，并补充说明了 .href 方法的不同之处。

【解决方案2】：

jquery 版本；

$("link[rel='canonical']").attr("href")

【讨论】：

【解决方案3】：

这样的？

<!DOCTYPE html>
<html>
    <head>
        <link href="http://www.example.com/" rel="canonical" />
        <title>Canonical</title>
        <script type="text/javascript">
            window.onload = function () {
                var canonical = "";
                var links = document.getElementsByTagName("link");
                for (var i = 0; i < links.length; i ++) {
                    if (links[i].getAttribute("rel") === "canonical") {
                        canonical = links[i].getAttribute("href")
                    }
                }
                alert(canonical);
            };
        </script>
    </head>
    <body>
        <h1>Canonical</h1>
    </body>
</html>

【讨论】：