jQuery-Script abhängig vom Viewport einbinden

Ein CMSimple Support Forum für deutsch sprechende Nutzer und Entwickler
lck
Posts: 1211
Joined: Wed Mar 23, 2011 11:43 am
Contact:

jQuery-Script abhängig vom Viewport einbinden

Post by lck » Thu Feb 11, 2016 8:09 pm

Ich möchte ein jQuery-Script nur bei einem Viewport größer 499px in das Template einbinden und habe dafür auch schon eine funktionierende Lösung gefunden.

Code: Select all

<script type="text/javascript">
$(document).ready(function(){
    if ($(window).width()>499) {
    $.getScript('./templates/meintemplate/js/script.jquery.js');
    }
});
</script>
Jetzt würde ich gerne wissen:
- ist der Code aktuell, kann man den so verwenden
- $(window).width() gibt nicht den Viewport wieder sondern die Breite des Content-Bereiches ohne Scrollleiste, gibt es hiefür evtl. eine andere Option
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“      XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 2813
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by Holger » Thu Feb 11, 2016 10:55 pm

Hallo Ludwig,
lck wrote:Jetzt würde ich gerne wissen:
- ist der Code aktuell, kann man den so verwenden
- $(window).width() gibt nicht den Viewport wieder sondern die Breite des Content-Bereiches ohne Scrollleiste, gibt es hiefür evtl. eine andere Option
Mit neueren jQuery-Versionen (wenn ich richtig gelesen habe seit 1.12 bzw. 2.2) sollte $(window).outerWidth() die Breite inkl. Scrollbars anzeigen.
Vorher gab unter jQuery - im Gegensatz zu klassischem JS - $(window).width() und $(window).outerWidth() den gleichen Wert zurück.
Hier die Hintergründe dazu: https://github.com/jquery/jquery/issues/1729
Und gegen den Einsatz von getScript() zum laden eines externen Skripts per Ajax-Request spricht IMO auch nichts.

Insgesamt solltest Du aber, um Kollisionen mit anderen JS-Frameworks (ja, MooTools wird auch noch weiter entwickelt), eine Kleinigkeit beachten:
Das "$" ist eine Kurzschreibweise für "jQuery". Allerdings nutzen andere Framworks ebenfalls das $ - Zeichen in gleicher Weise. Auch wenn es unwahrscheinlich ist,
dass ein User mehr als ein Framwork einbindet, kann man Kollisionen leicht umgehen.
Dazu müsstest Du obigen Code nur leicht anpassen:

Code: Select all

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if ($(window).outerWidth() > 499) {
           $.getScript('./templates/meintemplate/js/script.jquery.js');
        }
    });
</script>
Dadurch wird im globalen Bereich ausgeschrieben "jQuery" verwendet, während innerhalb der Funktion wieder die Kurzschreibweise verwendet werden kann.

LG
Holger

lck
Posts: 1211
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by lck » Fri Feb 12, 2016 1:02 pm

Danke Holger für die ausführliche Erklärung.

Habe den Code eingebunden, funktioniert auch, aber das Problem der Breite inkl. Scrollbar scheint nicht behoben zu sein! Getestet mit IE, Chrome +FF. Der Unterschied beträgt zum CSS-Viewport -18px.
Es gibt da anscheinend auch einen Trick per css dem Content-Bereich ein box-sizing: content-box; zuzuweisen. Das müsste ich erst noch testen, aber ich befürchte das hat Auswirkungen auf das gesamte Layout.
Auch kein Problem, ziehe ich für jQuery $(window).outerWidth() halt 18px ab, dann passt es auch wieder :)

Noch eine Frage, kann man den Code auch mit mehreren Scripten kombinieren, also erweitern z.B.:

Code: Select all

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if ($(window).outerWidth() > 499) {
           $.getScript('./templates/meintemplate/js/script.jquery.js');
           $.getScript('./templates/meintemplate/js/script.jquery_02.js');
        }
    });
</script>
oder auch:

Code: Select all

<script type="text/javascript">
    jQuery(document).ready(function($) {
        if ($(window).outerWidth() > 499) {
           $.getScript('./templates/meintemplate/js/script.jquery.js');
        }

        if ($(window).outerWidth() > 1023) {
           $.getScript('./templates/meintemplate/js/script.jquery_02.js');
        }
    });
