Überwachen Sie die Größenänderung eines DOM-Elements über Iframe

Ein während des Entwicklungsprozesses häufig auftretendes Problem besteht darin, die Größenänderungen eines Div zu überwachen. Wenn ich beispielsweise Canvas zum Zeichnen eines Diagramms verwende und sich die Größe von Canvas ändert, muss ich den Inhalt darin neu zeichnen. Zu diesem Zeitpunkt muss ich zur Verarbeitung auf das Größenänderungsereignis hören. Obwohl es einen Größenänderungsereignis-Listener für das Fenster gibt, kann dieser unseren Anforderungen nicht gerecht werden, da sich in vielen Fällen die Größe des Div ändert und das eigentliche Ereignis „window.resize“ nicht ausgelöst wird.

Es gibt viele Möglichkeiten, das Größenänderungsereignis eines Div zu überwachen, z. B. Timerprüfung, Bildlaufereignisse usw. Dieser Artikel stellt hauptsächlich die Überwachung über das Iframe-Element vor.

Wir können jedoch indirekt den Größenänderungsereignislistener des Fensters verwenden, um den Größenänderungsereignislistener für ein bestimmtes Div zu implementieren. Bitte sehen Sie sich die spezifische Implementierung unten an.

2. Umsetzungsprinzip

Erstellen Sie dynamisch ein Iframe-Tag und hängen Sie es an den Container an, wobei Breite und Höhe zu 100 % vom Container übernommen werden.
Holen Sie sich das Fenster im Iframe über das contentWindow-Attribut.
Da die Breite und Höhe des Iframes vom übergeordneten Knoten geerbt werden, wird das Größenänderungsereignis im Iframe natürlich ausgelöst, wenn sich die Breite des übergeordneten Containers ändert.

Verwenden Sie das Ereignis „iframeWindow.resize“ , um DOM-Größenänderungen zu überwachen und so eine Überwachung des Größenänderungsereignisses zu erreichen.

Beispiel

document.querySelector("#ifarme_id").contentWindow.addEventListener('resize', () => {
    console.log('Größe ändern!');
}, FALSCH)

3. Anrufen

<!DOCTYPE html>
<html>
    <Kopf>
	<meta charset="utf-8">
	<title>DIV-Breite- und -Höhenüberwachung</title>
    <style type="text/css">
        #Inhalt {
        Überlauf: automatisch;
			}
		</Stil>
	</Kopf>
	<Text>
	<div id="Inhalt">
            Zhong Nanshan: Wenn Afrika gute Vorkehrungen trifft, wird die Epidemie bei heißem Wetter zurückgehen. Außerdem fragte ein Ausländer bei dem Treffen: Wenn Sie jetzt nach Afrika reisen würden, was würden Sie als Erstes tun?
        	Zhong Nanshan sagte: „Das Wichtigste ist jetzt, uns zu schützen, und die Ausbreitung zu verhindern.“
        	Wenn in Afrika in dieser Zeit gute Vorsorgemaßnahmen getroffen werden, kann sich die epidemische Lage bei heißem Wetter entspannen.
		</div>

		<button id="change-size">Breite und Höhe ändern</button>

		<Skripttyp="text/javascript">
			var eleResize = neues ElementResize('#Inhalt');
			eleResize.listen(Funktion() {
				console.log('Größenänderung!')
			})

			//Breite und Höhe ändern document.querySelector('#change-size').addEventListener('click', function() {
				let cont = document.querySelector('#Inhalt');
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}, FALSCH)
		</Skript>
	</body>
</html>

