2

window.resizeハンドラーにタイムアウトを割り当てて、サイズ変更イベントが発生するたびにかなりの量のサイズ変更コードを呼び出さないようにしました。私のコードは次のようになります。

<script>
function init() {
  var hasTimedOut = false;
  var resizeHandler = function() {
    // do stuff
    return false;
  };

  window.onresize = function() {
    if (hasTimedOut !== false) {
      clearTimeout(hasTimedOut);
    }
    hasTimedOut = setTimeout(resizeHandler, 100); // 100 milliseconds
  };
}
</script>
<body onload="init();">
...
etc...

IE7（および場合によっては他のバージョン）では、これを行うと、サイズ変更イベントが常に発生するようです。より正確には、タイムアウト期間ごとに起動します。この場合は100ミリ秒です。

この動作を停止する理由または方法について何かアイデアはありますか？1回のサイズ変更で発生するすべてのサイズ変更イベントに対してサイズ変更コードを呼び出さないほうがいいのですが、これはさらに悪いことです。

4

4 に答える 4

2

// do stuffコードで、top、left、width、height、border、margin、またはpaddingプロパティのいずれかを操作しますか？

意図せずに再帰をトリガーする再帰を意図せずにトリガーする可能性があります。

于 2009-08-11T20:59:35.897 に答える
0

IEでサイズ変更イベントを修正する方法

また、「scunliffe」の答えを参照してください。

于 2009-08-11T21:22:07.817 に答える
0

IEは、サイズ変更が行われている間、常にサイズ変更イベントを発生させます（修正のタイムアウトをすでに実装しているため、これを知っておく必要があります）。

私のテストページで、コードを使用して、表示されている結果を複製することができます。

ただし、タイムアウトを100ではなく1000に増やすと、問題は解決します。さまざまな待機値を試して、何が効果的かを確認することをお勧めします。

これが私が使用したテストページです：それはあなたが遊ぶためにすでに設定された非常に動的な待機期間を持っています。

于 2009-08-11T21:24:33.193 に答える
0

同じ問題に遭遇しましたが、別の方法で解決しました。タイムアウトを作成するよりもエレガントだと思います。

コンテキスト：親ページ内に読み込まれたiframedページがあり、サイズが変更されたときにiframeが親に通知する必要があるため、親はそれに応じてiframeのサイズを変更できます-iframeの動的なサイズ変更を実現します。

そこで、iframed HTMLドキュメントで、bodyタグにコールバックを登録しようとしました。まず、onchangeで-それは機能しませんでした。次にサイズ変更時に-それは機能しましたが、絶えず発火し続けました。（後で原因を見つけました-それは明らかに私のページを無限に広げようとしたFirefoxのバグでした）。私はResizeObserverを試しました-無駄に、同じことが起こりました。

私が実装したソリューションは次のとおりです。

<body onload="docResizePipe()">
<script>
var v = 0;
const docResizeObserver = new ResizeObserver(() => {
    docResizePipe();
});
docResizeObserver.observe(document.querySelector("body"));
function docResizePipe() {
    v += 1;
    if (v > 5) {
        return;
    }
    var w = document.body.scrollWidth;
    var h = document.body.scrollHeight;
    window.parent.postMessage([w,h], "*");
}
setInterval(function() {
    v -= 1;
    if (v < 0) {
        v = 0;
    }
}, 300);
</script>

つまり、どのように機能するか：コールバックが発生するたびに、変数vをインクリメントします。300ミリ秒ごとに1回、デクリメントします。大きすぎると発砲がブロックされます。

タイムアウトベースのソリューションに対するこれの大きな利点は、ユーザーエクスペリエンスに遅れが生じ、再帰をどの程度正確にブロックするかが明確になることです。（まあ、実際にはそうではありません）））

于 2021-04-11T11:41:37.810 に答える