</script>
... und wie sieht es mit Scripts aus, die ausser der Scripteinbindung zusätzlich noch einen Scriptaufruf brauchen?
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“      XH-Templates for MultiPage & OnePage

Holger
Site Admin
Posts: 2813
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by Holger » Fri Feb 12, 2016 1:20 pm

Hallo Ludwig,

nur kurz - ich muss gleich weg:
lck wrote:Habe den Code eingebunden, funktioniert auch, aber das Problem der Breite inkl. Scrollbar scheint nicht behoben zu sein!
Sorry, da habe ich Dir nicht die ganze Wahrheit gesagt :oops: . Um die Breite inkl. Scrollbar zu erhalten, versuche mal "$( window ).outerWidth( true )" zu verwenden.

Zum Rest melde ich mich später nochmal.

Holger
Site Admin
Posts: 2813
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by Holger » Fri Feb 12, 2016 2:48 pm

Ich hab' jetzt nochmal bei GitHub nachgeschaut:
This is a behavior change so shouldn't be picked back into 1.12/2.2.
Also leider wird es mit jQuery erst in einem späteren Release möglich sein :(.

cmb
Posts: 12601
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by cmb » Fri Feb 12, 2016 6:13 pm

Holger wrote:Ich hab' jetzt nochmal bei GitHub nachgeschaut:
This is a behavior change so shouldn't be picked back into 1.12/2.2.
Also leider wird es mit jQuery erst in einem späteren Release möglich sein :(.
Dann eben ohne jQuery :):

Code: Select all

if (window.innerWidth > 499) {
lck wrote:Noch eine Frage, kann man den Code auch mit mehreren Scripten kombinieren, also erweitern z.B.:
[…]
Ja, das sollte prima funktionieren.
lck wrote:... und wie sieht es mit Scripts aus, die ausser der Scripteinbindung zusätzlich noch einen Scriptaufruf brauchen?
Auch kein besonderes Problem. Da $.getScript() den Code asynchron lädt, muss nur sichergestellt werden, dass der Code auch bereits geladen wurde, bevor der Scriptaufruf ausgeführt wird. Dafür kann man $.getScript() einen zweiten Parameter mitgeben, z.B.

Code: Select all

$.getScript('./templates/meintemplate/js/script.jquery.js', function() {alert("ein test");});
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Holger
Site Admin
Posts: 2813
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by Holger » Fri Feb 12, 2016 6:19 pm

Hallo Ludwig,
Holger wrote:Auch kein Problem, ziehe ich für jQuery $(window).outerWidth() halt 18px ab, dann passt es auch wieder
Hmm, ob das wirklich bei jedem Browser genau 18px sind?

Alternativ kannst Du es aber vorerst wie folgt machen:

Code: Select all

<script type="text/javascript">
    var w = window.outerWidth; //halt ohne jQuery
    jQuery(document).ready(function($) {
        if (w > 499) {
           $.getScript('./templates/meintemplate/js/script.jquery.js');
        }
    });
</script>
lck wrote:Noch eine Frage, kann man den Code auch mit mehreren Scripten kombinieren, also erweitern z.B.:
Ja, es sollte mit beiden Varianten gehen.
lck wrote:... und wie sieht es mit Scripts aus, die ausser der Scripteinbindung zusätzlich noch einen Scriptaufruf brauchen?
Das kommt auf das Skript an. Wenn es zu dem Zeitpunkt (document.ready) laufen kann, kannst Du den Code natürlich auch dort hin packen.

Aber ich fürchte das Ergebnis wird nicht sein, wie Du es erhoffst. Generell wäre die Frage, ob es sich überhaupt lohnt die Skripte einzeln per Ajax-Request zu laden. Vermutlich sind sie relativ klein und man könnte alles in eine Datei packen und diese standardmäßig laden.
Aber das Hauptproblem ist, dass das Skript ja nur beim laden des Dokuments 1 x ausgeführt wird. Die erhoffte Funktion bleibt aus, wenn der User die Fenstergröße ändert oder - noch blöder - wenn man z.B. ein Tablet / Smartphone dreht. Um das zu lösen musst Du noch dafür passende Eventlistener bemühen, die das Skript bei solch einer Aktion dann immer wieder ausführen. Aber, dann musst Du "Buch führen", ob Du die jeweils nötigen Ressourcen bereits eingebunden hast usw...

Also, ganz so einfach wird das nicht. Aber es ist sicher machbar. Nur ob der Aufwand wirklich lohnt? Zumal die Eventlistener den Browser ja auch etwas Performance kosten.

LG
Holger

Edit: Ups, da war der Christoph mal wieder schneller...

cmb
Posts: 12601
Joined: Tue Jun 21, 2011 11:04 am
Location: Mü-Sa, RLP, DE
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by cmb » Fri Feb 12, 2016 6:49 pm

Holger wrote:

Code: Select all

var w = window.outerWidth; //halt ohne jQuery   
window.outerWidth beinhaltet auch noch den Fensterrahmen; window.innerWidth ist wohl eher das gewünschte.
Holger wrote:Aber das Hauptproblem ist, dass das Skript ja nur beim laden des Dokuments 1 x ausgeführt wird. Die erhoffte Funktion bleibt aus, wenn der User die Fenstergröße ändert oder - noch blöder - wenn man z.B. ein Tablet / Smartphone dreht.
Guter Punkt! Soweit hatte ich nicht gedacht.
Holger wrote:Um das zu lösen musst Du noch dafür passende Eventlistener bemühen, die das Skript bei solch einer Aktion dann immer wieder ausführen. Aber, dann musst Du "Buch führen", ob Du die jeweils nötigen Ressourcen bereits eingebunden hast usw...
Selbst wenn das Einbinden der Ressourcen kein Problem darstellen würde (evtl. lädt $.getScript() nur einmal?), dann könnte es aber auch sein, dass man nicht nur das Script erneut ausführen muss, sondern möglicherweise auch die vorherige Ausführung "rückgängig" machen müsste (z.B. durch Entfernen von zuvor hinzugefügten Eventlistenern).
Holger wrote:Ups, da war der Christoph mal wieder schneller...
Endlich mal wieder! :)
Christoph M. Becker –Plugins for CMSimple_XH, but not for CMSimple 4+

Holger
Site Admin
Posts: 2813
Joined: Mon May 19, 2008 7:10 pm
Location: Hessen, Germany
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by Holger » Fri Feb 12, 2016 7:01 pm

cmb wrote:window.outerWidth beinhaltet auch noch den Fensterrahmen; window.innerWidth ist wohl eher das gewünschte.
Langsam verliere ich den Überblick :roll: .
Insgesamt scheint das aber auch nicht "ganz" sicher zu sein...
BTW: per Zufall eben das hier gefunden: http://ryanve.com/lab/dimensions/
bzw: http://verge.airve.com/
cmb wrote:sondern möglicherweise auch die vorherige Ausführung "rückgängig" machen müsste (z.B. durch Entfernen von zuvor hinzugefügten Eventlistenern).
Ich wollte es nicht gleich zu Anfang zu sehr verkomplizieren.
cmb wrote:Endlich mal wieder! :)
Ja!

