Ankündigung

Einklappen
Keine Ankündigung bisher.

iOS 12, Webapp, Bootstrap4 Modal Problem

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

  • iOS 12, Webapp, Bootstrap4 Modal Problem

    Hallo ich hoffe ich hoffe mal ich habe hier die richtige Kategorie gewählt, eine andere schien mir hier nicht passend.

    Ich habe folgendes Problem. Meine Webanwendung soll auf mobilen Geräten als Webapp ausgeführt werden. Unter Android ist dies kein Problem und funktioniert soweit sehr gut mittels eines einzigen meta-Tags.
    HTML-Code:
    <meta name="mobile-web-app-capable" content="yes">

    Unter iOS scheint sich das Ganze etwas schwieriger zu gestalten. Immerhin habe ich es hinbekommen mittels dieser meta-Tags die Webanwendung im "standalone" Modus im Safari zum Laufen zu bekommen.
    HTML-Code:
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="ApronFra">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    Das Problem was zunächst durch diese meta-Tags entstand war, dass sobald ein Link angeklickt wurde, der "standalone" Modus verlassen und die Webanwendung wieder im Safari ausgeführt wurde.
    Soweit so gut, Google ein wenig befragt und ein kleines Java-Script gefunden und eingesetzt, welches genau dieses Problem beheben soll.
    HTML-Code:
    // Mobile Safari in standalone mode
    if(("standalone" in window.navigator) && window.navigator.standalone){
    
        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
        var noddy, remotes = false;
    
        document.addEventListener('click', function(event) {
    
            noddy = event.target;
    
            // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
            while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
                noddy = noddy.parentNode;
            }
    
            if('href' in noddy && !'data-modal' in noddy && noddy.href.indexOf('https') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
            {
          alert(noddy);
                event.preventDefault();
                document.location.href = noddy.href;
            }
    
        },false);
    }
    Das Script funktioniert und erfüllt genau seinen Zweck mit einer Ausnahme:
    Ich nutze Bootstrap 4 und Modals. Genau diese werden jetzt aber nicht mehr angezeigt.
    Darauf hin habe ich eine kleine Änderung im Java-Script vorgenommen (&& !'data-modal' in noddy).

    HTML-Code:
    // Mobile Safari in standalone mode
    if(("standalone" in window.navigator) && window.navigator.standalone){
    
        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
        var noddy, remotes = false;
    
        document.addEventListener('click', function(event) {
    
            noddy = event.target;
    
            // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
            while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
                noddy = noddy.parentNode;
            }
    
            if('href' in noddy && !'data-modal' in noddy && noddy.href.indexOf('https') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
            {
          alert(noddy);
                event.preventDefault();
                document.location.href = noddy.href;
            }
    
        },false);
    }

    Diese Änderung führt zum Erfolg, aber auch dies wieder nur bedingt. Die Modals werden wieder geladen und angezeigt, aber beim Ausführen von Links wird der "standalone" Modus wieder verlassen.

    Hat jemand eine Idee wie ich meine Webanwendung auch unter iOS einwandfrei zum laufen bekomme?


    Vielen Dank vorab für Eure Mühe.


  • #2
    Siehe Dir mal auf der Seite https://gist.github.com/kylebarrow/1042026 den weiter unten stehenden Eintrag von khovanskiy 16.3.2018 an. Ob der das Problem löst, keine Ahnung, ich kann mich aber erinnern, dass es irgendwo am modal.target liegt und diesem m.W. ein # gepräfixt wird.

    Kommentar


    • #3
      Guten Morgen, also ich habe für mich die Lösung gefunden. Diese sieht wie folgt aus:

      HTML-Code:
      <meta name="apple-mobile-web-app-status-bar-style" content="black">
      <meta name="apple-mobile-web-app-title" content="ApronFra">
      <meta name="apple-mobile-web-app-capable" content="yes">
      <meta name="apple-touch-fullscreen" content="yes">
      <meta name="mobile-web-app-capable" content="yes">
      <link rel="apple-touch-icon" href="http://localhost/troeger/apronfra/images/apple_114x114.png">
      <link rel="apple-touch-startup-image" href="http://localhost/troeger/apronfra/images/apronfra-logo-neu.jpg">
      <link rel="icon" type="image/icon" sizes="16x16" href="http://localhost/troeger/apronfra/images/logo.ico">
      <script type="text/javascript" src="http://localhost/troeger/apronfra/js/elegant_admin/standalone.js?v.1.2" ></script>
      Hier das Script:

      HTML-Code:
      // Mobile Safari in standalone mode
      if(("standalone" in window.navigator) && window.navigator.standalone){
      
          // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
          var noddy, remotes = false;
      
          document.addEventListener('click', function(event) {
      
              noddy = event.target;
      
              // Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
              while(noddy.nodeName !== "A" && noddy.nodeName !== "HTML") {
                  noddy = noddy.parentNode;
              }
      
              if('href' in noddy && noddy.href.indexOf('https') !== -1 && (noddy.href.indexOf(document.location.host) !== -1 || remotes))
              {
                  event.preventDefault();
                  document.location.href = noddy.href;
              }
      
          },false);
      }

      Folgenden "Trick" sofern es wirklich einer ist, wird von mir angewandt:

      Für Modals einfach das "data-target" nochmals als "href" hinzufügen, somit werden die Modals auch aufgerufen:

      HTML-Code:
      <a class="af-tag-body float-left text-center" data-toggle="modal" data-target="#myModal'" href="#myModal">

      Soweit funktioniert jetzt die Webanwendung wie gewünscht auf iOS auch als Webapp.

      Kommentar

      Lädt...
      X