在div中加载xhtml页面

Question

我正在寻找一种替代iframe的方法来加载网站中的xhtml页面。在iframe中处理回显和刷新事件并不是那么容易。

我发现最好的方法是当用户从侧菜单中单击一个项目时，将页面加载到div中。但它会刷新整个页面（包括菜单）。在Facebook和Google+中，当用户点击div中的任何链接时，菜单栏都不会刷新。相反，div和url中的内容会发生变化。检查他们的Javascript并不是那么简单。我想了解这背后的想法。需要建议。

Answer 1

我们的想法是，从用XHTML标记的Web服务器获取数据，或者使用AJAX立即从服务器获取XHTML，并将div内容设置为刚刚生成的XHTML。

将div内容设置为XHTML的一种低级方法是：

div.innerHTML = xhtml

然而，使用像jquery这样的库会更好、更安全。

对于Jquery，您只需要这样做：

$("div").html(xhtml);

在这两种情况下，div都是您需要的div，xhtml是以标记形式从服务器接收的内容。通过这样做，您只更新网页的特定元素，而不是整个网页。

Answer 2

这是通过AJAX请求获取页面的一部分并将其加载到文档中完成的，因此不会进行页面刷新。

利用AJAX（XMLHttpRequest对象）的最佳方式是使用流行的Javascript库"jQuery"。它抽象了浏览器之间的差异，并使您可以直接实现所需内容。

一个代码示例，在您将jQuery加载到页面后：

$('#content').load('ajax/test.html');

其中#content是"替换"iframe的div。点击菜单中的链接（比如#menu）后，您可以调用该函数：

$('#menu a').on('click', function() {
  var page_name = $(this).attr('href');
  $('#content').load(page_name);
  return false;
});

上面的示例从链接的href属性中获取html部分，将其加载到#content元素中，然后返回false，这样就不会加载新页面。

确保href属性相对于web根具有指向html文件的正确路径。