iframe を通じて DOM 要素のサイズ変更を監視する

開発プロセス中によく発生する問題は、div のサイズ変更をどのように監視するかということです。たとえば、キャンバスを使用してチャートを描画する場合、キャンバスのサイズが変更されると、内部のコンテンツを再描画する必要があります。このとき、処理のために resize イベントをリッスンする必要があります。ウィンドウには resize イベントリスナーがありますが、多くの場合、div のサイズが変更され、実際の window.resize イベントがトリガーされないため、これではニーズを満たすことができません。

div のサイズ変更イベントを監視する方法は、タイマーのチェック、スクロールイベントなど、多数あります。この記事では、主に iframe 要素を通じて監視する方法を紹介します。

ただし、ウィンドウの resize イベントリスナーを間接的に使用して、特定の div の resize イベントリスナーを実装することができます。具体的な実装については、以下を参照してください。

2. 実施原則

iframe タグを動的に作成し、コンテナに追加します。幅と高さはコンテナの 100% を継承します。
contentWindow 属性を通じて iframe 内のウィンドウを取得します。
iframe の幅と高さは親ノードから継承されるため、親コンテナーの幅が変更されると、iframe 内の resize イベントが自然にトリガーされます。

iframeWindow.resizeイベントを使用して DOM サイズ変更を監視し、サイズ変更イベントの監視を実現します。

例

document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
    console.log('サイズが変更されました!');
}、 間違い）

3. 電話する

<!DOCTYPE html>
<html>
    <ヘッド>
	<メタ文字セット="utf-8">
	<title>DIV の幅と高さの監視</title>
    <スタイル タイプ="text/css">
        ＃コンテンツ {
        オーバーフロー:自動;
			}
		</スタイル>
	</head>
	<本文>
	<div id="コンテンツ">
            鍾南山：アフリカが適切な予防策を講じれば、暑い時期に流行は減少するでしょう。また、会議で外国人が質問しました。「今アフリカに行くとしたら、まず何をしますか？」
        	鍾南山氏は「今必要なのは予防であり、感染拡大を防ぐことが最も重要だ」と述べた。
        	アフリカでは、この時期に適切な予防策を講じれば、気候が暑くなったときに流行状況が緩和される可能性があります。
		</div>

		<button id="change-size">幅と高さを変更する</button>

		<script type="text/javascript">
			var eleResize = new ElementResize('#content');
			eleResize.listen(関数() {
				console.log('サイズが変更されました!')
			})

			//幅と高さを変更する document.querySelector('#change-size').addEventListener('click', function() {
				cont = document.querySelector('#content'); となります。
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}、 間違い）
		</スクリプト>
	</本文>
</html>

完全なコード

<!DOCTYPE html>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>DIV の幅と高さの監視</title>
		<スタイル タイプ="text/css">
			＃コンテンツ {
				オーバーフロー:自動;
			}
		</スタイル>
	</head>
	<本文>
		<div id="コンテンツ">
			鍾南山：アフリカが適切な予防策を講じれば、暑い時期に流行は減少するでしょう。また、会議で外国人が質問しました。「今アフリカに行くとしたら、まず何をしますか？」

			鍾南山氏は「今必要なのは予防であり、感染拡大を防ぐことが最も重要だ」と述べた。

			アフリカでは、この時期に適切な予防策を講じれば、気候が暑くなったときに流行状況が緩和される可能性があります。
		</div>
		<button id="change-size">幅と高さを変更する</button>

		<script type="text/javascript">
			（関数（） {
				自分自身 = this とします。
				/**
				 * 要素の幅と高さの監視 * @param {Object} el 監視要素セレクタ */
				関数 ElementResize(eleSelector) {
					if (!(this instanceof ElementResize)) return;
					if (!eleSelector) 戻り値:
					this.eleSelector = eleSelector;
					this.el = document.querySelector(eleSelector);
					this.queue = [];
					this.__init(); //グローバル初期化
				}

				// 初期化 ElementResize.prototype.__init = function() {
					iframe を this.crateIElement() にします。
					this.el.style.position = '相対';
					this.el.appendChild(iframe)
					this.bindEvent(iframe.contentWindow);
				}

				/**
				 * 要素のスタイルを設定 * @param {HTMLObject} el
				 * @param {オブジェクト} styleJson
				 */
				ElementResize.prototype.setStyle = function(el, styleJson) {
					if (!el) 戻り値;
					styleJson = styleJson || {
						不透明度: 0,
						'Zインデックス': '-1111',
						位置: '絶対'、
						左: 0,
						上: 0,
						幅: '100%'、
						高さ: '100%'、
					};
					styleText を '' とします。
					for (styleJsonのキー) {
						styleText += (キー + ':' + styleJson[キー] + ';');
					}
					el.style.cssText = スタイルテキスト;
				}

				/**
				 * 要素を作成 * @param {Object} スタイル
				 */
				ElementResize.prototype.crateIElement = function(style) {
					iframe を document.createElement('iframe') に設定します。
					iframe にスタイルを設定します。
					iframe を返します。
				}

				/**
				 * バインディングイベント * @param {Object} el
				 */
				ElementResize.prototype.bindEvent = function(el) {
					if (!el) 戻り値;
					var _self = これ;
					el.addEventListener('resize', 関数() {
						_self.runQueue();
					}、 間違い）
				}

				/**
				 * キューを実行 */
				ElementResize.prototype.runQueue = 関数() {
					キューを this.queue にします。
					(var i = 0; i < キューの長さ; i++) {
						(typeof queue[i]) === 'function' && queue[i].apply(this);
					}
				}

				/**
				 * 外部モニタリング * @param {Object} cb コールバック関数 */
				ElementResize.prototype.listen = function(cb) {
					if (typeof cb !== 'function') throw new TypeError('cb は関数ではありません!');
					this.queue.push(cb);
				}

				self.ElementResize = ElementResize;
			})()
			
			//リスニングインスタンスを作成する var eleResize = new ElementResize('#content');
			eleResize.listen(関数() {
				console.log('私はリスナーです')
			})

			//幅と高さを切り替える document.querySelector('#change-size').addEventListener('click', function() {
				cont = document.querySelector('#content'); となります。
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}、 間違い）
		</スクリプト>
	</本文>
</html>

さらに多くの機能が更新されています...

iframe を介した DOM 要素のサイズ変更の監視に関するこの記事はこれで終わりです。関連する DOM 要素の変更については、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: HTML での一般的なリダイレクト接続の例コード

>>: vue-seamless-scrollがスクロールしていいねをするときのデータ同期の問題を解決する