如何使用JavaScript获取当前URL？

Question

如何使用JavaScript获取当前URL？

7

我想获取当前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>

- Grobi

1

location.href 没问题。你试过弹出它吗？ - MaxArt

请在控制台中显示错误消息。它是否指出 document.getElementById("url") 为 null？ - Bergi

你的JS代码是在<p>标签之后还是之前？如果在之前 - 当你执行JS时，该元素不存在。 - Zoltan Toth

2

这可能是在元素存在之前运行脚本的情况。确保您的脚本位于ID为"url"的元素之后：http://jsfiddle.net/hu4Gq/1/ - Paul

谢谢！问题解决了。问题是我的脚本在元素之前。 - Grobi

3个回答

4

尝试这个，你可以获取你的页面的URL并将其放入一个变量中。

window.location.href

- Alessandro Minoccheri

我和jfriend00同时发布了。 - Alessandro Minoccheri

0

你的问题在于这两行代码：

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。

- Paul

谢谢！虽然这个节点创建的东西对我来说有点高/现在。我还是JavaScript的初学者:S :) - Grobi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jfriend00 · Accepted Answer

现在我们已经看到你公开了整个代码，发现你在DOM加载之前运行了document.getElementById（“url”）。将脚本移到标签的末尾即可（请参见本答案末尾的修复代码）。

引用DOM元素的脚本必须等到这些DOM元素成功加载后才能运行。有三种方法可以确保这一点。

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

2. 通过仅在窗口.onload事件触发时运行代码，您可以编写代码以等待页面中的所有内容完成加载（包括图像）。虽然这也要等待所有图像完成加载，但它是安全且易于实现的。

3. 您可以编写代码仅在DOM加载之后等待。由于旧浏览器需要不同的机制，因此跨浏览器执行此操作有点棘手。在较新版本的浏览器中，此时间使用文档上的DOMContentLoaded事件表示。

window.location.href包含当前页面的URL。这始终有效，是获取当前页面URL的正确方法。

工作演示：http://jsfiddle.net/jfriend00/yGrxU/ 如果在您的页面中此方法不起作用，则您的代码可能存在其他问题。这可能是因为在DOM加载之前运行了您的代码，因此document.getElementById()无法工作。将javascript代码移到标签的末尾即可解决。

另一个可能性是您的页面中存在脚本错误，导致您的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>