更好地替代iframe？

Question

我有一个带有iframe的页面,其中包含所单击选项卡的内容.共有3个标签和1个iframe.与单击的每个选项卡相关的内容的来源被格式化并在其他html和css文件中编码.

使用iframe的另一种选择是什么,因为我注意到当单击选项卡时,它仍然显示白色背景,类似于加载新页面时？

这是我的代码:

<div id="tabs">
<div id="overview">
  <a target="tabsa" class="imagelink lookA" href="toframe.html">Overviews</a>
</div>
<div id="gallery">
  <a target="tabsa" class="imagelink lookA" href="tawagpinoygallery.html">Gallery</a>
</div>
<div id="reviews">
  <a target="tabsa" class="imagelink lookA" href="trframe.html">Reviews</a>
</div>
</div>

<div id="tabs-1">
  <iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0">
  </iframe>
</div>

Answer 1

使用IFRAME加载动态内容(在页面加载后)的唯一替代方法是使用AJAX更新网页上的容器.它非常优雅,通常比将整页结构加载到IFRAME中更快.

• 使用JQuery的Ajax(使用它,你会喜欢 SO; AJAX函数非常简单)
• 带有Prototype的Ajax
• 使用MooTools的Ajax
• 使用Matt Kruse的AJAX工具箱的独立Ajax(用于使用它,今天使用JQuery,因为我需要一个框架)
• 使用Dojo的AJAX(说速度快,但AJAX并不那么简单)

Answer 2

另一种方法是使用AJAX加载选项卡的内容并使用div显示内容.我建议使用现有的Tab库可能是一个选项,而不是试图解决与创建选项卡相关的所有问题.

如果您想尝试,也许jQuery UI选项卡在这里可能会有所帮助.

编辑:UI选项卡的AJAX示例.

首先,HTML将如下所示.

   <div id="tabs">
     <ul>
      <li><a href="toframe.html"><span>Overviews</span></a></li>
      <li><a href="tawagpinoygallery.html"><span>Gallery</span></a></li>
      <li><a href="trframe.html"><span>Reviews</span></a></li>
     </ul>
   </div>

然后确保导入适当的jQuery文件:

  <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css" type="text/css" media="all" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script>
  etc...

然后添加代码以创建选项卡:

   <script type="text/javascript">
$(function() {
    $("#tabs").tabs();
});
</script>

Answer 3

有一个AJAX的替代品!

您可以将所有三种可能的内容加载到单独的DIV中.

然后单击选项卡将简单地使相应内容的DIV"块"的显示属性成为其他两个DIV的显示属性"无".

便宜,简单,不需要额外的http请求或编码的AJAX成本.

请注意,如果选项卡的内容将根据其他数据动态更改而不是在页面加载时已知,则AJAX是更好的解决方案.