iframe 替代品

Question

在我问我的问题之前，我已经经历了这个：Better alternative to an 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 加载来填充 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>。

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

提供element1.jsp等。

Ajax-loading 也是一个选项，但请这样做unobtrusively（即它必须在禁用 JS 的情况下以相同的方式工作，请参阅 tvanfosson 是如何演示的）。这样您就可以接触到更广泛的受众和更好的 SEO。