Ankündigung

Einklappen
Keine Ankündigung bisher.

Browserweiche. JavaScript funktioniert nur mit alert() und nicht immer

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Browserweiche. JavaScript funktioniert nur mit alert() und nicht immer

    Hallo zusammen,

    ich bin mit dem Latein am Ende..
    Der folgende Script funktioniert nur wenn ich vorher ein alert() erzeuge und dann auch nicht immer. Ich vermute das Problem hängt damit zusammen wann, wo und wie ich den Script lade, aber trotzdem finde ich keine Lösung.

    Hier das Vorhaben:

    User mit veralteten Browser sollen eine Nachricht bekomme, dass ihr Browser veraltet ist und ggf. Probleme entstehen.
    Dazu habe ich ein Package names "WhichBrowser" via Composer installiert, welches Browser+Version vom User ziemlich zuverlässig erkennt und beides auslesen kann.
    Um das Package zu integrieren, habe ich eine .js Datei erstellt, die ich im Head meiner Page lade (siehe nächste Code-Box). Der ertse Teil ist der Code, welcher das Package aktiviert, der zweite Abschnitt ist eine von mir erstellte "Weiche" welche die Browser Versionen in "alt" oder "neu" einstuft. Wenn ein Browser als "alt" identifiziert wurde, wird eine Nachricht erzeugt, welche dann im <body> ausgelesen werden soll.

    Script File (whichbrowser_includes.js):
    PHP-Code:
    /* Whichbrowser Include. Wird benötigt, um WhichBrowser Package zu aktiveren */

    (function(){var p=[],w=window,d=document,e=f=0;p.push('ua='+encodeURIComponent(navigator.userAgent));e|=w.ActiveXObject?1:0;e|=w.opera?2:0;e|=w.chrome?4:0;
    e|='getBoxObjectFor' in d || 'mozInnerScreenX' in w?8:0;e|=('WebKitCSSMatrix' in w||'WebKitPoint' in w||'webkitStorageInfo' in w||'webkitURL' in w)?16:0;
    e|=(e&16&&({}.toString).toString().indexOf("\n")===-1)?32:0;p.push('e='+e);f|='sandbox' in d.createElement('iframe')?1:0;f|='WebSocket' in w?2:0;
    f|=w.Worker?4:0;f|=w.applicationCache?8:0;f|=w.history && history.pushState?16:0;f|=d.documentElement.webkitRequestFullScreen?32:0;f|='FileReader' in w?64:0;
    p.push('f='+f);p.push('r='+Math.random().toString(36).substring(7));p.push('w='+screen.width);p.push('h='+screen.height);var s=d.createElement('script');
    s.src='vendor/whichbrowser/whichbrowser/detect.php?' p.join('&');d.getElementsByTagName('head')[0].appendChild(s);})();


    /* Browserweiche für "Old Browser" Message. */

    alert('start'); /* Ohne dieses Alert funktioniert der Script nicht */

    Browsers = new WhichBrowser();

    if (
           (
    Browsers.isBrowser('Firefox''<''10'))
        || (
    Browsers.isBrowser('Chrome''<''9'))
        || (
    Browsers.isBrowser('Internet Explorer''<''8'))
        || (
    Browsers.isBrowser('Opera''<''11'))
        || (
    Browsers.isBrowser('Safari''<''5'))
        || (
    Browsers.isBrowser('Trident''<''4'))
        )
    {
        var 
    old_b_message 'Browser veraltet';
    } else {
        var 
    old_b_message '';

    Und hier die der Quelltext der Page:

    Quelltext der Page:
    PHP-Code:
    <head>
    ...
    <!-- 
    WhichBrowser -->
    <
    script type="text/javascript" src="vendor/whichbrowser_includes.js"></script>
    ...
    </head>
    <body>
    ...
    <!-- User Notifications -->
    <script type="text/javascript">
        document.write(old_b_message);
    </script>
    ...
    </body> 
    Wenn das "alert('start');" im Code erscheint, funktioniert der Script manchmal und macht auch alles richtig, aber leider nicht immer. Wenn ich das Alert rausnehme, funktioniert der Script gar nicht, die Variable old_b_message erzeugt ein "undefined".

    Hat jemand eine Idee?

  • #2
    Modernizr ist an dir vorbei geschlichen ?
    [URL="https://gitter.im/php-de/chat?utm_source=share-link&utm_medium=link&utm_campaign=share-link"]PHP.de Gitter.im Chat[/URL] - [URL="https://raindrop.io/user/32178"]Meine öffentlichen Bookmarks[/URL] ← Ich habe dir geholfen ? [B][URL="https://www.amazon.de/gp/wishlist/348FHGUZWTNL0"]Beschenk mich[/URL][/B].

    Kommentar


    • #3
      Modernizr ist an dir vorbei geschlichen ?
      Ja.. Das sieht interessant aus. Wobei ich mich frage, wie ich damit umgehen sollte. Momentan sieht es so aus, dass ich die Möglichkeit habe alle Versionen der Major Browser zu testen. Ich teste also einfach den Versionsstrang hinunter, bis die Seite unerträglich ist. Das ein oder andere wird dann gefixt, um noch ein paar wichtige Versionen ins Boot zu bekommen, aber irgendwann ist dann einfach schluss und genau für diese Fälle würde ich gern eine Nachricht auslesen. Ich frage mich nur, wie ich das machen soll, wenn ich "nur" auf Features testen kann?

      Kommentar


      • #4
        Wozu das ganze?

        Ich würde ab einer bestimmten Version allgemein einen Breake setzen. Browser wie vorallem IE6, 7 und Steinzeit Firefox zu nutzen ist schon grob fahrlässig.

        Mit Modernizr.js und Normalize.css bist du nahezu abgedeckt. Die ganz exquisiten CSS Eigenschaften nutzt man halt dann einfach nicht aufgrund fehlender Cross-Browser-Fähigkeit.
        Homepage: www.jplace.de

        Github: JohnnyDevNull

        Kommentar


        • #5
          Mgl 1) Wenn es nur um eine kleine Layoutgeschichte geht, kann man eventuell drauf verzichten (graceful degradation)
          Mgl 2) Wenn die runden Ecken im Layout auch im IE8 funktionieren müssen, testest du gegen den Feature support (bspw. mit Modernizr) und rüstest Funktionalität nach (sog. Polyfill), meistens per JS.
          Mgl 3) UserAgent Sniffing - (dein Ansatz) wenn es keine andere Möglichkeit gibt, einen Bug zu beheben und sich das Problem auf ein bestimmtes Modell/Browser eingrenzen lässt.

          Graceful degradation hat am wenigsten Testaufwand, man lebt bspw. eben mit dem Ergebnis „keine runden Ecken“ oder man erstellt einen einfachen Fallback-Inhalt (canvas <> img). Der Polyfill ist schnell nachzurüsten und zuverlässiger als UA-Sniffing. Im Vergleich damit auch meistens verbunden mit weniger Testaufwand.

          Lesestoff:

          http://de.wikipedia.org/wiki/Graceful_degradation
          https://remysharp.com/2010/10/08/what-is-a-polyfill
          https://github.com/Modernizr/Moderni...wser-Polyfills

          Grüße

          Basti
          I like cooking my family and my pets.
          Use commas. Don't be a psycho.
          [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

          Kommentar


          • #6
            Ich würde ab einer bestimmten Version allgemein einen Breake setzen. Browser wie vorallem IE6, 7 und Steinzeit Firefox zu nutzen ist schon grob fahrlässig.
            Möchte ich ja auch!
            Ich möchte ab einer gewissen Grenze unbedingt einen Brake setzen!
            Und zusätlich möchte ich, dass User die unterhalb dieser Grenze surfen, darüber benachrichtigt werden. Sie sollen wissen, dass ihr Browser veraltet ist und die Seite ggf. nicht richtig dargestellt werden kann. Das ist meine einzige Intention für das BrowserSniffing.
            Ich denke erst auf diese Weise kapieren die User, dass sie mit einem veralteten Browser unterwegs sind und dass sie ihren Browser updaten müssen, wenn sie angemessen surfen wollen.
            Ich finde es liegt in der Verantwortung der Entwickler diese User zu informieren und ich denke das tut man am besten indem man kleine Anmerkungen auf den Websites platziert, sofern ein Steinzeitbrowser identifiziert wurde. Wenn auf allen Websites, die der DAU mit seinem Steinzeitbrowser öffnet, eine Nachricht erscheinen würde, welche ihm sagt, "er solle seinen Browser aktualisieren, sonst könne es Probleme geben", dann würde er sich früher oder später darum kümmern und wir hätten weniger Arbeit mit überflüssiger "Backwards Compatibility".
            Anstatt das wir rückwärts arbeiten, sollten wir lieber die User dazu bringen vorwärts zu gehen oder ihnen zumindest verständlich machen, dass sie sich um ein Minimum an Software Pflege bemühen müssen, wenn sie angemessen surfen wollen. Ist ja nicht so als würde man denen sonst was abverlangen. Umgekehrt leider schon..

            Was mein aktuelles Projekte angeht gibt es zum Glück nicht viele gravierende Kompatibilitätsprobleme bis ziemlich weit runter in den Versionen der Major Browser. Ein paar leichte Fehler werde ich auch noch beheben. Mich ärgert nur, dass immer noch eine Hand voll Menschen mit IE6 und IE7 auf der Seite auftauchen. Mit IE7 geht die Seite immerhin ganz gut. IE6 hingegen möchte ich nur noch in einen Zustand bringen, in dem der Content irgendwie einsehbar ist. Auch wenn der Content zu sehen ist, fände ich es gerade für IE6 und IE7 gut eine Nachricht zu schalten, sodass der User versteht was der Murks soll, den er vor Augen hat. Vielleicht wird er dann darüber nachdenken etwas zu ändern...

            Mit Modernizr.js und Normalize.css bist du nahezu abgedeckt. Die ganz exquisiten CSS Eigenschaften nutzt man halt dann einfach nicht aufgrund fehlender Cross-Browser-Fähigkeit.
            Ich guck mir das mal an. Habe noch nicht ganz verstanden was das soll und wie das geht?

            Mgl 1) Wenn es nur um eine kleine Layoutgeschichte geht, kann man eventuell drauf verzichten (graceful degradation)
            Denke auch.

            Mgl 2) Wenn die runden Ecken im Layout auch im IE8 funktionieren müssen, testest du gegen den Feature support (bspw. mit Modernizr) und rüstest Funktionalität nach (sog. Polyfill), meistens per JS.
            Muss mal gucken, wie das mit den Tools geht und wie wichtig einzele Funktionen sind.

            Mgl 3) UserAgent Sniffing - (dein Ansatz) wenn es keine andere Möglichkeit gibt, einen Bug zu beheben und sich das Problem auf ein bestimmtes Modell/Browser eingrenzen lässt.
            Das war die Idee. Ich will BrowserSniffing nur benutzen, um dem User des Steinzeitbrowser eine Nachricht auszuspucken, nicht um spezielle Browser Versionen anzupassen.

            Danke an alle für die Infos bzgl. Browser Sniffing und Backwards Comp! Aber hat vielleicht jemand eine Idee wie ich das Problem mit dem Script und dem alert() in den Griff bekomme?

            Kommentar


            • #7
              Wenns dir nur um alte IEs geht, kannst du den Inhalt über Conditional Comments einblenden.
              I like cooking my family and my pets.
              Use commas. Don't be a psycho.
              [URL="http://jscouch.de"]Blog[/URL] - [URL="http://coverflowjs.github.io/coverflow/"]CoverflowJS[/URL]

              Kommentar


              • #8
                Hallöchen,

                Zitat von leOm Beitrag anzeigen
                Ich guck mir das mal an. Habe noch nicht ganz verstanden was das soll und wie das geht?
                Progressive Enhancement.

                Ganz ehrlich: der %-Anteil der IE6/7-Nutzer ist so verschwindend gering, dass sich die Mühe doch nicht lohnt. Ich denke der Nutzer lernt viel eher, dass er seinen Browser (und evt. das OS gleich mit) mal aktualisieren sollte, wenn er den Content gar nicht mehr wie gewohnt konsumieren kann. Das lässt sich nämlich nicht so einfach ignorieren wie eine "Bitte aktualisiere deinen Browser"-Nachricht auf einer funktionierenden Seite.

                Viele Grüße,
                lotti
                [SIZE="1"]Atwood's Law: any application that can be written in JavaScript, will eventually be written in JavaScript.[/SIZE]

                Kommentar

                Lädt...
                X