iframe，外部页面和jQuery ui标签页

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）

我希望能够使用iframe解决方案，但仅在选择其标签时才加载每个页面。

TIA

Answer 1

这是我想出的另一种选择； 我想使用标签框架，但同时使用动态加载的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>

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

您可能需要一些逻辑来根据要加载的选项卡实际切换iframe的src属性，但是我想您已经明白了。