Ü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

Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

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

Implementierungsschritte der objektorientierten Kapselung von js in einer kaskadierenden Dropdown-Menüliste

Beheben Sie den Fehler „ExtUtils/MakeMaker.pm kann in @INC nicht gefunden werden“

So implementieren Sie die zentrierte Ausrichtung einer CSS-Maske im Vollbildmodus

So verweisen Sie direkt auf Vue und Element-UI in HTML

Kleines Programm zur Implementierung eines einfachen Taschenrechners

Vue realisiert Preiskalendereffekt

React kapselt die globale Bullet-Box-Methode

MySQL-Batch entfernt Leerzeichen in einem bestimmten Feld

Verschiedene Probleme, auf die Anfänger bei der Installation von MySQL in Docker stoßen

Vue implementiert die Seiten-Caching-Funktion

Artikel empfehlen

Implementierungscode des JQuery-Schrittfortschrittsachsen-Plug-Ins

Problem bei der Schriftartauswahl für Copyright-Symbole in HTML (wie man Copyright-Symbole schöner macht)

Detaillierte Erklärung der Fallstricke beim Mischen von npm und cnpm

Detaillierter Prozess zur Verwendung von Vscode in Kombination mit Docker für die Entwicklung

Beispiel zur MySQL-Passwortänderung – ausführliche Erklärung

Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren

Design-Sharing der Download-Seite des Pengyou.com-Mobilclients (Bild und Text)

Nginx verwendet Reverse-Proxy, um eine Analyse des Lastausgleichsprozesses zu implementieren

Beispiel für die Installation von nginx in einem angegebenen Verzeichnis

CSS verwendet die Pseudoklasse „placeholder-showed“, um den schwebenden Texteffekt des Eingabefelds zu erzielen

Implementierung des Aufbaus eines Kubernetes-Clusters mit VirtualBox+Ubuntu16

Benutzerdefinierte Komponente der unteren Navigationsleiste des WeChat-Applets

So ändern Sie die Länge eines Eingabetextfelds entsprechend seinem Inhalt

Zusammenfassung der Fallstricke bei der Verwendung von Nginx als Reverse-Proxy für GRPC

So installieren Sie Solr 8.6.2 in Docker und konfigurieren den chinesischen Wortsegmentierer