Question

我正在寻找iframe的替代方案来加载网站中的xhtml页面。在iframe中处理和刷新事件并不容易。

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

Answer 1

我们的想法是，您从使用XHTML标记的网络服务器获取数据，或者使用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是div“替换”iframe。您可以在菜单中的链接（例如#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文件的正确路径。

在div中加载xhtml页面

2 个答案: