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）

我希望能够使用iframes解决方案，但只在选中其标签页时加载每个页面。

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属性，但我想你明白了。

iframe，外部页面和jQuery ui标签

2 个答案: