iframe 替代方案

Question

在我问问题之前，我已经经历过这个：iframe 的更好替代品？，还没有找到解决我的问题的方法，或者也许我没有理解正确！

我有一个 HTML 页面，其中左侧包含一个 Dojo 树。当我单击左侧树上的一个元素（例如 element1）时，我会在右侧加载一个带有 url 的 iframe：

www.something.com?selected=element1

现在该框架的源是一个 jsp，它执行以下操作：

<% 
/* Get the user selection*/
String selectedElement = request.getParameter("selected");

/* Code to Fetch some content from the database using the above string */
%>

由于左侧树有许多元素，单击每个元素会在右侧加载 iframe，如上所示。这个安排工作得很好。但我想知道这是否是最好的方法？我可以如何不使用 iframe 并仍然获得相同的结果吗？我在某处读到加载 iframe 比不加载 iframe 慢几倍。 任何帮助将不胜感激！

Answer 1

如果链接位于同一域中，您可以使用 jQuery load 来填充 DIV 而不是 iframe。从组织的角度来看，这会更好，并且使有可访问性问题的人更容易浏览您的页面。如果内容来自另一个域，则除非您在服务器上处理请求，否则您将被 iframe 困住。

<div id="menu">
    <a class="menu-item" href="/?selected=foo">Foo</a>
    <a class="menu-item" href="/?selected=bar">Bar</a>
    ...
</div>

<div id="content">
  ...default content...
</div>

<script type="text/javascript">
   $(function() {
       $('.menu-item').click( function() {
           $('#content').load( $(this).attr('href') );
           return false;
       });
   });
</script>

道场示例

<script type="text/javascript">
   dojo.ready( function() {
       dojo.query('.menu-item').onclick( function() {
           dojo.xhrGet({
              url: dojo.attr(this,'href');
              load: function(content) {
                   dojo.byId('content').innerHtml = content;
              }
           });
           return false;
       });
   });
</script>

Answer 2

使用 iframe 包含来自与父页面相同的服务器的页面片段对于 SEO 和用户体验来说非常糟糕。机器人不会将 iframe 的内容索引为父页面的一部分。 Ctrl+单击或复制应在 iframe 中结束的链接可能会导致“wtf？”最终用户看到结果时的体验。

只需使用服务器端包含，例如。

<jsp:include page="${param.selected}.jsp" />

提供element1.jsp等。

Ajax 加载也是一种选择，但请不引人注意（即它必须以相同的方式工作）禁用 JS，请参阅 tvanfosson 如何演示）。这样您就可以接触到更广泛的受众并获得更好的搜索引擎优化。