0

我是 html 和 javascript 的初学者。我在#top_Bar 中创建了一个链接。当我单击链接时，我希望页面加载到#All_songlist。但我在#All_songlist 中看到的只是“music.html”这两个词，而不是“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() 函数。

由于您在实践中无法理解这一点，我为您准备了一个 JSfiddle，请单击此处。

要使用 jQuery，您只需在<head> 部分中包含一个链接。然后你有一个脚本，上面写着：

  • $(window).load(function(){在页面加载时执行此功能。
  • $("#SongListLink").click(function() {当用户点击 ID 为 SongListLink 的内容时，执行此功能。
  • $('#All_songlist') .load('music.html');使用 music.html 中的内容填充 ID 为 All_songlist 的 DIV

你完成的代码应该是这样的：

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