Geek asks and answers

How to get current url with javascript?

I would like to get my current URL, store it in a variable, and pass it to an HTML element:

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

I tried to use document.URL, window.locationand window.location.href, but none of them work for me. It does not display anything.

My HTML:

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

Thanks in advance!

Here is my source code:

<!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>
+5
source share
3 answers

Now that you have expanded all your code, we will see that you start document.getElementById("url")too soon before loading the DOM. Move your script to the end of the body tag (see Revised code at the end of this answer).

Scripts that reference DOM elements cannot be executed until these DOM elements are successfully loaded. There are three ways to ensure this.

  • - script </body>. <body> , , script, , , script .

  • script, , , ( ), window.onload. , , , , .

  • script, DOM. , . DOMContentLoaded .

window.location.href URL . URL- .

: http://jsfiddle.net/jfriend00/yGrxU/

, - . , DOM , , document.getElementById() . , javascript body.

, script, javscript. , , - script.

, , , script </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>
+7

, URL-

window.location.href
0

Your problem is that these two lines:

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

Run before tag <p>. Remove them from the script and add a new script after the tag p:

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

See JSFiddle

It is better to use a script that replaces the text node containing the URL. Then you do not need to specify pa idunless you use this identifier somewhere else:

<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>

See JSFiddle

0
source

More articles:


All Articles