web-dev-qa-db-ja.com

ドキュメントの高さの変化を検出

documentの高さがいつ変化するかを検出しようとしています。実行したら、ページレイアウトを整理するためにいくつかの関数を実行する必要があります。

私は探していませんwindow.onresize。ウィンドウよりも大きいドキュメント全体が必要です。

この変化を観察するにはどうすればよいですか？

javascriptdomdocument
58
Steve Robbins
function onElementHeightChange(Elm, callback){
    var lastHeight = Elm.clientHeight, newHeight;
    (function run(){
        newHeight = Elm.clientHeight;
        if( lastHeight != newHeight )
            callback();
        lastHeight = newHeight;

        if( Elm.onElementHeightChangeTimer )
            clearTimeout(Elm.onElementHeightChangeTimer);

        Elm.onElementHeightChangeTimer = setTimeout(run, 200);
    })();
}


onElementHeightChange(document.body, function(){
    alert('Body height changed');
});

ライブデモ

61
vsync

高さの変化を監視する要素内で幅がゼロのabsolute配置iframeを使用し、resizeでcontentWindowイベントをリッスンできます。例えば：

HTML

<body>
  Your content...
  <iframe class="height-change-listener" tabindex="-1"></iframe>
</body>

CSS

body {
  position: relative;
}
.height-change-listener {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 0;
  border: 0;
  background-color: transparent;
}

JavaScript（jQueryを使用しますが、純粋なJSに適合させることができます）

$('.height-change-listener').each(function() {
  $(this.contentWindow).resize(function() {
    // Do something more useful
    console.log('doc height is ' + $(document).height());
  });
});

何らかの理由でbodyにheight:100%が設定されている場合、これを実装するために別のコンテナ要素を見つける（または追加する）必要があります。 iframeを動的に追加する場合は、おそらく<iframe>.loadイベントを使用してcontentWindow.resizeリスナーをアタッチする必要があります。これをブラウザーだけでなくIE7でも動作させるには、*zoom:1ハックをコンテナー要素に追加し、<iframe>要素自体の 'proprietary' resizeイベント（contentWindow.resizeを複製します）をリッスンする必要がありますIE8-10で）。

これはフィドルです ...

23
Jake

ちょうど私の2セント。万が一angularを使用している場合、これは仕事をします：

$scope.$watch(function(){ 
 return document.height();
},function onHeightChange(newValue, oldValue){
 ...
});
12
Dan Ochiana

Vsyncで述べたように、イベントはありませんが、タイマーを使用するか、ハンドラーを別の場所にアタッチできます。

// get the height
var refreshDocHeight = function(){
    var h = $(document).height();
    $('#result').html("Document height: " + h);
};

// update the height every 200ms
window.setInterval(refreshDocHeight, 200);

// or attach the handler to all events which are able to change 
// the document height, for example
$('div').keyup(refreshDocHeight);

jsfiddle here を見つけます。

4
Marc

vsyncの答えはまったく問題ありません。 setTimeoutを使用したくない場合に備えて、requestAnimationFrameを使用できます（ supportを参照 ）。もちろん、まだ興味があります。

以下の例では、本体は追加のイベントsizechangeを取得します。そして、ボディの高さまたは幅が変わるたびにトリガーされます。

_(function checkForBodySizeChange() {
    var last_body_size = {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    };

    function checkBodySizeChange()
    {
        var width_changed = last_body_size.width !== document.body.clientWidth,
            height_changed = last_body_size.height !== document.body.clientHeight;


        if(width_changed || height_changed) {
            trigger(document.body, 'sizechange');
            last_body_size = {
                width: document.body.clientWidth,
                height: document.body.clientHeight
            };
        }

        window.requestAnimationFrame(checkBodySizeChange);
    }

    function trigger(element, event_name, event_detail)
    {
        var evt;

        if(document.dispatchEvent) {
            if(typeof CustomEvent === 'undefined') {
                var CustomEvent;

                CustomEvent = function(event, params) {
                    var evt;
                    params = params || {
                        bubbles: false,
                        cancelable: false,
                        detail: undefined
                    };
                    evt = document.createEvent("CustomEvent");
                    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
                    return evt;
                };

                CustomEvent.prototype = window.Event.prototype;

                window.CustomEvent = CustomEvent;
            }

            evt = new CustomEvent(event_name, {"detail": event_detail});

            element.dispatchEvent(evt);
        }
        else {
            evt = document.createEventObject();
            evt.eventType = event_name;
            evt.eventName = event_name;
            element.fireEvent('on' + event_name, evt);
        }
    }

    window.requestAnimationFrame(checkBodySizeChange);
})();
_

ライブデモ

プロジェクトに独自のtriggerEvent関数がある場合、コードを大幅に削減できます。したがって、関数triggerを完全に削除し、trigger(document.body, 'sizechange');行をjQuery $(document.body).trigger('sizechange');などで置き換えてください。

2
Frank Eisenhardt

このように、@ vsyncのソリューションを使用しています。 Twitterのようなページの自動スクロールに使用しています。

const scrollInterval = (timeInterval, retry, cb) => {
    let tmpHeight = 0;
    const myInterval = setInterval(() => {
        console.log('interval');
        if (retry++ > 3) {
            clearInterval(this);
        }
        const change = document.body.clientHeight - tmpHeight;
        tmpHeight = document.body.clientHeight;
        if (change > 0) {
            cb(change, (retry * timeInterval));
            scrollBy(0, 10000);
        }
        retry = 0;
    }, timeInterval);
    return myInterval;
};

const onBodyChange = (change, timeout) => {
    console.log(`document.body.clientHeight, changed: ${change}, after: ${timeout}`);
}

const createdInterval = scrollInterval(500, 3, onBodyChange);

// stop the scroller on some event
setTimeout(() => {
    clearInterval(createdInterval);
}, 10000);

また、最小限の変更、および他の多くのことを追加することができます...しかし、これは私のために働いています

0
Johan Hoeksma