javascript - 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。从组织的 Angular 来看，这会好得多，并使您的页面更容易为有可访问性问题的人导航。如果内容来自另一个域，除非您在服务器上处理请求，否则您将无法使用 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>