0

タブ付きのコンテンツが含まれているページがあります。いくつかのタブにはiframeが含まれており、便利な小さなスクリプトを使用して、コンテンツに合わせてiframeのサイズを変更しています。これは

function autoResize(id){
    var newheight;

    if(document.getElementById){
        newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
    }
newheight=(newheight)+40; // Makes a bit of extra room
    document.getElementById(id).height= (newheight) + "px";
}

今日、私は小さなjQueryスクリプトを追加して、完全にロードされるまでタブ付き領域の表示を停止しました。これにより、読み込みが完了したときにタブが見苦しい小さなジャンプをするのを防ぎます。これはスクリプトです：

$(document).ready(function(){
    $("#tabber").hide();
    $("#loading").hide();
    $("#loading").fadeIn(1000);
 });
$(window).load(function(){
    $("#loading").hide();
    $("#tabber").fadeIn(300);
 });

読み込み中のdivには読み込み中のアイコンが含まれ、タブ付きのdivはタブ付き領域のコンテンツ全体です。

このスクリプトは、iframeのサイズ変更の動作も停止しています。それをよりよく理解するために、私は別のスクリプトを追加しました：

function checkResize(id){
      var win=document.getElementById(id).contentWindow.document.body.scrollHeight;
      alert(win);

案の定、「勝利」はゼロになります。$（ "＃tabber"）。hide（）行を削除すると、"win"はiframeの高さの適切な数値を示します。

2つのものを互換性のあるものにする別の方法はありますか？

Vladは解決策を生み出しました：display：noneのjQueryバージョンの代わりにvisibility=hiddenのjQueryバージョンを使用する必要がありました。それは実際にはjQueryには存在しないので、別のStackOverflowの質問から、それを行うための独自の関数を作成する方法を見つけました。

最終的なスクリプトは

(function($) {
    $.fn.invisible = function() {
        return this.each(function() {
            $(this).css("visibility", "hidden");
        });
    };
    $.fn.visible = function() {
        return this.each(function() {
            $(this).css("visibility", "visible");
        });
    };
}(jQuery));
    $(document).ready(function(){
        $("#tabber").invisible();
        $("#loading").hide();
        $("#loading").fadeIn(1000);
     });
    $(window).load(function(){
        $("#loading").hide();
        $("#tabber").visible();
     });

私の質問を見て彼らのアイデアを与えるのに苦労してくれたVladとRASに感謝します。

4

1 に答える 1

0

iframeを最初に表示するように設定しないと、iframeの正しい高さまたは幅を取得できないようです。これは、そのスタイルが（メソッドを呼び出すことによって）displayに設定されている場合です。代わりに「可視性」をに設定して、違いが生じるかどうかを確認しようとしましたか？nonehide()hidden

そうでない場合、解決策の1つは、タブ領域を絶対位置のdivで覆い、そのdivを非表示にして、iframeが読み込まれたときにタブのサイズを変更することです。

$('#iframeID').load(function () {
    $('#coverDivID').hide();
    checkResize(); // or autoResize();
});

または、カバーするdivの代わりに、iframe内ですべての作業を行うことができます。完全に読み込まれるまでiframeのコンテンツを表示しないことを意味します。つまり、iframeには、読み込みの進行状況を示す小さなdivがあります（アイコンまたは「お待ちください...」メッセージ）。iframeのコンテンツが読み込まれると、進行状況divが削除され、そのコンテンツが表示されます。次に、上記の方法を使用してタブのサイズを変更します。これは、iframeのコンテンツにコンテナとは異なる境界線や背景が表示されていない場合に機能します。それ以外の場合は、ジャンプが表示されます。

于 2013-03-19T18:35:02.963 に答える