JavaScript Fenster Grßenänderungsereignis
-
22-07-2019 - |
Frage
Wie kann ich in einem Browser-Fenster Grßenänderungsereignis Haken?
Es gibt einen jQuery Weg für Resize Ereignisse hören aber ich würde es vorziehen, es nicht in mein Projekt für nur diese eine Anforderung zu bringen.
Lösung
jQuery ist nur das Standard-resize
DOM-Ereignis Einwickeln, zB.
window.onresize = function(event) {
...
};
jQuery können tun einige Arbeit, um sicherzustellen, dass das Resize-Ereignis in allen Browsern konsequent gefeuert wird, aber ich bin nicht sicher, ob eine der Browser unterscheiden, aber ich würde Sie ermutigen, in testen Firefox, Safari und IE.
Andere Tipps
Sie niemals die window.onresize Funktion außer Kraft setzen.
Erstellen Sie stattdessen eine Funktion ein Ereignis-Listener für das Objekt oder Element hinzuzufügen. Diese Kontrollen und einhüllen die Zuhörer nicht funktionieren, dann ist es die Aufgabe der Funktion als letztes Mittel außer Kraft setzt. Dies ist die bevorzugte Methode in Bibliotheken wie jQuery.
object
: das Element oder Fensterobjekt
type
: Größe ändern, blättern (Ereignistyp)
callback
: die Funktionsreferenz
var addEvent = function(object, type, callback) {
if (object == null || typeof(object) == 'undefined') return;
if (object.addEventListener) {
object.addEventListener(type, callback, false);
} else if (object.attachEvent) {
object.attachEvent("on" + type, callback);
} else {
object["on"+type] = callback;
}
};
Dann ist wie folgt verwendet werden:
addEvent(window, "resize", function_reference);
oder mit einer anonymen Funktion:
addEvent(window, "resize", function(event) {
console.log('resized');
});
Zunächst einmal, ich weiß, die addEventListener
Methode oben in den Kommentaren erwähnt, aber ich habe keinen Code. Da es der bevorzugte Ansatz ist, hier ist es:
window.addEventListener('resize', function(event){
// do stuff here
});
Das Resize-Ereignis sollte nie direkt verwendet werden, da es kontinuierlich gebrannt wird, wie wir ändern.
Verwenden Sie eine Entprellfunktion die überschüssigen Anrufe zu verringern.
window.addEventListener('resize',debounce(handler, delay, immediate),false);
Hier ist ein gemeinsames debounce um das Netz schwimmen, sucht jedoch für fortgeschritteneren als featuerd in lodash.
const debounce = (func, wait, immediate) => {
var timeout;
return () => {
const context = this, args = arguments;
const later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
const callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
};
Dies kann wie so verwendet werden ...
window.addEventListener('resize', debounce(() => console.log('hello'),
200, false), false);
Es wird nie mehr Feuer einmal als alle 200ms.
Für mobile Orientierungsänderungen verwenden:
window.addEventListener('orientationchange', () => console.log('hello'), false);
Hier ist ein ich dies zusammen zu nehmen setzen Pflege ordentlich.
Ich glaube, dass die richtige Antwort bereits von @ Alex V zur Verfügung gestellt worden, doch die Antwort eine gewisse Modernisierung erfordert, wie es über fünf Jahre alt geworden ist.
Es gibt zwei Hauptthemen:
-
Nie
object
als Parameternamen verwenden. Es ist ein reservered Wort. Mit diesem wird gesagt, wird @ Alex V bereitgestellte Funktion nicht instrict mode
arbeiten. -
Die
addEvent
Funktion von @ Alex V bereitgestellt kehrt nicht dieevent object
wenn dieaddEventListener
Methode verwendet wird. Ein weiterer Parameter soll auf dieaddEvent
Funktion hinzugefügt werden, um dies zu ermöglichen.
Hinweis: Die neuen Parameter addEvent
wurde optional gemacht, so dass auf diese neue Funktion Version der Migration werden alle vorherigen Anrufe an diese Funktion nicht brechen. Alle Legacy-Anwendungen unterstützt werden.
Hier ist die aktualisierte addEvent
Funktion mit diesen Änderungen:
/*
function: addEvent
@param: obj (Object)(Required)
- The object which you wish
to attach your event to.
@param: type (String)(Required)
- The type of event you
wish to establish.
@param: callback (Function)(Required)
- The method you wish
to be called by your
event listener.
@param: eventReturn (Boolean)(Optional)
- Whether you want the
event object returned
to your callback method.
*/
var addEvent = function(obj, type, callback, eventReturn)
{
if(obj == null || typeof obj === 'undefined')
return;
if(obj.addEventListener)
obj.addEventListener(type, callback, eventReturn ? true : false);
else if(obj.attachEvent)
obj.attachEvent("on" + type, callback);
else
obj["on" + type] = callback;
};
Ein Beispiel Aufruf der neuen addEvent
Funktion:
var watch = function(evt)
{
/*
Older browser versions may return evt.srcElement
Newer browser versions should return evt.currentTarget
*/
var dimensions = {
height: (evt.srcElement || evt.currentTarget).innerHeight,
width: (evt.srcElement || evt.currentTarget).innerWidth
};
};
addEvent(window, 'resize', watch, true);
Vielen Dank für die Referenzierung in meinem Blogbeitrag unter http :. //mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
Während Sie gerade zum Standardfenster Grßenänderungsereignis anschließen können, Sie, dass im Internet Explorer finden, wird das Ereignis einmal für jeden X gefeuert und einmal für jede Y-Achsen-Bewegung, in einer Tonne von Ereignissen resultieren gefeuert die Macht haben eine Auswirkung auf die Leistung auf Ihrer Website, wenn Rendering eine intensive Aufgabe.
Meine Methode beinhaltet eine kurze Auszeit, die auf spätere Ereignisse abgebrochen wird, so dass die Veranstaltung, um Ihren Code erhalten nicht sprudelte, bis der Benutzer die Größe des Fensters beendet ist.
Lösung für 2018 +:
Sie sollten verwenden ResizeObserver . Es wird ein Browser-native Lösung sein, die eine viel bessere Leistung als verwenden, um das resize
Ereignis hat. Darüber hinaus unterstützt es nicht nur die Veranstaltung auf dem document
sondern auch auf beliebigen elements
.
var ro = new ResizeObserver( entries => { for (let entry of entries) { const cr = entry.contentRect; console.log('Element:', entry.target); console.log(`Element size: ${cr.width}px x ${cr.height}px`); console.log(`Element padding: ${cr.top}px ; ${cr.left}px`); } }); // Observe one or multiple elements ro.observe(someElement);
Zur Zeit sind nur Chrome unterstützt es aber andere Browser wird wahrscheinlich folgen (bald). Vorerst müssen Sie eine polyfill .
window.onresize = function() {
// your code
};
In der folgenden Blog-Post kann Ihnen nützlich sein: Befestigung der Fenster Ereignis in IE Größe ändern
Es gibt diesen Code:
Sys.Application.add_load(function(sender, args) { $addHandler(window, 'resize', window_resize); }); var resizeTimeoutId; function window_resize(e) { window.clearTimeout(resizeTimeoutId); resizeTimeoutId = window.setTimeout('doResizeCode();', 10); }
Die bereits oben genannten Lösungen wird funktionieren, wenn alles, was Sie tun wollen nur das Fenster und Fenster ist die Größe. Wenn Sie jedoch die Größe ändern propagiert Kind-Elemente haben wollen, müssen Sie das Ereignis selbst verbreiten. Hier einige Beispiel-Code, es zu tun:
window.addEventListener("resize", function () {
var recResizeElement = function (root) {
Array.prototype.forEach.call(root.childNodes, function (el) {
var resizeEvent = document.createEvent("HTMLEvents");
resizeEvent.initEvent("resize", false, true);
var propagate = el.dispatchEvent(resizeEvent);
if (propagate)
recResizeElement(el);
});
};
recResizeElement(document.body);
});
Beachten Sie, dass ein untergeordnetes Element aufrufen
event.preventDefault();
auf dem Ereignisobjekt, das als erstes Arg des Resize-Ereignis übergeben wird. Zum Beispiel:
var child1 = document.getElementById("child1");
child1.addEventListener("resize", function (event) {
...
event.preventDefault();
});
var EM = new events_managment();
EM.addEvent(window, 'resize', function(win,doc, event_){
console.log('resized');
//EM.removeEvent(win,doc, event_);
});
function events_managment(){
this.events = {};
this.addEvent = function(node, event_, func){
if(node.addEventListener){
if(event_ in this.events){
node.addEventListener(event_, function(){
func(node, event_);
this.events[event_](win_doc, event_);
}, true);
}else{
node.addEventListener(event_, function(){
func(node, event_);
}, true);
}
this.events[event_] = func;
}else if(node.attachEvent){
var ie_event = 'on' + event_;
if(ie_event in this.events){
node.attachEvent(ie_event, function(){
func(node, ie_event);
this.events[ie_event]();
});
}else{
node.attachEvent(ie_event, function(){
func(node, ie_event);
});
}
this.events[ie_event] = func;
}
}
this.removeEvent = function(node, event_){
if(node.removeEventListener){
node.removeEventListener(event_, this.events[event_], true);
this.events[event_] = null;
delete this.events[event_];
}else if(node.detachEvent){
node.detachEvent(event_, this.events[event_]);
this.events[event_] = null;
delete this.events[event_];
}
}
}
<script language="javascript">
window.onresize = function() {
document.getElementById('ctl00_ContentPlaceHolder1_Accordion1').style.height = '100%';
}
</script>