Question

有一些类似的帖子，但似乎都没有提到iframe问题。我的jquery容器在每个选项卡中都有一个iframe，它在选项卡点击时加载。默认情况下，容器刷新时会显示第一个标签的iframe。使用本地存储我想记住用户最后选择的选项卡。我在“记忆”标签中的代码＆＃39;部分（请参阅小提琴：https://jsfiddle.net/01jurvpw/）在记住选项卡时效果很好，但我无法获得该选项卡的iframe以立即显示在页面刷新上。我可能需要在某个地方推送iframe，但我确实设法让自己对如何调整代码感到困惑。非常感谢任何帮助。

https://code.jquery.com/jquery-1.12.4.js
https://code.jquery.com/ui/1.12.1/jquery-ui.js
https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css



$(function() {

var mytabs = $('#RH_TabsTableShell').tabs();

function getSelectedTabIndex() {
  return mytabs.tabs('option', 'active'); }

beginTab = $("#RH_TabsTableShell ul li:eq(" + getSelectedTabIndex() + ")").find("a");
loadTabFrame($(beginTab).attr("href"), $(beginTab).attr("rel"));

$("a.tabref").click(function() {
  loadTabFrame($(this).attr("href"), $(this).attr("rel")); });

//tab switching function.  This grabs the “rel” attributes content when we click an <a> tag
function loadTabFrame(tab, url) {

  if ($(tab).find("iframe").length == 0) {
    var html = [];
    html.push('<div class="tabIframeWrapper">');
    html.push('<iframe class="iframetab" width="2000" scrolling="yes" src="' + url + '">Sorry, but your browser does not support frames.</iframe>');
    html.push('</div>');
    $(tab).append(html.join(""));
    $(tab).find("iframe").height($(window).height() - 80);
  }
  return false;
}

// ---------

// Memorise tab
$("#RH_TabsTableShell").tabs({
    activate: function( event, ui ) {
        localStorage.selectedTab = ui.newTab.index() + 1;
    },
    active: localStorage.selectedTab ? localStorage.selectedTab - 1 : 0
});

})






<div id="RH_TabsTableShell">

    <ul id="RH_TabsTable" class="nav nav-tabs">
      <li><a class="tabref" href="#Table1" rel="https://bing.com">Table1</a></li>
      <li><a class="tabref" href="#Table2" rel="https://jsfiddle.net">Table2</a></li>
      <li><a class="tabref" href="#Table3" rel="https://jqueryui.com/demos/tabs">Table3</a></li>
    </ul>

    <div id="Table1"> </div>
    <div id="Table2"> </div>
    <div id="Table3"> </div>

</div>

Answer 1

tabs自然行为可以完成所需的大部分操作，而无需将自己的事件处理程序附加到标签页。

但是，将自定义事件处理程序附加到面板元素#Table1等是很方便的，这样可以命令面板加载自己的内容。

另外，

window.localStorage只能通过两种方法.setItem()和.getItem()来解决。
activate回调不会针对初始标签触发，您需要有一个create回调来加载初始内容。

$(function() {
    var preloadPanelContent = false; // set to true or false;

    var $panels = $("[id^='Table']").each(function(index) {
        $(this).on('loadContent', function(e) { // 'loadContent' is a custom event
            var src = $("#RH_TabsTable li a").get(index).rel;
            if (!$(this).find('iframe').length) {
                $(this).html('<div class="tabIframeWrapper"><iframe class="iframetab" width="2000" scrolling="yes" src="' + src + '">Sorry, but your browser does not support frames.</iframe></div>').find('iframe').height($(window).height() - 80);
            }
        });
    });

    $('#RH_TabsTableShell').tabs({
        'active': window.localStorage.getItem('selectedTab') || 0,
        'activate': function(event, ui) {
            ui.newPanel.trigger('loadContent'); // tell the panel to load its content (if not already loaded).
            window.localStorage.setItem('selectedTab', ui.newTab.index());
        },
        'create': function(event, ui) {
            ui.panel.trigger('loadContent'); // tell the initial panel to load its content (if not already loaded).
        }
    });

    if(preloadPanelContent) {
        $panels.trigger('loadContent');
    }
});

<强> DEMO

选定标签中的iframe未在页面刷新

1 个答案: