Wie zu servieren unterschiedliche javascript-Dateien, die von browser-Breite

So, ich möchte bestimmte Javascript-Dateien für bestimmte browser-breiten. Ich weiß, dass @media bietet spezifische CSS-pro browser-Breite und einige Geräte.
Wie würde ich etwas tun, ähnlich wie für Javascript-Dateien, OHNE Verwendung von server-Seite Aufrufe?

Ist es möglich mit Javascript-aufrufen von anderen Javascript-Dateien, basierend auf browser-Breite?
Wenn ja, Wie?

Vielen Dank im Voraus.

Warum brauchen Sie verschiedene javascript-Dateien? Was passiert, wenn der Benutzer die Fenstergröße ändert?
Ich habe kaum Zweifel, dass müssen Sie verschiedene Codes für verschiedene breiten an, besser zu arbeiten auf Ihre Logik.
Ich weiß, so etwas wie dieses wäre große mit media queries. Eine Menge von Elementen, die müssten das js nicht mehr existiert, mit einem mobilen Stylesheet. Ich persönlich möchte aufhören, js laden zusammen, wenn der browser fällt unter eine bestimmte Breite.

InformationsquelleAutor ClosDesign | 2011-01-26

3

Während ich bin nicht sicher, warum, können Sie immer den import von JavaScript-Dateien durch JS-Script.

Folgende links geben einige Informationen über diese.
AUF einer seitlichen Anmerkung - Warum suchst du auf, dies zu tun? Sicherlich können Sie die Auflösung des Bildschirms und passen die Berechnungen /Inhalt, basierend auf diesen Variablen, ohne die Notwendigkeit zu ändern JS-Dateien. Es gibt so viele verschiedene Auflösungen (mobile Geräte, mehrere Monitore, Breitbild-Bildschirm, Projektoren usw.). Ein Benutzer kann auch die Größe des Browser effektiv machen diese es nicht Wert.

Ich freue mich auf diese vor allem zu wechseln, Akkordeon-Menüs für ein mobile-Fenster Größe und ein fade-in Menü für unsere desktop-browser-Größen.
Ich glaube nicht, dass ich weiß, von einer einzigen Website, diese Tage, die nutzt Ihren desktop-Seite für mobile Geräte. Ich würde sparen Sie sich die Kopf-Schmerzen, und suchen Sie im browser-Weiterleitung und sorgen mehr über die Seite selbst. Neben, es sei denn, Sie haben ein sehr einfache Website, die Chancen sind Sie gehen zu wollen, optimieren Sie für mobile sowieso (cut media, das überschüssige Grafiken, etc.)

InformationsquelleAutor Ryan Ternier
13
```
var scriptSrc = 'js/defaults.js';
if (screen.width <= 800)
  scriptSrc = 'js/defaults-800.js';
else if (screen.width <= 1024)
  scriptSrc = 'js/defaults-1024.js';
var script = document.createElement('script');
script.src = scriptSrc;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
```
Vielleicht? Dynamic-laden Sie basiert auf der Bildschirm-Auflösung. Können auch die Größe der Dokumente, browser-Größe, etc. Aber ich bin nicht positiv, Sie wirklich wollen, dies zu tun. Idealerweise aber sollten Sie den Umgang mit relativen Metriken (wie % oder em) in Ihrem design und vermeiden Sie diese.

II versucht haben, etwas simliar mit jQuery, indem eine id, um die Standard-script-tag und dann der Wechsel der Datei, die Grundlage. Ich kann versuchen es auf deine Weise, in der Firebug-ich bekam eine Fehlermeldung mit der Seite versucht um die Datei zu laden. Alle Pfade sind korrekt, aber ich kann nur anfügen, es auf diese Weise tun.
Glaubst du, ich könnte diese weglassen bestimmter Dateien?
Ja, Sie können. Nur der key ist, Sie müssen vermieden werden, in den Prozess geladen, bis Sie Sie brauchen/wollen. Können;t entladen, die Datei, die du bereits geladen, ohne dass dabei einige ernsthafte re-Deklarationen. Wenn Sie wollte, zu bekommen Lust Sie könnte entweder die Skripts ausgeführt werden, basierend auf der relativen Größe, machen verschiedene Versionen, aber binden Sie es zu einem gemeinsamen accessor, oder einfach nur weiter auf diesem Weg und laden, was gilt.

InformationsquelleAutor Brad Christie

Versuchen Sie dies:

var fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript")

if (window.document.body.clientWidth == XXX) {
    fileref.setAttribute("src", "script1.js")
} else {
    fileref.setAttribute("src", "script2.js")

}

InformationsquelleAutor The Coding Monk

0

Media queries sind eine gute Lösung für die Bereitstellung alternativer Stile für verschiedene Fenster-breiten. Leider gibt es keine media Attribut für die <script> element, Verfahren Sie ähnlich.

Können Sie jedoch ein Skript laden Skript, welches geladen werden, die gewünschten .js - Datei abhängig von der Formatvorlage, die vom browser auf der Grundlage Ihrer Medien-Abfrage. Ich weiß nicht, wie Sie dies in einer direkten, eleganten Weg, aber es ist ein nettes hack für, die. Sie haben zu "markieren" jeder .css mit einer eindeutigen Erklärung (dummy, unwichtig oder anderes design) und überprüfen Sie es in JS nach dem laden der Seite zu bestimmen, welches style sheet angewendet wurde, die durch den browser.

Den HTML könnte so Aussehen:
```
<style media="handheld, screen and (max-width:1023px)">
    body { margin-top: 0px }
</style>
<style media="screen and (min-width:1024px)">
    body { margin-top: 1px }
</style>
```
Und die dazugehörigen JS wie folgt:
```
function onLoad() {
    var head = document.getElementsByTagName('head')[0];
    var body = document.getElementsByTagName('body')[0];
    var mark = window.getComputedStyle(body).getPropertyValue('margin-top');

    var script = document.createElement('script');
    script.setAttribute('src', mark=='0px' ? 'handheld.js' : 'screen.js');
    head.appendChild(script);
}
```
Dieser macht den job, aber nur auf einer pro-load-basis. Um eine ansprechende Reaktion auf die Größe des browser-Fensters durch den Benutzer, Sie sollten zu verfolgen, die auf die Witwe, die Breite und die Seite neu laden, wenn nötig.

InformationsquelleAutor Krzysztof Abramowicz
0

Seit 2011 die Welt hat sich verschoben in die mobile ära.

Möglicherweise willst du es versuchen mit: document.documentElement.clientWidth wie es wird Ihnen sagen, Sie den sichtbaren Bereich Ihrer Seite - reagiert es zu vergrößern, aber nicht, um die Tonhöhe.

InformationsquelleAutor Nuno Silva

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.