更好的替代 iframe 来显示标签内容？
Posted
技术标签:
【中文标题】更好的替代 iframe 来显示标签内容？【英文标题】：Better alternative to an iframe to display tab content? 【发布时间】：2011-01-07 08:31:26 【问题描述】：我有一个带有 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" frameborder="0">
</iframe>
</div>
【问题讨论】：
IFRAME 不是 Apple 产品。 请不要写iFrame。
其实它也是苹果的产品——它是一种视频格式。 :)
请重命名问题并添加您正在寻找 tabs 实现。
【参考方案1】：
使用 IFRAME 加载动态内容（在页面加载后）的唯一替代方法是使用 AJAX 更新网页上的容器。它非常优雅，通常比将整个页面结构加载到 IFRAME 中更快。
Ajax with JQuery（使用它，您将在 SO 上被爱；AJAX 功能非常简单） Ajax with Prototype Ajax with MooTools Standalone Ajax with Matt Kruse's AJAX toolbox（以前用这个，今天用JQuery，因为需要一个框架） AJAX with Dojo（据说很快，但是AJAX没那么简单）【讨论】：
这不是唯一的选择 - 请参阅我的答案以获得另一个选择。 DVK：好点，但我假设 OP 正在寻找动态加载数据。【参考方案2】：如前所述，您可以使用 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 个显示，并且单击功能将隐藏所有容器，除了您想要的那个。
虽然获取的代码更少，时间更容易。
【讨论】：
hmmm...所以如果我将此脚本添加到页面顶部，它会预加载 div 的内容吗？我是否可以在按下选项卡之前预加载所有选项卡内容而不显示它们？ :) 查看添加的代码，我认为只是获取会更容易，但您可以预先填充它们并隐藏/显示。作为编码员的个人意见。【参考方案3】：这是jQuery 示例，它将另一个html 页面包含到您的文档中。这比iframe 对 SEO 更友好。为了确保机器人没有索引包含的页面，只需将其添加为在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 ;)
【讨论】：
【参考方案4】：另一种选择是使用 AJAX 加载选项卡的内容并使用 div 显示内容。我建议使用现有的选项卡库可能是一种选择，而不是尝试解决与创建选项卡相关的所有问题。
如果您想尝试一下，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>
【讨论】：
如果我要使用 AJAX，我会怎么做？ :) 尝试了 jQuery UI 选项卡，但效果不佳.. :( jQuery 选项卡小部件已经具有通过 AJAX 加载内容的选项，而且非常简单。它就像指定 URL 一样简单。让我看看能不能举个例子。【参考方案5】：HTML iframe 用于包含/显示非模板内容，例如 PDF 文件。在 SEO 和 UX 意见中，用于模板内容（即 HTML）时，这被认为是不好的做法。
在您的情况下，您只想拥有一个选项卡式面板。这可以通过多种方式解决：
有一堆链接作为标签和一堆 div 作为标签内容。最初只显示第一个选项卡内容并使用 CSS display: none; 隐藏所有其他内容。通过在标签内容 div 上相应地设置 CSS display: block;（显示）和 display: none;（隐藏），使用 JavaScript 在标签之间切换。
有一堆链接作为选项卡，一个 div 作为选项卡内容。使用Ajax异步获取标签内容，使用JavaScript将当前标签内容替换为新内容。
有一堆链接作为选项卡，一个 div 作为选项卡内容。让每个链接发送不同的 GET 请求参数或表示单击的选项卡的路径信息。使用服务器端流控制（php 的 if() 或 JSP 的 <c:if> 等）或包含功能（PHP 的 include() 或 JSP 的 <jsp:include> 等）以包含所需的选项卡内容，具体取决于参数/路径信息.
当使用基于 JavaScript 的方法时，我强烈建议采用 jQuery。
【讨论】：
【参考方案6】：你不需要脚本。
<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 不受支持（任何现代浏览器都支持），则默认为所有可见的内容。
如果您使用脚本显示内容，请始终使用脚本将其隐藏。如果该脚本没有运行，让它优雅地降级。
【讨论】：
【参考方案7】：最好将每个选项卡的内容加载到同一页面上的 DIV 中，然后使用 JavaScript 和 CSS 显示属性在单击选项卡按钮时切换每个 DIV 的可见性。
如果您不能这样做，那么 iframe 可能是最好的解决方案。您可以使 iframe 背景透明，如下所示：
<iframe src="toframe.html" name= "tabsa" frameborder="0" allowtransparency="true"></iframe>
然后您需要使用以下 CSS 将以下 CSS 添加到 BODY 元素：
BODY Background: transparent;
【讨论】：
看来我的答案也被打败了！哇，你必须在这里快速移动！ 如果您要加载数百个需要在单击时加载的隐藏 怎么办？这对可扩展性有何影响？它在网站上是否非常缓慢？有这么多 【参考方案8】：还有 AJAX 的替代方案！
您可以将所有三个可能的内容加载到单独的 DIV 中。
然后单击一个选项卡只会使相应内容的 DIV 的显示属性“阻塞”，而使其他两个 DIV 的显示属性“无”。
便宜、简单，不需要额外的 http 请求或编码的 AJAX 费用。
请注意，如果选项卡的内容将根据其他数据动态更改，而不是在页面加载时已知，AJAX 是一个更好的解决方案。
【讨论】：
我将如何告诉代码将 div 设置为显示：按下选项卡时阻止？ :) 选项卡的 onclick 处理程序将使用 getelementbyid() 找到适当的 DIV，然后更改该对象的 style.display 值以上是关于更好的替代 iframe 来显示标签内容？的主要内容，如果未能解决你的问题，请参考以下文章
android 怎么用TextView显示HTML的文本内容，包含<iframe>标签的视频内容，望解答