Question

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

Answer 1

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

在成功加载这些DOM元素之前，无法运行引用DOM元素的脚本。有三种方法可以确保这一点。

最简单的方法是将脚本放在</body>标记之前。由于<body>标记中的内容是按顺序加载的，因此可确保在脚本运行之前已加载所有页面，因此脚本可以引用它。
您可以编写脚本代码以等待页面中的所有内容通过仅在window.onload事件触发时运行代码来完成加载（包括图像）。这等待的时间超过了必要的时间，因为它还等待所有图像完成加载，但它安全且容易。
您可以编写脚本代码，直到加载DOM为止。这是一个有点棘手的跨浏览器，因为旧的浏览器需要不同的机制。在较新的浏览器中，此时间表示文档上有DOMContentLoaded事件。

window.location.href包含当前页面网址。这始终有效，是获取当前页面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>

Answer 2

试试这个，您可以获取页面的网址并将其放入变量

window.location.href

Answer 3

你的问题是这两行：

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

如何使用JavaScript获取当前URL？

3 个答案: