iframes, внешние страницы и вкладки пользовательского интерфейса jQuery

Question

У меня есть страница с несколькими вкладками.Каждая вкладка содержит содержимое другой веб-страницы (находится на том же сервере, но в другом каталоге, и все они являются автономными сайтами).Цель страницы с вкладками - объединить другие страницы в одном портале.Это прекрасно работает в точку.Проблема, связанная с этим подходом, заключается в том, что мне нужно использовать iframes для загрузки других страниц, чтобы сохранить их CSS, относительные пути к изображениям и т. Д. Это означает, что все страницы загружаются в момент загрузки вкладки.Это не идеально.Я хотел бы использовать ajax для загрузки содержимого, но я не знаю, как это сделать с помощью iframes.

Вот мой код:

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

Я хотел бы иметь возможность использовать решение iframes, но загружать каждую страницу только тогда, когда ее вкладкавыбрано.

TIA

Answer 1

Вот альтернатива, которую я придумал;Я хотел использовать фреймворк с вкладками, но одновременно использовать динамически загружаемые фреймы.Код динамического изменения размера 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>

Answer 2

Сделайте снимок:

Даже не добавляйте 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(""));
  }
});

Вам потребуется некоторая логика, чтобы фактически переключить атрибут src iframe в зависимости от того, какую вкладку вы загружаете, но я думаю, вы поняли идею.