Vollständiger Code

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<title>DIV-Breite- und -Höhenüberwachung</title>
		<style type="text/css">
			#Inhalt {
				Überlauf: automatisch;
			}
		</Stil>
	</Kopf>
	<Text>
		<div id="Inhalt">
			Zhong Nanshan: Wenn Afrika gute Vorkehrungen trifft, wird die Epidemie bei heißem Wetter zurückgehen. Außerdem fragte ein Ausländer bei dem Treffen: Wenn Sie jetzt nach Afrika reisen würden, was würden Sie als Erstes tun?

			Zhong Nanshan sagte: „Das Wichtigste ist jetzt, uns zu schützen, und die Ausbreitung zu verhindern.“

			Wenn in Afrika in dieser Zeit gute Vorsorgemaßnahmen getroffen werden, kann sich die epidemische Lage bei heißem Wetter entspannen.
		</div>
		<button id="change-size">Breite und Höhe ändern</button>

		<Skripttyp="text/javascript">
			(Funktion() {
				lass self = dies;
				/**
				 * Überwachung der Elementbreite und -höhe * @param {Object} el Überwachung des Elementselektors */
				Funktion ElementResize(eleSelector) {
					if (!(diese Instanz von ElementResize)) return;
					wenn (!eleSelector) return;
					dies.eleSelector = eleSelector;
					Dies.el = document.querySelector(eleSelector);
					diese.Warteschlange = [];
					this.__init(); //globel init
				}

				// Initialisierung ElementResize.prototype.__init = function() {
					lass iframe = this.crateIElement();
					this.el.style.position = "relativ";
					dies.el.appendChild(iframe)
					dies.bindEvent(iframe.contentWindow);
				}

				/**
				 * Elementstil festlegen * @param {HTMLObject} el
				 * @param {Objekt} styleJson
				 */
				ElementResize.prototype.setStyle = Funktion(el, styleJson) {
					wenn (!el) zurückgeben;
					styleJson = styleJson || {
						Deckkraft: 0,
						'z-index': '-1111',
						Position: 'absolut',
						links: 0,
						oben: 0,
						Breite: '100%',
						Höhe: '100%',
					};
					let styleText = '';
					für (Schlüssel in styleJson) {
						styleText += (Schlüssel + ':' + styleJson[Schlüssel] + ';');
					}
					el.style.cssText = StilText;
				}

				/**
				 * Element erstellen * @param {Object} Stil
				 */
				ElementResize.prototype.crateIElement = Funktion(Stil) {
					let iframe = document.createElement('iframe');
					dies.setStyle(iframe);
					Iframe zurückgeben;
				}

				/**
				 * Bindungsereignis * @param {Object} el
				 */
				ElementResize.prototype.bindEvent = Funktion(el) {
					wenn (!el) zurückgeben;
					var _self = dies;
					el.addEventListener('Größe ändern', Funktion() {
						_self.runQueue();
					}, FALSCH)
				}

				/**
				 * Warteschlange ausführen */
				ElementResize.prototype.runQueue = Funktion() {
					lass Warteschlange = diese.Warteschlange;
					für (var i = 0; i < Warteschlangenlänge; i++) {
						(Typ der Warteschlange[i]) === 'Funktion' && Warteschlange[i].apply(this);
					}
				}

				/**
				 * Externe Überwachung * @param {Object} cb Rückruffunktion */
				ElementResize.prototype.listen = Funktion(cb) {
					if (typeof cb !== 'function') throw new TypeError('cb ist keine Funktion!');
					diese.Warteschlange.push(cb);
				}

				self.ElementResize = Elementgröße;
			})()
			
			//Eine abhörende Instanz erstellen var eleResize = new ElementResize('#content');
			eleResize.listen(Funktion() {
				console.log('Ich bin ein Zuhörer')
			})

			//Breite und Höhe ändern document.querySelector('#change-size').addEventListener('click', function() {
				let cont = document.querySelector('#Inhalt');
				cont.style.width = Math.floor((Math.random() * (document.documentElement.clientWidth - 500)) + 500) + 'px';
				cont.style.height = Math.floor(Math.random() * 300) + 'px';
			}, FALSCH)
		</Skript>
	</body>
</html>

Weitere Funktionen werden aktualisiert ...

Dies ist das Ende dieses Artikels über die Überwachung der Größenänderungen eines DOM-Elements durch Iframe. Weitere relevante DOM-Elementänderungen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Mehrere allgemeine Beispielcodes für Weiterleitungsverbindungen in HTML

>>: Lösen Sie das Problem der Datensynchronisierung beim Scrollen und Liken von Vue-Seamless-Scroll

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

Überwachen Sie die Größenänderung eines DOM-Elements über Iframe

Der Unterschied und die Verwendung von LocalStorage und SessionStorage in Vue

So installieren Sie die Linux-Onlinesoftware gcc online

Vue SPA-Lösung zur Optimierung des ersten Bildschirms

Drei Diskussionen zum Iframe Adaptive Height Code

Detaillierte Erklärung, wie Node.js mit ES6-Modulen umgeht

Vue implementiert Multi-Grid-Eingabefeld auf mobilem Endgerät

Implementierung eines Nginx-Load-Balancing-Clusters

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.12 (Windows 10)

MySQL 5.7.17 Installations-Tutorial mit Lösungen für das Problem, dass der MySQL-Dienst nicht gestartet werden kann

JavaScript-Grundlagen dieser Verweisung

Artikel empfehlen

Prinzip und Implementierung der parallelen Replikation von MySQL5.7

„Implizite Konvertierung“ von MySQL 5.6 führt zu Indexfehlern und ungenauen Daten

Uniapp verwendet Baidu Voice, um die Funktion zum Konvertieren von Aufnahmen in Text zu realisieren

CentOS7.5-Installationstutorial für MySQL

Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

So verhindern Sie, dass sich vsftpd-Benutzer über SSH anmelden

Der Prozess der Verwendung von vxe-table zum Erstellen bearbeitbarer Tabellen in Vue

So installieren Sie Nginx in Docker und konfigurieren den Zugriff über https

Einführung und Verwendung des JS-Beobachtermodus

Tutorial zur Installation von RabbitMQ mit Yum auf CentOS8

JS + Canvas realisiert dynamischen Uhreffekt

Detaillierte Erklärung der MySQL/Java-Server-Unterstützung für Emoji und Problemlösung

Beispielcode zur Implementierung von dynamischem Skinning mit vue+element

Detailliertes Tutorial zur Installation von Tomcat8.5 in einer Centos8.2-Cloud-Serverumgebung