javascript - jQuery ui 选项卡加载/tabsload 事件不触发

Question

这似乎与我的问题相同:jquery ui tabs load event does not fire

但是提供的解决方案对我不起作用。

我的代码:

<script type="text/javascript">

    $(document).ready(function(){

        $( "#tabs" ).bind( "tabsload", function(event, ui) {
            alert("ok");
            changeheight();
        });
        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

function changeheight(){
    alert("changeheight");
    var iframe = document.getElementById("#iframe1");
    var htmlheight = iframe.contentWindow.document.body.scrollHeight;
    alert(htmlheight);
    $("#iframe1").height(htmlheight+"px");
}

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;">
        </iframe>

如您所见，我正在尝试两种方法，但都不起作用。

Answer 1

load 处理程序仅适用于通过 ajax 加载的选项卡。要执行您想做的操作，您需要将加载处理程序附加到 iframe 元素:

<script type="text/javascript">

    $(document).ready(function(){
        $('#iframe1').load(function() {
          alert("ok");
          changeheight();
        });

        $("#tabs").tabs({
        load: function(event, ui){
            alert("load");
            changeheight();},
        cache: true});
    });

    function changeheight(){
        alert("changeheight");
        var iframe = document.getElementById("#iframe1");
        var htmlheight = iframe.contentWindow.document.body.scrollHeight;
        alert(htmlheight);
        $("#iframe1").height(htmlheight+"px");
    }

</script>

<div id="tabs">
    <ul style="padding: 0; margin: 0;">
        <li class="context-tab" ><a href="#iframe1" id="recent-tab" >Recent</a></li>
    </ul>

    <iframe id="iframe1" src="/canvas/getstories?context=recent" style="width:95%;"></iframe>
</div>

但请注意，您的 iframe 可能会在有人有机会单击该选项卡之前加载。这可能就是你想要的。如果您只想在选择选项卡时触发某些操作，请使用 tabsselect 事件:

$( ".selector" ).bind( "tabsselect", function(event, ui) {
  ...
});