1

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

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

4

2 回答 2

2

这个想法是，您从使用 XHTML 标记的网络服务器获取数据，或者您立即从服务器获取 XHTML，使用 AJAX 并将 DIV 内容设置为您刚刚生成的 XHTML。

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

div.innerHTML = xhtml

但是，使用 jquery 之类的库会更好、更安全。

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

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

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

于 2013-07-29T11:51:08.587 回答
1

它是通过 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 属性具有指向您的 html 文件的正确路径，相对于 Web 根目录。

于 2013-07-29T11:52:55.457 回答