iframe替代

Question

在我問我的問題之前，我已經通過了這個：Better alternative to an iframe?，並沒有找到解決我的問題，或者我沒有正確理解！

我有一個HTML頁面，其中包含左側的Dojo樹。當我在元素上點擊左側樹（說部件1），我在右邊加載的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包括來自相同服務器作爲父頁面的搜索引擎優化和用戶體驗非常差的頁面片段。機器人不會將iframe的內容作爲父頁面的一部分編入索引。 Ctrl +點擊或複製鏈接，最終在iframe中可能會導致「wtf？」看到結果時最終用戶的體驗。

只要使用服務器端包括像<jsp:include>。

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

提供element1.jsp等。

Ajax加載也是一種選擇，但請做它unobtrusively（即它必須與禁用JS的工作方式相同，請參閱tvanfosson如何演示它）。通過這種方式，您可以覆蓋更廣泛的受衆羣體和更好的搜索引擎