lck
Posts: 1211
Joined: Wed Mar 23, 2011 11:43 am
Contact:

Re: jQuery-Script abhängig vom Viewport einbinden

Post by lck » Sat Feb 13, 2016 9:42 pm

Besten Dank euch zwei für die Hilfe und die ausführliche Beschreibung.

window.innerWidth; scheint das Richtige zu sein, zumindest in FF+Chrome+Opera und IE funktioniert es wie gewünscht, d.h. es entspricht dem in den CSS media queries festgelegten Wert.
Was ich noch geändert habe, ist den Pfad zum Script per php anzugeben, damit es auch unter Zweitsprachen eingebunden wird.

Code: Select all

<script type="text/javascript">
    var w = window.innerWidth;
    jQuery(document).ready(function($) {
        if (w > 499) {
           $.getScript('<?php echo $pth['folder']['template']?>js/script.jquery.js');
        }
    });
</script>
Wie Holger vermutet hat, sind die Scripte relativ klein, deswegen lasse ich Scripte die zusätzlich noch einen Scriptaufruf brauchen einfach mal unangetastet.
Sinn und Zweck der Sache ist eigentlich, unnötige Scripte ab einem bestimmten Viewport gar nicht einzubinden um die Ladegeschwindigkeit so niedrig wie möglich zu halten.
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“      XH-Templates for MultiPage & OnePage

Post Reply