Ankündigung

Einklappen
Keine Ankündigung bisher.

Webseite als App in Smarthone einbinden, bei Linkklick öffnet sich der Browser

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

  • Webseite als App in Smarthone einbinden, bei Linkklick öffnet sich der Browser

    Hallo,

    ich habe eine Webseite für mein Smarthome erstellt die ich per Tablet und Smartphone bedienen möchte. Wie eine native app.
    Ich rufe sie also im Browser vom Smartphone auf und tu den Link auf den Home-Bildschrim, also als "App".

    Wenn ich die app dann aufrufe ist sie im Vollbild, also keine Browserleiste.
    Gehe ich dann auf einen Link (a href="blabla") dann öffnet sich der Browser Safari... Also im normalen Modus.

    Dann dachte ich ich versuche die Links mit Javascript document.location zu landen. Klappt auch, aber leider nur beim ersten Mal. Wenn ich dann wieder auf das Menü klicke (egal wohin) ruft er wieder einen neuen Browser im normalen Modus auf.

    Kann ich das irgendwie unterbinden?

    Hier der Head:

    PHP-Code:
    <head>    
        <
    meta charset="ISO-8859-1">
        <
    meta rel="<TMPL_VAR main_path>manifest.json">    
        <
    meta name="apple-mobile-web-app-capable" content="yes" />
        <
    meta name="mobile-web-app-capable" content="yes">
        <
    meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <
    meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
        <
    meta name="robots" content="noindex, nofollow" />    
        <
    title><TMPL_VAR title><TMPL_VAR site_title></title>
        <
    link rel="apple-touch-icon" href="<TMPL_VAR main_path>img/iconname3.png" />
        <
    link rel="apple-touch-startup-image" href="<TMPL_VAR main_path>img/startup.png" />
        <!--<
    link href="<TMPL_VAR main_path>img/favicon.ico" rel="shortcut icon" type="image/x-icon" />   -->
        <
    link rel="stylesheet" href="<TMPL_VAR main_path>css/style.css" type="text/css" media="screen" />    
        <
    link rel="stylesheet" href="<TMPL_VAR main_path>css/bootstrap.css" type="text/css" media="screen" />    
        <
    link rel="stylesheet" href="<TMPL_VAR main_path>css/bootstrap-switch.css" type="text/css" media="screen" />
        <
    link rel="stylesheet" href="<TMPL_VAR main_path>css/bootstrap-slider.min.css" type="text/css" media="screen" />
        <
    link rel="stylesheet" href="<TMPL_VAR main_path>css/custom.css" type="text/css" media="screen" />
      </
    head
    Menü:
    PHP-Code:
    <div id="sidebar">          
          <
    ul style="display: block;">
            <
    li class="<TMPL_IF dashboard>now</TMPL_IF>"><a href="#" data-call-url="<TMPL_VAR main_path>"><class="icon-display"></i><span>Dashboard</span></a></li>
            <
    li class="submenu <TMPL_IF smarthome>now</TMPL_IF>"><a href="#"><class="icon-home"></i><span>Smarthome</span></a>
              <
    ul>
                <
    li><a href="#" data-call-url="smarthome/jalosie"><class="icon-stack"></i><span>Jalosie</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/steackdosen"><class="icon-power-cord"></i><span>Steckdosen</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/musik"><class="icon-music"></i><span>Musik</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/licht"><class="icon-idea"></i><span>Licht</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/klima"><class="icon-spinner9"></i><span>Klima</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/statistiken"><class="icon-stats-bars"></i><span>Statistiken</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/wecker"><class="icon-alarm"></i><span>Wecker</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/einstellungen"><class="icon-equalizer2"></i><span>Einstellungen</span></a></li>
                <
    li><a href="#" data-call-url="<TMPL_VAR main_path>smarthome/alexa"><class="icon-alexa"></i><span>Alexa</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/fhem"><class="icon-fhem"></i><span>FHEM</span></a></li>
                <
    li><a href="#" data-call-url="smarthome/rasp"><class="icon-rasp"></i><span>Raspberry Pi</span></a></li>    
              </
    ul>
            </
    li>          
            <
    li class="<TMPL_IF kalender>now</TMPL_IF>"><a href="#" data-call-url="<TMPL_VAR main_path>kalender"><class="icon-calendar"></i><span>Kalender</span></a></li>
            <
    li class="<TMPL_IF kontakte>now</TMPL_IF>"><a href="#" data-call-url="kontakte"><class="icon-users"></i><span>Kontakte</span></a></li>
            <
    li class="<TMPL_IF webdesign>now</TMPL_IF>"><a href="#" data-call-url="webdesign"><class="icon-office"></i><span>Webdesign</span></a></li>
            <
    li class="<TMPL_IF kontobuchfuehrung>now</TMPL_IF>"><a href="#" data-call-url="kontobuchfuehrung"><class="icon-euro"></i><span>Kontobuchführung</span></a></li>
          </
    ul>            
        </
    div
    Javascript jquery:
    PHP-Code:
    $('body').on('click''#sidebar a', function() {
        var 
    callurl = $(this).attr('data-call-url');
        if (
    typeof callurl !== typeof undefined) {
          
    alert(callurl);
          
    document.location callurl;
        }
      }); 
    Hat wer eine Idee?
    Wie macht ihr das?

    PS: <TMPL_IF ></TMPL_IF> etc. sind Perl bedingte Plathalter fürs Template.

    Danke.

    Gruß

    Edit: Beim Linkaufruf über document.location hat er wohl in den href="#" die Aufgerufene Adresse in document.location geschrieben. Und dann hat er natürlich wieder einen Browser im normalen Modus geöffnet. Habe jetzt die Links (a), die ja euch durch javascript gesteuert werden durch divs ersetzt, nun gehts.

    Gruß
    Zuletzt geändert von Testie; 21.04.2018, 15:22.

