Question

我有一个带有iframe的页面，其中包含所点击标签的内容。共有3个标签和1个iframe。与点击的每个标签相关的内容的来源被格式化并编码在其他html＆amp; 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中更快。

Ajax with JQuery（使用此功能，您将喜欢 on SO; AJAX功能非常简单）
Ajax with Prototype
Ajax with MooTools
Standalone Ajax with Matt Kruse's AJAX toolbox（过去使用它，今天使用JQuery，因为我需要一个框架）
AJAX with Dojo（据说很快，但AJAX并不那么简单）

Answer 2

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

如果您愿意尝试，jQuery UI Tab可能会有所帮助。

编辑：使用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是更好的解决方案。

Answer 4

您不需要脚本。

<ul><li><a href="#foo">foo link</a><li><a href="#bar">bar link</a></ul>
<div class="tab" id="foo">foo contents</div>
<div class="tab" id="bar">bar contents</div>

在大多数浏览器中加上此CSS：.tab:not(:target) { display: none !important; }，如果不支持target（任何现代浏览器都支持），默认显示所有内容。

如果您要使用脚本显示内容，请始终使用脚本隐藏它。如果该脚本没有运行，请让它优雅地降级。

Answer 5

如前所述，您可以使用jQuery或其他库来检索HTML文件的内容并将其填充到div中。然后你甚至可以做一个花哨的淡入淡出使它看起来很漂亮。

http://docs.jquery.com/Ajax/jQuery.get

这些方面的东西：

$.get("toframe.html", function(data){
  $("#tabs-1").html(data);
});

编辑.. 你可以预先填写或点击你可以动态获取

$("#tabs a").click(function(){
   var pagetoget = $(this).attr("href");
   $.get...
})

如果你预填充可以有三个容器而不是你现在拥有的容器，2个隐藏，1个显示和点击功能将隐藏所有容器，除了你想要的容器。

虽然获得的代码更少，但更容易。

Answer 6

最好将每个标签的内容加载到同一页面上的DIV中，然后在使用JavaScript和CSS显示属性单击标签按钮时切换每个DIV的可见性。

如果你不能这样做那么iframe可能是最好的解决方案。您可以将iframe背景设为透明，请参阅以下内容：

<iframe src="toframe.html" name= "tabsa" width="95%" height="100%" frameborder="0" allowtransparency="true"></iframe>

然后，您需要使用以下命令将以下CSS添加到BODY元素：

BODY { Background: transparent; }

Answer 7

HTML iframe用于包含/显示非模板内容，例如PDF文件。在SEO和UX意见中，当用于模板内容（即HTML）时，这被认为是不好的做法。

在您的情况下，您只想拥有一个标签面板。这可以通过以下几种方式解决：

将一堆链接作为标签和一堆div作为标签内容。最初只显示第一个标签内容，并使用CSS display: none;隐藏所有其他内容。通过在标签内容div上相应设置CSS display: block;（显示）和display: none;（隐藏），使用JavaScript在标签之间切换。
将一堆链接作为标签，将一个div作为标签内容。使用Ajax以异步方式获取选项卡内容，并使用JavaScript将当前选项卡内容替换为新内容。
将一堆链接作为标签，将一个div作为标签内容。让每个链接发送一个不同的GET请求参数或表示单击选项卡的pathinfo。使用服务器端流控制（PHP的if()或JSP的<c:if>等）或包含功能（PHP的include()或JSP的<jsp:include>等）来包含所需的标签内容取决于参数/ pathinfo。

在采用基于JavaScript的方法时，我可以热烈建议您采用jQuery。

Answer 8

这是jQuery示例，其中包含您文档中的另一个html页面。这比iframe更加友好。为了确保机器人没有为包含的页面建立索引，只需将其添加到robots.txt

中禁止

<html>
  <header>
    <script src="/js/jquery.js" type="text/javascript">
  </header>
  <body>
    <div id='include-from-outside'></div>
    <script type='text/javascript'>
      $('#include-from-outside').load('http://example.com/included.html');
    </script> 
  </body>
</html>

您还可以直接从Google添加jQuery：http://code.google.com/apis/ajaxlibs/documentation/ - 这意味着可选的自动包含更新的版本和一些显着的速度提升。此外，意味着你必须信任它们只为你提供jQuery;）

更好地替代iframe？

8 个答案: