0

私はhtmlとjavascriptの初心者です。#top_Bar にリンクを作成しました。リンクをクリックすると、ページが #All_songlist に読み込まれます。しかし、#All_songlist に表示されるのは、「music.html」の内容ではなく、この 2 つの単語「music.html」だけです。どこで私は間違えましたか？innerHTML の機能について少し混乱しています。<iframe>タグを使わずにやりたい。

<div id="top_Bar">
     <a href=" file:///F:/music.html"  onclick="load_songlist()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>

JavaScriptのコードは次のとおりです。

 function load_songlist(){
          document.getElementById("All_songlist").innerHTML="music.html";
 }
4

4 に答える 4

5

これは、 jQueryライブラリを使用すると簡単です。jQuery のload()関数を使用します。

function load_songlist(){
    $('#All_songlist').load('music.html');
}

jQuery ライブラリを現在のページに追加するには、次のコードを に追加します<head>。

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
于 2013-07-02T21:54:31.367 に答える
1

Matthew D Auld が答えたように、jQuery のload() functionを使用する必要があります。

実際にこれを理解するのに苦労したので、私はあなたのために JSfiddle を用意しました。ここをクリックしてください。

<headjQuery を使用するには、 > セクションにリンクを含めるだけです。次に、次のようなスクリプトがあります。

  • $(window).load(function(){ページの読み込み時にこの関数を実行します。
  • $("#SongListLink").click(function() {ユーザーが ID SongListLink を持つものをクリックすると、この関数が実行されます。
  • $('#All_songlist') .load('music.html');DIV に ID All_songlist のコンテンツを music.html から入力します。

完成したコードは次のようになります。

<head>
<script type='text/javascript' src='//code.jquery.com/jquery-1.10.1.js'></script>
<script type='text/javascript'>
$(window).load(function(){
$(function() {
    $("#SongListLink").click(function() {
        $('#All_songlist')
           .load('music.html');
    });
});
});
</script>
</head>

<body>

<div id="top_Bar">
     <a href="#" id="SongListLink">SONG LIST</a> 
</div>

<div id="All_songlist"></div>

</body>
于 2013-07-02T23:26:24.637 に答える
0

ajax リクエストを試してください:

function doAjax()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {//IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {//IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
   xmlhttp.onreadystatechange=function()
   {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
      {
          document.getElementById("All_songlist").innerHTML=xmlhttp.responseText;
      }
  }
  xmlhttp.open("GET","music.html",true);
  xmlhttp.send();
}

マークアップ:

<div id="top_Bar">
     <a href="music.html"  onclick="doAjax()"> SONG LIST </a> 
</div>

<div id="All_songlist"> </div>
于 2013-07-02T21:59:52.287 に答える
0

あなたはこのようなことを試すことができます

url = "music.html"
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4){
 document.getElementById("All_songlist").innerHTML= xhr.responseText
}
}
xhr.send();
于 2013-07-02T22:01:32.853 に答える