• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

window.innerWidth Problematik mit IE!

sunshine80

sunshine80

New member
Hallo alle zusammen!

Ich habe auf meiner Seite dieses simple Abfrage Script eingebunden:

Code: 
<script type="text/javascript"> 
if (window.innerWidth>600) 
 window.location = "http://meineseite.de/2/"; 
</script>

Habe aber schnell festgestellt das die Funktion "window.innerWidth" über IE nicht funkt. Nach Recherche bin ich auf diesen Befehl gestoßen "document.body.clientWidth", der soll auch im Internet Explorer funktionieren, nur weiß ich nicht wie der Code hier richtig lauten muss.
Also so funktioniert es schon mal nicht:

Code: 
<script type="text/javascript"> 
if (document.body.clientWidth>600) 
 window.location = "http://meineseite.de/2/"; 
</script>

Vielleicht hat jemand von euch eine Idee bzw. weiß wie der Code lauten muss, Danke! =]
 
Hier findest du eine Cross-Browser-kompatible Lösung, auch für IE und uralt-Browser: window - JavaScript - Get Browser Height - Stack Overflow
Oder du verwendest jQuery:
Code: 
if($(window).width() >  600){
  //...
}

Übrigens finde ich es keine gute Idee, mittels JS umzuleiten, falls das Browserfenster zu klein ist. Beispielsweise wird die Weiterleitung vom Browser bei aktivierter Option verhindert oder funktioniert nicht bei deaktiviertem JS.
Für diese Aufgabe gibt es stattdessen CSS media queries - Web developer guide | MDN!
PS: welches Display hat heutzutage eine Auflösung von weniger als 600px horizontal? Wenn dann täte ich alle Browser UNTER 600px umleiten, da dies die wenigsten sind...
 
Hallo Julian, danke für die zügige Antwort :)

Das mit CSS media queries wusste ich noch nicht, möchte aber es lieber mit JS realisieren, das einige JavaScript womöglich deaktiviert haben, nehme ich in kauf.
Leider bin ich kein Fachmann in dem Gebiet und weiß auch nicht genau wie der Code richtig lauten soll, so klappt es auf jeden Fall nicht :(

Code: 
<script type="text/javascript"> 
 function alertSize() {
  var myWidth >600;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
  } else if( document.documentElement && ( document.documentElement.clientWidth ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
  } else if( document.body && ( document.body.clientWidth ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
  }
 window.location = "http://meineseite.de/variante2/"; 
}
</script>


Möchte einfach eine Weiterleitung bewirken wenn die Fensterbreite Größer ist als 600pixel(IE Kompatibel).
 
Ich täte dir die Lösung mit jQuery empfehlen - unkompliziert und um die Kompatiblität brauchst du dich nicht zu kümmern:
Code: 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var url = "http://example.com";
if($(window).width() >  600){
  window.location.replace(url);
}
</script>

Ich möchte noch an diesen Aspekt erinnern:
Julian schrieb:
welches Display hat heutzutage eine Auflösung von weniger als 600px horizontal?
Zum Vergrößern anklicken....
Alle User mit einer Fenstergröße von mehr als 600px umzuleiten ist enorm nutzerunfreundlich, da das eigentlich jeden betrifft. Wenn, dann musst du alle Browser UNTER 600px umleiten und als Standard die andere Seite einrichten.

PS: für Beispielseiten bitte keine echten Domainnamen verwenden (außer es ist deine eigene)! Für diesen Zweck gibt es Example Domain...
 
Sorry, schreibe in Zukunft eine "example.com" Seite, habe da nicht dran gedacht :/

Danke für dein Script:

Code: 
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
var url = "http://example.com";
if($(window).width() >  600){
  window.location.replace(url);
}
</script>

Dieser Funktioniert zwar in Firefox und Chrome, aber unter IE (Version 11) habe ich immer noch die gleiche Problematik das er gar nichts lädt.
Kurz zur Erläuterung, ich habe auf meiner Seite, rechts eine Iframe Box platziert, diese Box lädt eine Mobile Variante von einer anderen Seite. Ja ich weiß das ist jetzt nicht gut gelöst, aber es erfüllt seinen Zweck, dafür reicht es auch aus. Wie gesagt unter den anderen Browsern funktioniert diese Abfrage auch, nur unter dem Internet Explorer klappt es nicht, verstehe nicht warum es über den Code nicht laufen will.
 
Zuletzt bearbeitet:
Hat sich doch nicht erledigt, der IE lädt einfach nichts.. super ätzend!
Ich hasse IE, es wird nie besser...
 
Zuletzt bearbeitet:
sunshine80 schrieb:
Ich hasse IE, es wird nie besser...
Zum Vergrößern anklicken....
Ich mag den IE auch nicht gerade - aber das hat absolut nichts mit dem IE zu tun, da funktioniert es nämlich genauso wie in allen anderen Browsern:
59919-window-innerwidth-problematik-ie.png
Entweder du hast also an deinem Browser etwas falsch eingestellt oder es gibt noch einen Fehler an anderer Stelle in deiner Seite...
 
Tatsächlich, Ich habe es in einer Iframe Box drin:

<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com/mobile" style="border: 0; width:330px; height:700px;"></iframe>

In dem Iframe geht es über IE nicht, kannst du das bestätigen?

- - - Aktualisiert - - -

Schade das es immer noch so viele User gibt die diesen ***** Browser verwenden, naja ist nun mal bei MS OS implementiert..
 
Zuletzt bearbeitet von einem Moderator:
Es gibt einige negativen Beispiele für Iframes, siehe google (Nachteile iframes), sry aber das hilft mir nicht weiter..

Der Script funktioniert nicht in Verbindung Iframe + IE, hat jemand dafür eine Lösung?
 
sunshine80 schrieb:
Es gibt einige negativen Beispiele für Iframes, siehe google (Nachteile iframes)
Zum Vergrößern anklicken....
Ich glaube, du verwechselst hier iframes mit frames. iframes sind sogar in der HTML 5-Spezifikation weiterhin enthalten.
Aber ich gebe dir recht, dass iframes dennoch einige Nachteile haben - ich verwende sie nicht.

sunshine80 schrieb:
Der Script funktioniert nicht in Verbindung Iframe + IE, hat jemand dafür eine Lösung?
Zum Vergrößern anklicken....
Dafür müssten wir deinen Code sehen.
 
Hallo Julian, ich versuche es mal bestmöglich zu beschreiben:

Es gibt eine Hauptseite, hier wird rechts in einer iframebox, dieser Code geladen:

Code: 
<iframe sandbox="allow-same-origin allow-scripts allow-popups allow-forms" src="http://www.example.com/mobile.php" style="border: 0; width:330px; height:700px;"></iframe>


2.) Die Iframe Seite lädt Standardmäßig die "mobile.php". Im <header> der "mobilen.php" habe ich diesen Script implementiert:

Code: 
<script type="text/javascript"> 
if (window.innerWidth>600) 
 window.location = "http://www.example.com/desktop"; 
</script>


3.) Der fast Identische Code befindet sich in der "desktop.php". Diesen Code benötige ich um wieder die Mobile Fassung darzustellen wenn ich wieder zurück auf meine Hauptseite mit der iframebox lande.

