Question

在我提出问题之前，我已经完成了这个问题：Better alternative to an iframe?，并没有找到问题的解决方案，或者我可能听不懂！

我有一个HTML页面，左侧包含一个Dojo树。当我点击左侧树上的元素（Say element1）时，我在右侧加载了一个带有网址的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>

Dojo示例

<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加载也是一个选项，但请执行unobtrusively（即它必须以与禁用JS相同的方式工作，请参阅tvanfosson如何演示它）。通过这种方式，您可以覆盖更广泛的受众和更好的SEO。

iframe替代方案

2 个答案: