iframes，external pages and jQuery ui tabs

Question

我有一个包含多个选项卡的页面。每个选项卡包含另一个网页的内容（位于同一台服务器上，但不同的目录，并且它们都是独立站点）。 标签页的意图是将其他页面放在一个门户中。 这很有用。 我使用这种方法的问题是我必须使用iframe加载其他页面以保留其CSS和相对图像路径等。 这意味着所有页面在加载标签页时加载。这并不理想。我想用ajax来加载内容，但我不知道如何使用iframe来做到这一点。

这里是我的代码：

<div id="tabs"> 
<ul> 
<li><a class="tabref" href="#tabs-1">One tab</a></li> 
<li><a class="tabref" href="#tabs-2">two tab</a></li> 
</ul> 
<div id="tabs-1" class="tabMain"> 
<div class="tabIframeWrapper"> 
    <iframe class="tabcontent" src="site1"></iframe> 
</div> 
</div> 

<div id="tabs-2" class="tabMain"> 
<div class="tabIframeWrapper"> 
    <iframe class="tabcontent" src="site2"></iframe> 
</div> 
</div> 

每个包含的页面也将拥有自己的CSS样式和它自己的URL（site.com/site1和site.com/site2）

我d喜欢能够使用iframes解决方案，但只在选中其选项卡时加载每个页面。

TIA

Answer 1

给这一个镜头：

不要在iframe甚至添加到片主体的标记。动态地添加它，如果它不存在：

$("a.tabref").click(function() { 
    var tab = $(this).attr("href"); 
    if ($(tab).find("iframe").length == 0) { 
    var html = []; 
    html.push('<div class="tabIframeWrapper">'); 
    html.push(' <iframe class="tabcontent" src="site1"></iframe>'); 
    html.push('</div>'); 
    $(tab).append(html.join("")); 
    } 
}); 

你会需要一些逻辑在那里实际切换基于您加载该标签的iframe src属性，但我觉得你的想法。

Answer 2

这是我想出的另一种选择;我想使用选项卡框架，但同时使用动态加载的iframe。动态iframe调整大小代码仅适用于同一站点中的页面;它不适用于任何跨站点脚本限制。经过测试的IE9/FF6/Chrome 13.

<div id="tabs"> 
    <ul> 
     <li><a href="#tab1">My Tab 1</a></li> 
     <li><a href="#tab2">My Tab 2</a></li> 
    </ul> 


    <div id="tab1"> 
    Default content here 
    </div> 

    <div id="tab2" title="myIframeUrl.html"></div> <!-- using title element for url storage --> 
</div> 

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#tabs').tabs({ 
      ajaxOptions: { 
       error: function(xhr, status, index, anchor) { 
        $(anchor.hash).html(
         "There was an error loading this content. "); 
       } 
      }, 
      select: function(event, ui) { 
       var pnl = $(ui.panel); 
       var url = pnl.attr('title'); // get url to load from title attr 

       if ((url) && (pnl.find('iframe').length == 0)) { 
        $('<iframe />') 
         .attr({ 
          frameborder: '0', 
          scrolling: 'no', 
          src: url, 
          width: '100%', 
          height: '100%' 
         }) 
         .appendTo(pnl) 
         .load(function() {  // IFRAME resize code 

          var iframe = $(this); // iframe element 
          var win = this.contentWindow; // child window 
          var element = $(win.document); // element to size to; .document may return 0 depending on sizing of document, may have to use another element 

          $(win.document).ready(function() { 
           iframe.height(element.height()); // resize iframe 
          }); 
         }); 
       } 

       return true; 
      } 
     }); 

    }); 
    </script>