javascript - ajax发送html+JS

Question

我使用 jQuery load() 方法将另一个 html 发送到我的网页。正在加载的 html 包含 Javascript 生成的 HTML。

我使用这个函数来加载 html:

$(document).ready(function(){
    $("img#links").click(function(){
      $("div#content").load("links.html");
    });
  });

links.html 包含:

<h1 id="content">Links</h1>
<br>
<script>add_link("http://google.com");</script>

add_link 函数生成一个表格:

var add_link = function(link) {
  document.write("<table border=\"0\" width=\"100%\" height=\"50\" id=\"link\">");
  document.write("<tr>");
  document.write("<td width=\"50\"><img src=\"img/star.png\" /></td>");
  document.write("<td><a href=\"" + link + "\"><div class=\"link\">" + link + "</div></a></td></tr></table>");
}

但是，当调用时，它不是将 js 生成的代码写入网页，而是写入空白页面，仅包含 JS 生成的表。

Answer 1

当您在页面加载完成后调用 document.write() 时(绝对是这里的情况)，浏览器将清除原始页面。换句话说，浏览器将页面完成后的调用解释为使用空白页面“重新开始”的隐式请求。

您可以使用 DOM API 将新内容附加到页面，而不是使用 document.write()。