iframes, external pages and jQuery ui tabs

I have a page with several tabs. Each tab contains the contents of another web page (lives on the same server, but different directory, and they are all stand alone sites). The tabbed page's intention is bring the other pages together in one portal. This works great to a point. The problem I have with this approach is that I have to use iframes to load the otherpages to preserve their CSS and relative image paths etc. This means t开发者_JAVA百科hat all pages load at the time the tab page loads. This isn't ideal. I would like to use ajax to load the contents, but I don't know how to do this using iframes.

Here's the code I have:

<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>

Each included page will also have its own CSS style and it's own URL (site.com/site1 and site.com/site2)

I'd like to be able to use the iframes solution, but load each page only when its tab is selected.

TIA

Here's an alternative I came up with; I wanted to use the tab framework but use dynamically-loaded iframes at the same time. The dynamic iframe resize code only works for pages in the same site; it does not work around any cross-site scripting restrictions. Tested 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>

Give this a shot:

Don't even add the iframe to the markup of the tab body. Dynamically add it if it is not present:

$("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(""));
  }
});

You would need some logic in there to actually switch the src attribute of the iframe based on which tab you are loading, but I think you get the idea.