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) {
  ...
});

jQuery ui tabs load / tabsload事件不会触发

1 个答案: