如何使用 JavaScript 獲取當前 URL？

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。 這始終有效，並且是獲取當前頁面 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

試試這個，你可以獲取頁面的 url 並將其放入一個變量中

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 個解決方案

解決方案1
7 已采納 2012-09-12 15:14:13

解決方案2
2 2012-09-12 15:14:39

解決方案3
0 2012-09-12 15:24:54

如何使用 JavaScript 獲取當前 URL？

問題描述

3 個解決方案

解決方案1 7 已采納 2012-09-12 15:14:13

解決方案2 2 2012-09-12 15:14:39

解決方案3 0 2012-09-12 15:24:54

解決方案1
7 已采納 2012-09-12 15:14:13

解決方案2
2 2012-09-12 15:14:39

解決方案3
0 2012-09-12 15:24:54