Javascript 更好的 iframe 替代品？

Better alternative to an iframe?

提问by laura

I have a page with an iframe to feature the contents of the clicked tab. There are 3 tabs and 1 iframe. The sources of the contents relating to each tab clicked are formatted and coded in other html & css files.

我有一个带有 iframe 的页面来显示单击的选项卡的内容。有 3 个标签和 1 个 iframe。与单击的每个选项卡相关的内容来源在其他 html 和 css 文件中进行格式化和编码。

What is another alternative to using an iframe, because I noticed that when the tab is clicked, it still shows the white background, similar to when a new page is loading?

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

Here's my code:

这是我的代码：

<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>

回答by Pekka

The only alternative to using IFRAMEs to load dynamic content (after the page has loaded) is using AJAX to update a container on your web page. It's pretty elegant and usually faster than loading a full page structure into an IFRAME.

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

• Ajax with JQuery(use this and you will be lovedon SO; the AJAX functions are great and simple)
• Ajax with Prototype
• Ajax with MooTools
• Standalone Ajax with Matt Kruse's AJAX toolbox(Used to use this, using JQuery today because I needed a framework)
• AJAX with Dojo(Said to be fast, but AJAX is not as straightforward)

• Ajax 和 JQuery（使用它，你会在 SO 上受到喜爱；AJAX 函数很棒而且很简单）
• 带有原型的 Ajax
• 使用 MooTools 的 Ajax
• 使用 Matt Kruse 的 AJAX 工具箱的独立 Ajax（曾经使用过这个，今天使用 JQuery 因为我需要一个框架）
• AJAX with Dojo（据说很快，但 AJAX 没那么简单）

回答by Vincent Ramdhanie

Another alternative is to use AJAX to load the content of a tab and use a div to display the content. I would suggest that using an existing Tab library might be an option rather than trying to solve all the problems associated with creating tabs.

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

Maybe the jQuery UI Tabmight be helpful here if you like to try it.

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

---

---

EDIT: AJAX example with UI Tabs.

编辑：带有 UI 选项卡的 AJAX 示例。

First, the HTML will look like this.

首先，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>

Then make sure that you import the appropriate jQuery files:

然后确保导入适当的 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...

Then add the code to create the tabs:

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

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

回答by DVK

There's an alternative to AJAX!

有一种替代 AJAX 的方法！

You can load ALL three possible contents into separate DIVs.

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

Then clicking on a tab will simply make the display attribute of the appropriate content's DIV "block" while making the other two DIVs' display property "none".

然后单击选项卡将简单地将相应内容的 DIV 的显示属性设置为“阻止”，同时将其他两个 DIV 的显示属性设置为“无”。

Cheap, easy, does not require AJAX costs for extra http request or for coding.

便宜、简单，不需要额外的 http 请求或编码的 AJAX 成本。

Mind you, AJAX is a better solution if the contents of the tabs will change dynamically based on other data as opposed to being known at the time the page loads.

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

回答by Anonymous

You don't need script.

你不需要脚本。

<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>

Plus this CSS, in most browsers: .tab:not(:target) { display: none !important; }, which defaults to all content visible if :target isn't supported (any modern browser supports it).

加上这个 CSS，在大多数浏览器中: .tab:not(:target) { display: none !important; }，如果 :target 不受支持，它默认为所有可见的内容（任何现代浏览器都支持它）。

If you're showing content with script, always hide it with script. Let it degrade gracefully if that script doesn't run.

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

回答by BalusC

The HTML iframeis to be used to include/display non-templatecontent, such as a PDF file. It's considered bad practice when used for template content (i.e. HTML), in both the SEO and UX opinions.

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

In your case you just want to have a tabbed panel. This can be solved in several ways:

在您的情况下，您只想拥有一个选项卡式面板。这可以通过多种方式解决：

1. Have a bunch of links as tabs and a bunch of div's as tab contents. Initially only show the first tab content and hide all others using CSS display: none;. Use JavaScript to toggle between tabs by setting CSS display: block;(show) and display: none;(hide) on the tab content divs accordingly.

2. Have a bunch of links as tabs and one div as tab contents. Use Ajax to get the tab content asynchronously and use JavaScript to replace the current tab contents with the new content.

3. Have a bunch of links as tabs and one div as tab contents. Let each link send a different GET request parameter or pathinfo representing the clicked tab. Use server-side flow-control (PHP's if(), or JSP's <c:if>, etc) or include capabilities (PHP's include(), or JSP's <jsp:include>, etc) to include the desired tab content depending on the parameter/pathinfo.

1. 将一堆链接作为选项卡，将一堆 div 作为选项卡内容。最初只显示第一个选项卡内容并使用 CSS 隐藏所有其他内容display: none;。通过在选项卡内容 div 上相应地设置 CSS display: block;（显示）和display: none;（隐藏），使用 JavaScript 在选项卡之间切换。

2. 有一堆链接作为选项卡和一个 div 作为选项卡内容。使用 Ajax 异步获取标签内容，并使用 JavaScript 将当前标签内容替换为新内容。

3. 有一堆链接作为选项卡和一个 div 作为选项卡内容。让每个链接发送一个不同的 GET 请求参数或 pathinfo 代表单击的选项卡。使用服务器端流控制（PHPif()或 JSP<c:if>等）或包含功能（PHPinclude()或 JSP<jsp:include>等）根据参数/路径信息包含所需的选项卡内容。

When going for the JavaScript based approach, I can warmly recommend to adopt jQueryfor this.

在采用基于 JavaScript 的方法时，我强烈建议为此采用jQuery。

回答by sorin

This is jQueryexample that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt

这是一个jQuery示例，它在您的文档中包含另一个 html 页面。这比 SEO 更友好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>

You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/- this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)

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

回答by Camsoft

It's probably better to load in the content for each tab into DIVs on the same page and then switch the visibility of each DIV when a tab button is clicked using JavaScript and the CSS display property.

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

If you can't do that then iframe is probably the best solution. You can make the iframe background transparent, see below:

如果你不能这样做，那么 iframe 可能是最好的解决方案。您可以使 iframe 背景透明，见下文：

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

You would then need to add the following CSS to the BODY element using:

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

BODY { Background: transparent; }

回答by neatlysliced

As mentioned, you could use jQuery or another library to retrieve the contents of the HTML file and populate it into the div. Then you could even do a fancy fade to make it look all pretty.

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

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

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

Something along these lines:

沿着这些路线的东西：

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

edit.. you could prepopulate or onclick you could do the get dynamically

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

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

If you prepopulate could have three containers instead of the one you have now, 2 hidden, 1 display, and the click functions will hide them all except for the one you want.

如果您预填充可能有三个容器而不是您现在拥有的容器，则隐藏 2 个，显示 1 个，并且单击功能将隐藏所有容器，除了您想要的那个。

The get is less code though, easier time.

得到的是更少的代码，更轻松的时间。