Question

我确信这是一个相当基本的问题，但我对jQuery相对较新，所以希望有人可以提供帮助。

基本上，我需要将HTML代码段加载到页面中。当代码段仅包含HTML时，这种方法很有效，但是当它包含脚本时则不行。

为了清晰起见，我已将我的代码简化为最低限度。这是index.html：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>    
</head>
<body>
<h1>Heading</h1>
<div id="banner"></div>
<script>
$(document).ready(function(){
    $('#banner').load('banner.html');
});
</script>

</body>
</html>

banner.html仅包含以下内容（作为示例）：

<h2>Subheading</h2>
<script>
document.write('Hello');
</script>

该脚本已执行，但由于某种原因，它会在index.html和banner.html中删除其余的HTML（即它只显示“Hello”而没有其他内容）。

任何帮助都非常感谢！

Answer 1

document.write页面加载写入文档后，同时覆盖文档中当前的所有内容，这就是为什么你最终只得到字符串“hello”。

只需删除文档写：

<h2>Subheading</h2>
<p id="test"></p>
<script>
    document.getElementById('test').innerHTML = 'hello';
</script>

Answer 2

这是因为当加载banner.html时... banner.html中的脚本被执行，在你的文档中写入“hello”（这里的文档是你的整个index.html）

了解这一点的一种方法是替换banner.html的某些内容而不是整个文档。

<强> banner.html

<h2>Subheading</h2>
<div id="divID"></div>
<script>
  $('#divID').html('hello');  //using jquery .. gets the element with id as divID and replace the HTML 
 </script>

这里我只更换id为“divID”的div，而不是替换enrite文档

简单的jQuery .load示例不起作用

2 个答案: