4

親ページのiframeにロードするページがいくつかあり、postMessageを使用して子ページの高さを親に送信して、iframeのサイズを変更できるようにしています。子ページは非常にシンプルで、本体の高さを見つけるためだけに余分なサイズの jQuery を使用するのは残念です。ただし、これまでのところ、上記の呼び出しの効果をそのままの JavaScript で再現することはできませんでした。

body と body.documentElement に適用される scrollHeight、offsetHeight、clientHeight のさまざまな組み合わせを試しましたが、一致するものはありません。また、サイズが大きく異なる子ドキュメントを切り替える場合は特に、ブラウザによって大きく異なります。以下は、すべての子ページに対する onload イベント ハンドラの実際のコードです。

window.onload = function() {
    alert("height(1) = " + document.body.scrollHeight + "\n" +
        "height(2) = " + document.documentElement.scrollHeight + "\n" +
        "height(3) = " + document.body.offsetHeight + "\n" +
        "height(4) = " + document.documentElement.offsetHeight + "\n" +
        "height(5) = " + document.body.clientHeight + "\n" +
        "height(6) = " + document.documentElement.clientHeight + "\n" +
        "height(7) = " + $('body').outerHeight(true)
    );
    parent.postMessage($('body').outerHeight(true) + "px", "*");
}

最初の 6 つの値のいずれも、各状況で各ブラウザー (IE8/FF/Chrome) の 7 番目の値と一致しません。2 番目のページが最も近いですが、大きな子ページから小さなページに切り替えると、Chrome で失敗します。それでも前のページのサイズが表示されます。

私は jQuery のソースを読みましたが、私の JavaScript はそれが何をしているかを理解するのに十分ではありません。

4

4 に答える 4

0

Vanilla Masonryには関数があります--getWH（）-Jqueryからリファクタリングされ、必要なことを実行する必要があります： https ://github.com/desandro/vanilla-masonry

// returns width/height of element, refactored getWH from jQuery
function getWH( elem, measure, isOuter ) {
    // Start with offset property
    var isWidth = measure !== 'height',
        val = isWidth ? elem.offsetWidth : elem.offsetHeight,
        dirA = isWidth ? 'Left' : 'Top',
        dirB = isWidth ? 'Right' : 'Bottom',
        computedStyle = getStyle( elem ),
        paddingA = parseFloat( computedStyle[ 'padding' + dirA ] ) || 0,
        paddingB = parseFloat( computedStyle[ 'padding' + dirB ] ) || 0,
        borderA = parseFloat( computedStyle[ 'border' + dirA + 'Width' ] ) || 0,
        borderB = parseFloat( computedStyle[ 'border' + dirB + 'Width' ] ) || 0,
        computedMarginA = computedStyle[ 'margin' + dirA ],
        computedMarginB = computedStyle[ 'margin' + dirB ],
        marginA, marginB;

    if ( !supportsPercentMargin ) {
        computedMarginA = hackPercentMargin( elem, computedStyle, computedMarginA );
        computedMarginB = hackPercentMargin( elem, computedStyle, computedMarginB );
    }

    marginA = parseFloat( computedMarginA ) || 0;
    marginB = parseFloat( computedMarginB ) || 0;

    if ( val > 0 ) {

        if ( isOuter ) {
            // outerWidth, outerHeight, add margin
            val += marginA + marginB;
        } else {
            // like getting width() or height(), no padding or border
            val -= paddingA + paddingB + borderA + borderB;
        }

    } else {

        // Fall back to computed then uncomputed css if necessary
        val = computedStyle[ measure ];
        if ( val < 0 || val === null ) {
            val = elem.style[ measure ] || 0;
        }
        // Normalize "", auto, and prepare for extra
        val = parseFloat( val ) || 0;

        if ( isOuter ) {
            // Add padding, border, margin
            val += paddingA + paddingB + marginA + marginB + borderA + borderB;
        }
    }

    return val;
}

[編集]vanilla-masonry.jsからhackPercentMarginとgetStyleを取得する必要もあります

于 2013-01-11T14:43:02.017 に答える
0 
$('body').outerHeight(true) = document.body.height + document.body.marginTop + document.body.marginBottom + document.body.bordorTop + document.body.borderBottom
于 2012-04-13T15:52:14.453 に答える
0

jQueryのソースを見ることができます。

// outerHeight and outerWidth
jQuery.fn[ "outer" + name ] = function( margin ) {
    var elem = this[0];
    return elem ?
        elem.style ?
        parseFloat( jQuery.css( elem, type, margin ? "margin" : "border" ) ) :
        this[ type ]() :
        null;
};
于 2012-04-13T15:45:38.763 に答える
0

次に、jQuery は cssHooks 関数に入り、すべてが複雑になり始めます。振り返ってみると、それが何をしているのかを理解しようとして時間を費やすのは無意味に思えます。私はそれを使用する必要があります。親ページで使用するので、すべてのブラウザがとにかくキャッシュします。

于 2012-04-19T12:55:11.377 に答える