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 load 来填充 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>