Ich spielte mit ResizeObserver (das wird von Google Chrome hinter experimenteller Webplattform-Flag unterstützt). Ich habe Codepen-Demo mit jQuery UI resizierbar erstellt. Es funktioniert gut auf Chrom-Linux, aber unter Windows stoppt es nach einer Weile oder nur einmal ausgeführt.ResizeObserver funktioniert nicht wie erwartet unter Windows
Mein Code sieht wie folgt aus:
$('#node').css({
width: 140,
height: 50
}).resizable();
function resizer(node, callback) {
if (window.ResizeObserver) {
var resizer = new ResizeObserver(function(entries) {
callback(entries[0]);
});
resizer.observe(node);
return() => resizer.unobserve(node);
} else {
return() => undefined;
}
}
resizer(document.querySelector('.content'), function(entry) {
var width = entry.contentRect.width;
var height = entry.contentRect.height
console.log(width + 'x' + height);
// custom event found on
// https://ebidel.github.io/demos/dom_resize_events.html
entry.target.dispatchEvent(new CustomEvent('resize', {
detail: {width,height}
}));
});
document.querySelector('.content').addEventListener('resize', (e) => {
console.log(e.detail);
});
Ich versuche haben den Browser öffnen/schließen Entwickler-Tools auch laden Sie die Dateien auf dem lokalen Laufwerk, und öffnen Sie mit Datei-Protokoll und bekam die gleichen Ergebnisse neu zu starten.
die google chrome example funktioniert gut,
hier ein my pen
Dies ist ein Chrome Bug war für ein paar Monate. Dies sollte nicht mehr notwendig sein. crbug.com/735830 –