iframe,外部页面和jQuery ui标签

时间:2010-11-11 16:32:42

标签: jquery ajax user-interface iframe tabs

我有一个包含多个标签的页面。每个选项卡包含另一个网页的内容(位于同一服务器上,但不同的目录,它们都是独立的站点)。 选项卡页面的目的是将其他页面放在一个门户中。 这很有用。 我使用这种方法的问题是我必须使用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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

试一试:

甚至不要将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属性,但我想你明白了。