Ü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
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
Artikel empfehlen
JS, CSS und HTML zur Implementierung der Registrierungsseite
Eine mit HTML und CSS implementierte Registrierun...
CentOS verwendet expect, um Skripte und Befehle remote in Stapeln auszuführen
Manchmal müssen wir Server stapelweise bedienen, ...
So implementieren Sie geplante Sicherungen und inkrementelle Sicherungen hochgeladener Dateien in Linux
einführen Wenn Sie einen OSS-Speicherdienst wie A...
Detaillierte Erläuterung von acht Methoden zum Korrigieren des CSS-Seitenendes
Beim Schreiben einer Seite kommt es häufig vor, d...
Projektpraxis zum Bereitstellen von Docker-Containern mit Portainer
Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...
Analyse des Prinzips und der Verwendung von MySQL-Benutzerdefinierten Funktionen
Dieser Artikel veranschaulicht anhand von Beispie...
40 Webseiten-Designs mit supergroßen Schriftarten
Heutige Webdesigns neigen dazu, sehr große Schrif...
Zusammenfassung des Speicherorts und Tipps für Docker-Konfigurationscontainer
Tipps zur Verwendung von Docker 1. Bereinigen Sie...
So finden und löschen Sie doppelte Zeilen in MySQL
Inhaltsverzeichnis 1. So finden Sie doppelte Zeil...
Der Unterschied zwischen HTML-Iframe und Frameset_PowerNode Java Academy
Einführung 1. <iframe>-Tag: Ein Iframe ist ...
mysql8.0.20 herunterladen und installieren und aufgetretene Probleme (Abbildung und Text)
1. Suchen Sie im Browser nach MySQL, um es herunt...
Detaillierte Erläuterung der globalen Parameterpersistenz in den neuen Funktionen von MySQL 8
Inhaltsverzeichnis Vorwort Persistenz globaler Pa...
Grundkenntnisse der MySQL-Datenbank
Inhaltsverzeichnis 1. Datenbanken verstehen 1.1 D...
Verwenden Sie momentJs, um eine Countdown-Komponente zu erstellen (Beispielcode)
Heute möchte ich einen Countdown von Vue und Mome...
Zusammenfassung des MySQL-Installationsdiagramms
Grafisches Tutorial zur Installation und Konfigur...