6

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

3 回答 3

7

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

在成功加载这些 DOM 元素之前，无法运行引用 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>
于 2012-09-12T15:14:13.237 回答
2

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

window.location.href
于 2012-09-12T15:14:39.603 回答
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，则无需提供pan ：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

于 2012-09-12T15:24:54.183 回答