如何使用JavaScript获取当前URL

How to get the current URL with JavaScript?

本文关键字：URL 获取 何使用 JavaScript      更新时间：2023-09-26

我想获取我当前的URL地址，将其保存到一个变量中，然后将其传递到一个HTML元素：

 var url = document.URL;
 document.getElementById("url").innerHTML = url;

我试过使用document.URL、window.location和window.location.href，但它们都不适合我。它什么都不显示。

我的HTML是：

<p id="url"></p>

提前感谢！

这是我的源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    input:hover
    {
        background: black;
        color: white;   
        border: 0;      
    }
  </style>
  <script>   
  var url = location.href;
  document.getElementById("url").innerHTML = url;
  function first()
  {
    var string = "It works!";
    write(string);
  }
  function write(szoveg)
  {
      alert(szoveg);
  }
  function submit()
  {
      var result;
      result = confirm("Would you like to confirm your change?");
      if(result==true) 
          window.location="okay.html";
      else if(result==false)
          alert("You have clicked the '"cancel'" button.");
  }  
  </script>
</head>
<body>
  <input type="button" onclick="first()" value="Try Me" />
  <p onmouseover="submit()">Hover over this text.</p>
  <p id="url">error</p>
</body>
</html>

现在您已经公开了整个代码，我们可以看到您在加载DOM之前过早地运行了document.getElementById("url")。将脚本移动到body标记的末尾（请参阅此答案末尾的固定代码）。

只有成功加载了引用DOM元素的脚本，才能运行这些脚本。有三种方法可以确保这一点。

  1. 最简单的方法是将脚本直接放在</body>标记之前。由于<body>标记中的内容是按顺序加载的，这确保了在脚本运行之前已经加载了所有页面，因此脚本可以引用它

  2. 您可以通过仅在window.onload事件触发时运行代码来编写脚本，以等待页面中的所有内容完成加载（包括图像）。这会等待更长的时间，因为它也会等待所有图像完成加载，但这是安全和容易的。

  3. 您可以对脚本进行编码，等待只加载DOM。这对于跨浏览器来说有点棘手，因为旧的浏览器需要不同的机制。在较新的浏览器中，此时间用文档上的DOMContentLoaded事件表示。

window.location.href包含当前页面URL。这总是有效的，并且是获取当前页面URL的正确方式。

工作演示：http://jsfiddle.net/jfriend00/yGrxU/

如果这在您的页面中不起作用，那么您的代码中存在其他错误。这可能是因为您在加载DOM之前过早地运行代码，因此document.getElementById()无法工作。您可以通过将javascript代码移动到body标记的末尾来解决这个问题。

另一种可能性是，您的页面中出现脚本错误，导致javscript停止执行。您应该检查浏览器错误控制台或调试控制台，以查看是否报告了任何脚本错误。

现在您已经发布了整个代码，我们可以看到您需要将脚本移动到</body>标记之前，如下所示：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <style type="text/css">
    input:hover
    {
        background: black;
        color: white;   
        border: 0;      
    }
  </style>

</head>
<body>
  <input type="button" onclick="first()" value="Try Me" />
  <p onmouseover="submit()">Hover over this text.</p>
  <p id="url">error</p>
  <script>   
  var url = location.href;
  document.getElementById("url").innerHTML = url;
  function first()
  {
    var string = "It works!";
    write(string);
  }
  function write(szoveg)
  {
      alert(szoveg);
  }
  function submit()
  {
      var result;
      result = confirm("Would you like to confirm your change?");
      if(result==true) 
          window.location="okay.html";
      else if(result==false)
          alert("You have clicked the '"cancel'" button.");
  }  
  </script>
</body>
</html>

试试这个，你可以把页面的url放到一个变量中

window.location.href

您的问题是这两行：

var url = location.href;
document.getElementById("url").innerHTML = url;

在<p>标记存在之前执行。从脚本中删除它们，并在p标签后添加一个新脚本：

<p id="url"></p>
<script>
    var url = location.href;
    document.getElementById("url").innerHTML = url;
</script>

请参阅此JSFiddle

使用一个脚本，将其自身替换为包含url的文本节点，可能会更好。如果您在其他任何地方都不使用该id，则不需要给p一个id：

<p>
    <script>
      (function(){
        var scripts = document.getElementsByTagName('script');
        var this_script = scripts[scripts.length - 1];
        this_script.parentNode.replaceChild(
          document.createTextNode(location.href),
          this_script
        );
      })();
    </script>
</p>

请参阅此JSFiddle

相关文章：