homepage-forum.de - Hilfe für Webmaster! Statistiken

Einklappen

Themen: 56.443   Beiträge: 428.375   Mitglieder: 27.848   Aktive Mitglieder: 64
Willkommen an unser neuestes Mitglied, spartacus99.

Online-Benutzer

Einklappen

552 Benutzer sind jetzt online. Registrierte Benutzer: 2, Gäste: 550.

Mit 1.625 Benutzern waren am 17.03.2018 um 18:52 die meisten Benutzer gleichzeitig online.

Die neuesten Themen

Einklappen

  • Andre1
    Startseite Beispiel Design
    Hallo an alle,

    soweit ist meine Startseite für mein Beispiel Design fertig. Es ist auch mobil eingerichtet,
    da es eine Flexbox ist geht das doch recht gut, nur der IE11 brauchte wieder eine Extrawurst.

    Ich möchte euch bitten die Seite anzuschauen und mir mitzuteilen,...
    Heute, 15:53
  • basti1012
    Antwort auf Gleiche Höhe für Sidebar und Content-Divs , aber wie ?
    du solltest die Seite auf Flexbox aumbauen. Dann sind solche Sachen wie float und padding-bottom:700px; nicht mehr nötig.
    Das Flexbox system erleichtert dir einiges

    Ich habe mal den mitleren Bereich Flexbox gegeben, da siehst du das es jetzt immer gleich hoch ist.
    https://c...
    Heute, 15:08
  • helmchen
    Antwort auf Umreifungsgerät
    Hallo Karl!
    Die erste Frage dürfte sein wie oft Du es verwendest. Da gibt es riesen Preisunterschiede.
    Ich nutze das Zapak ZP-93 und bin damit sehr zufrieden.
    LG helmchen
    Heute, 10:41
  • helmchen
    Antwort auf Wo könnte ich mich nach einem Automower umsehen?
    Hallo!
    Danke für den Link zum Video. Bin auch gerade auf der Suche und da war es sehr hilfreich.
    LG
    Heute, 10:18
  • Atlan
    Antwort auf smooth scrolling
    Genau, wie oben, in JQuery! Aber ich will kein JQuery mehr ! (schlechte Erfahrung). Darum suche ich auch smooth scroll to top & Anker in same CSS or JavaScript.Habe mal bei codepen einen Freund gefragt, der meinte da würde es Probleme geben ? Welche ? Keine Ahnung. Tja, such mer weider (LOL)...
    23.06.2019, 16:50