Code: 
<script type="text/javascript"> 
if (window.innerWidth<600) 
 window.location = "http://www.example.com/mobile"; 
</script>

Die Problematik: hat man einmal die Mobile Version über die Hauptseite(example.com) aufgerufen, dann öffnet er immer die Mobile Variante anstatt die Desktop Fassung.
Deswegen bin ich auf die Idee gekommen mit zwei Scripten zu arbeiten. Das Script macht nichts anderes als zu überprüfen wie breit der aktuelle Browser Fenster ist. Beim öffnen der Webseite schaut er ob das Fenster breiter als 600pixel ist, wenn ja -> wird die Desktop Variante geöffnet andersrum wird die Mobile Seite gestartet. Bitte fragt mich nicht wieso ich eine Mobile Seite in eine Desktop Variante einbinde, es geht nicht anders zumindest im Moment nicht. ;)

Diese Lösung funktioniert "fast" auf allen Browser, ja richtig bis auf IE!!!
Da geht es nicht, da kommt die Eieruhr und er lädt nichts..

Ich hoffe du konntest mir etwas folgen :p
 
Zuletzt bearbeitet:
In der Fehlerkonsole bekomme ich diese Meldungen, bin mir aber nicht sicher ob die relevant sind.


Unbenannt-1.jpg

Bei der Netzwerkaktivität weiß ich nicht recht auf welche Spalte an Information ich achten muss?

Zusatz:

bin jetzt was weitergekommen, ich habe Test halber die Iframe Zeile einzeln(Lokal) gestartet und im IE in der Fehlerkonsole nachgeschaut:

Die Seite die den Script beinhaltet blinkt ständig im Debugger auf, hier ein Screenshot:
Unbenannt-1.jpg

Unter dem Reiter -> Mobil, erscheint dann diese Meldung: Fehler beim Öffnen von http://www.example.com/default/mobile/
 
Zuletzt bearbeitet:
Ich habe es jetzt auch einmal mit dem Code im iFrame getestet, und wie erwartet funktioniert das Skript im IE genauso wie in allen anderen Browsern:
59919-window-innerwidth-problematik-ie_2.png
An dieser Stelle kann ich dir nicht mehr weiterhelfen - im IE funktioniert es; folglich muss bei dir entweder der Fehler an anderer Stelle liegen oder irgendetwas stimmt mit deinem IE nicht.
Ich blicke auch ehrlich gesagt nicht mehr durch: erst schreibst du, es hat sich erledigt, dann funktioniert es doch wieder nicht, dann funktioniert es schon, aber angeblich nicht im iFrame, ... :confused:

PS: wenn schon in der Fehlerkonsole des IE HTML-Fehler angezeigt werden, ist dein Dokument massiv invalid und du solltest dringend für valides HTML sorgen!
 
Bei invaliden Seiten läuft man immer Gefahr, dass irgendwo irgendwas nicht wie erwartet ist. Daher sollte bei der Fehlersuche die Konsole möglichst leer sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben