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 がロードされる前に実行しすぎていることがわかります。スクリプトを body タグの最後に移動します (この回答の最後にある修正コードを参照してください)。

DOM 要素を参照するスクリプトは、それらの DOM 要素が正常にロードされるまで実行できません。それを確実にする方法は3つあります。

  1. </body>最も簡単な方法は、タグの直前にスクリプトを配置することです。タグ内のものは<body>順番に読み込まれるため、スクリプトが実行される前にすべてのページが読み込まれ、スクリプトがページを参照できるようになります。

  2. window.onloadイベントが発生した場合にのみコードを実行することで、ページ内のすべて (画像を含む) の読み込みが完了するまで待機するようにスクリプトをコーディングできます。これは、すべての画像の読み込みが完了するまで待機するため、必要以上に長く待機しますが、安全で簡単です。

  3. DOM だけがロードされるまで待機するようにスクリプトをコーディングできます。古いブラウザーは異なるメカニズムを必要とするため、これをクロスブラウザーで行うのは少し難しいです。新しいブラウザーでは、この時間はDOMContentLoadedドキュメントのイベントで示されます。

window.location.href現在のページの URL が含まれます。これは常に機能し、現在のページの URL を取得する正しい方法です。

実際のデモ: http://jsfiddle.net/jfriend00/yGrxU/

これがページで機能しない場合は、コードに別の問題があります。DOM が読み込まれる前にコードを実行するのが早すぎて、動作していないことが原因である可能性がありますdocument.getElementById()。これは、JavaScript コードを body タグの末尾に移動することで修正できます。

もう 1 つの可能性は、JavaScript の実行を停止するスクリプト エラーがページにあることです。ブラウザのエラー コンソールまたはデバッグ コンソールをチェックして、報告されているスクリプト エラーがあるかどうかを確認する必要があります。

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

あなたの問題は、次の2行です：

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 に答える