SimpleSite

Die neuesten Beiträge

Einklappen

  • Andre1
    Startseite Beispiel Design
    Hallo an alle,

    soweit ist meine Startseite für mein Beispiel Design fertig. Es ist auch mobil eingerichtet,
    da es eine Flexbox ist geht das doch recht gut, nur der IE11 brauchte wieder eine Extrawurst.

    Ich möchte euch bitten die Seite anzuschauen und mir mitzuteilen,...
    Heute, 15:53
  • Bernhard
    Gleiche Höhe für Sidebar und Content-Divs , aber wie ?
    Sidebar und Content auf gleiche Höhe bringen

    Hallo,

    nachdem ich endlich Text UND Fotos in meinen Divs responsiv so unterbringen kann, dass sie nicht mehr beim Zusammenschieben des Browserfensters aus dem Rahmen geschoben werden (Danke für Eure Hilfe dabei), habe ich noch...
    14.06.2019, 17:53
  • basti1012
    Antwort auf Gleiche Höhe für Sidebar und Content-Divs , aber wie ?
    du solltest die Seite auf Flexbox aumbauen. Dann sind solche Sachen wie float und padding-bottom:700px; nicht mehr nötig.
    Das Flexbox system erleichtert dir einiges

    Ich habe mal den mitleren Bereich Flexbox gegeben, da siehst du das es jetzt immer gleich hoch ist.
    https://c...
    Heute, 15:08
  • admin
    Umreifungsgerät
    Hier eine weiter Frage zum Thema Pakete packen und verschicken:

    Wer nutzt ein Umreifungsgerät? Und zwar welches, und wie zufrieden seid ihr damit?

    Gruß
    Karl
    19.06.2019, 19:24
  • helmchen
    Antwort auf Umreifungsgerät
    Hallo Karl!
    Die erste Frage dürfte sein wie oft Du es verwendest. Da gibt es riesen Preisunterschiede.
    Ich nutze das Zapak ZP-93 und bin damit sehr zufrieden.
    LG helmchen
    Heute, 10:41
  • helmchen
    Antwort auf Wo könnte ich mich nach einem Automower umsehen?
    Hallo!
    Danke für den Link zum Video. Bin auch gerade auf der Suche und da war es sehr hilfreich.
    LG
    Heute, 10:18
  • Atlan
    smooth scrolling
    Freunde, brauche eine Rat oder Tipp.
    Folgendes:
    dieser JS code bringt mir ein smooth scrolling für die one-page, von rechts unten zum "top".
    (Also normales crolling für eine Seite)
    ( OK es ist JQuery, dient nur als Beispiel zum Testen)

    (function($) {...
    17.06.2019, 09:34
  • Atlan
    Antwort auf smooth scrolling
    Genau, wie oben, in JQuery! Aber ich will kein JQuery mehr ! (schlechte Erfahrung). Darum suche ich auch smooth scroll to top & Anker in same CSS or JavaScript.Habe mal bei codepen einen Freund gefragt, der meinte da würde es Probleme geben ? Welche ? Keine Ahnung. Tja, such mer weider (LOL)...
    23.06.2019, 16:50
  • steffle
    Antwort auf Soziale Netze und ihr Nutzen
    Nein! Aber darum geht es auch nicht. Lies dir mal das durch. Social Media und Networking ist ein Trend und wer nicht mitmacht, bleibt zurück....
    23.06.2019, 16:04
  • Andre1
    Problem mit Flaxbox
    Hallo an alle,

    ich hebe ein Problem mit einer Einstellung, einmal bei der Flexbox, da wollte ich eine Zweite,
    aber jetzt gehen die Links bei den oberen Boxen nicht mehr.
    Könnte mir jemand helfen und in die HTML und CSS schauen und mir bei den Fehlern helfen? Danke
    ...
    21.06.2019, 23:51
Lädt...
X