jQuery ui tabs load / tabsload事件不会触发 [英] jQuery ui tabs load/tabsload event does not fire

问题描述

这似乎与我的问题相同： jquery ui tabs加载事件不会触发

This seems to be the same as my question: jquery ui tabs load event does not fire

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

but the solution provided doesn't work for me.

我的代码：

<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>

正如你所看到的，我正在尝试两种方式，但两种方式都没有。

As you can see, I'm trying it both ways, but neither is working.

推荐答案

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

The load handler is only for tabs that are loaded via ajax. To do what you want to do, you'll need to attach a load handler to the iframe element:

<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 事件：

Note however that your iframe might load before someone has the chance to click on the tab. That may be what you want. If you want to just trigger something when a tab is selected, use the tabsselect event:

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

这篇关于jQuery ui tabs load / tabsload事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！