Question

我是html和javascript的初学者。我在#top_Bar中创建了一个链接。当我点击链接时，我想要在#All_songlist上加载页面。但我在#All_songlist中看到的只是这两个词“music.html”而不是“music.html”的内容。我哪里做错了？我对innerHTML的作用有点困惑。我想这样做而不使用＆lt; iframe＆gt;标签

<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";
 }

Answer 1

使用jQuery库很容易。使用jQuery的load() function：

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

要将jQuery库添加到当前页面，请将以下代码添加到<head>：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

Answer 2

正如Matthew D Auld所说，你应该使用jQuery的load() function。

由于你在实践中理解这一点我已经准备了JSfiddle for you, click here。

要使用jQuery，您只需在<head＆gt;中添加一个链接即可。部分。然后你有一个脚本说：

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

Answer 3

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

Answer 4

你可以尝试这样的事情

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();

如何从另一个div标签打开div标签上的页面？

4 个答案: