时间戳

首页 > 解决方案 > 添加到页面上的主屏幕弹出窗口 - 打开另一个 URL

javascript - 添加到页面上的主屏幕弹出窗口 - 打开另一个 URL

问题描述

有没有办法让 webapp 打开另一个链接而不是添加的链接。例如。弹出窗口出现在 www.thisurl.com 上。但是..当添加到主屏幕时，我希望它打开 www.thisurl.com/subpage

我们希望他们添加到客户门户的主屏幕，但是当点击应用程序图标时，我们希望他们进入登录页面。

有没有办法可以放入一些javascript？到目前为止，我一直在互联网上搜索，但找不到答案（我不是代码忍者 :-)） Ps。它在 iPhone 上。

这是我的html代码：

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="../laaneovervaagning150x150.png">
<meta name="apple-mobile-web-app-title" content="Overvågning">

<link rel="stylesheet" type="text/css" href="../addtohomescreen/style/add2home.css" />


<!-- add to homescreen funktionalitet -->
    <script type="text/javascript">
        var addToHomeConfig = {
            lifespan: 20000,
            expire: 43200,
            touchIcon: true
        };
    </script>

您可以在此处找到附加的 Javascript 代码。

    /*!
 * Add to Homescreen v2.0.7 ~ Copyright (c) 2013 Matteo Spinelli, http://cubiq.org
 * Released under MIT license, http://cubiq.org/license
 */
var addToHome = (function (w) {
    var nav = w.navigator,
        isIDevice = 'platform' in nav && (/iphone|ipod|ipad/gi).test(nav.platform),
        isIPad,
        isRetina,
        isSafari,
        isStandalone,
        OSVersion,
        startX = 0,
        startY = 0,
        lastVisit = 0,
        isExpired,
        isSessionActive,
        isReturningVisitor,
        balloon,
        overrideChecks,

        positionInterval,
        closeTimeout,

        options = {
            autostart: true,            // Automatically open the balloon
            returningVisitor: false,    // Show the balloon to returning visitors only (setting this to true is HIGHLY RECCOMENDED)
            animationIn: 'drop',        // drop || bubble || fade
            animationOut: 'fade',       // drop || bubble || fade
            startDelay: 2000,           // 2 seconds from page load before the balloon appears
            lifespan: 15000,            // 15 seconds before it is automatically destroyed
            bottomOffset: 14,           // Distance of the balloon from bottom
            expire: 0,                  // Minutes to wait before showing the popup again (0 = always displayed)
            message: '',                // Customize your message or force a language ('' = automatic)
            touchIcon: false,           // Display the touch icon
            arrow: true,                // Display the balloon arrow
            hookOnLoad: true,           // Should we hook to onload event? (really advanced usage)
            closeButton: true,          // Let the user close the balloon
            iterations: 100             // Internal/debug use
        },

        intl = {
            ar:    '<span dir="rtl">قم بتثبيت هذا التطبيق على <span dir="ltr">%device:</span>انقر&lt;span dir="ltr">%icon</span> ØŒ<strong>ثم اضÙÙ‡ الى الشاشة الرئيسية.</strong></span>',
            ca_es: 'Per instal·lar aquesta aplicació al vostre %device premeu %icon i llavors <strong>Afegir a pantalla d\'inici</strong>.',
            cs_cz: 'Pro instalaci aplikace na Váš %device, stiskněte %icon a v nabídce <strong>Přidat na plochu</strong>.',
            da_dk: 'Tryk på %icon og derefter <strong>Føj til hjemmeskærm</strong> for nem adgang til låneovervågning.',
            de_de: 'Installieren Sie diese App auf Ihrem %device: %icon antippen und dann <strong>Zum Home-Bildschirm</strong>.',
            el_gr: 'Εγκαταστήσετε αυτήν την ΕφαÏμογή στήν συσκευή σας %device: %icon μετά πατάτε <strong>Î Ïοσθήκη σε ΑφετηÏία&lt;/strong>.',
            /*en_us: 'Install this web app on your %device: tap %icon and then <strong>Add to Home Screen</strong>.',*/
            en_us: 'Tryk på %icon og derefter <strong>Føj til hjemmeskærm</strong> for nem adgang til låneovervågning.',
            es_es: 'Para instalar esta app en su %device, pulse %icon y seleccione <strong>Añadir a pantalla de inicio</strong>.',
            fi_fi: 'Asenna tämä web-sovellus laitteeseesi %device: paina %icon ja sen jälkeen valitse <strong>Lisää Koti-valikkoon</strong>.',
            fr_fr: 'Ajoutez cette application sur votre %device en cliquant sur %icon, puis <strong>Ajouter à l\'écran d\'accueil</strong>.',
            he_il: '<span dir="rtl">התקן ×פליקציה זו על ×”-%device שלך: הקש %icon ו××– <strong>הוסף למסך הבית</strong>.</span>',
            hr_hr: 'Instaliraj ovu aplikaciju na svoj %device: klikni na %icon i odaberi <strong>Dodaj u poÄetni zaslon</strong>.',
            hu_hu: 'Telepítse ezt a web-alkalmazást az Ön %device-jára: nyomjon a %icon-ra majd a <strong>Főképernyőhöz adás</strong> gombra.',
            it_it: 'Installa questa applicazione sul tuo %device: premi su %icon e poi <strong>Aggiungi a Home</strong>.',
            ja_jp: 'ã“ã®ã‚¦ã‚§ãƒ–アプリをã‚ãªãŸã®%deviceã«ã‚¤ãƒ³ã‚¹ãƒˆãƒ¼ãƒ«ã™ã‚‹ã«ã¯%iconをタップã—ã¦&lt;strong>ホーム画é¢ã«è¿½åŠ </strong>ã‚’é¸ã‚“ã§ãã ã•ã„。',
            ko_kr: '%deviceì— ì›¹ì•±ì„ ì„¤ì¹˜í•˜ë ¤ë©´ %iconì„ í„°ì¹˜ 후 "í™ˆí™”ë©´ì— ì¶”ê°€"를 ì„ íƒí•˜ì„¸ìš”',
            nb_no: 'Installer denne appen på din %device: trykk på %icon og deretter <strong>Legg til på Hjem-skjerm</strong>',
            nl_nl: 'Installeer deze webapp op uw %device: tik %icon en dan <strong>Voeg toe aan beginscherm</strong>.',
            pl_pl: 'Aby zainstalować tę aplikacje na %device: naciśnij %icon a następnie <strong>Dodaj jako ikonę&lt;/strong>.',
            pt_br: 'Instale este aplicativo em seu %device: aperte %icon e selecione <strong>Adicionar à Tela Inicio</strong>.',
            pt_pt: 'Para instalar esta aplicação no seu %device, prima o %icon e depois o <strong>Adicionar ao ecrã principal</strong>.',
            ru_ru: 'УÑтановите Ñто веб-приложение на ваш %device: нажмите %icon, затем <strong>Добавить в «Домой»&lt;/strong>.',
            sv_se: 'Lägg till denna webbapplikation på din %device: tryck på %icon och därefter <strong>Lägg till på hemskärmen</strong>.',
            th_th: 'ติดตั้งเว็บà¹à¸­à¸žà¸¯ นี้บน %device ของคุณ: à¹à¸•à¸° %icon à¹à¸¥à¸° <strong>เพิ่มที่หน้าจอโฮม&lt;/strong>',
            tr_tr: 'Bu uygulamayı %device\'a eklemek için %icon simgesine sonrasında <strong>Ana Ekrana Ekle</strong> düğmesine basın.',
            uk_ua: 'Ð’Ñтановіть цей веб Ñайт на Ваш %device: натиÑніть %icon, а потім <strong>Ðа початковий екран&lt;/strong>.',
            zh_cn: '您å¯ä»¥å°†æ­¤åº”用程å¼å®‰è£…到您的 %device 上。请按 %icon 然åŽç‚¹é€‰&lt;strong>æ·»åŠ è‡³ä¸»å±å¹•&lt;/strong>。',
            zh_tw: '您å¯ä»¥å°‡æ­¤æ‡‰ç”¨ç¨‹å¼å®‰è£åˆ°æ‚¨çš„ %device 上。請按 %icon 然後點é¸&lt;strong>åŠ å…¥ä¸»ç•«é¢èž¢å¹•&lt;/strong>。'
        };

    function init () {
        // Preliminary check, all further checks are performed on iDevices only
        if ( !isIDevice ) return;

        var now = Date.now(),
            i;

        // Merge local with global options
        if ( w.addToHomeConfig ) {
            for ( i in w.addToHomeConfig ) {
                options[i] = w.addToHomeConfig[i];
            }
        }
        if ( !options.autostart ) options.hookOnLoad = false;

        isIPad = (/ipad/gi).test(nav.platform);
        isRetina = w.devicePixelRatio && w.devicePixelRatio > 1;
        isSafari = (/Safari/i).test(nav.appVersion) && !(/CriOS/i).test(nav.appVersion);
        isStandalone = nav.standalone;
        OSVersion = nav.appVersion.match(/OS (\d+_\d+)/i);
        OSVersion = OSVersion && OSVersion[1] ? +OSVersion[1].replace('_', '.') : 0;

        lastVisit = +w.localStorage.getItem('addToHome');

        isSessionActive = w.sessionStorage.getItem('addToHomeSession');
        isReturningVisitor = options.returningVisitor ? lastVisit && lastVisit + 28*24*60*60*1000 > now : true;

        if ( !lastVisit ) lastVisit = now;

        // If it is expired we need to reissue a new balloon
        isExpired = isReturningVisitor && lastVisit <= now;

        if ( options.hookOnLoad ) w.addEventListener('load', loaded, false);
        else if ( !options.hookOnLoad && options.autostart ) loaded();
    }

    function loaded () {



        w.removeEventListener('load', loaded, false);

        if ( !isReturningVisitor ) w.localStorage.setItem('addToHome', Date.now());
        else if ( options.expire && isExpired ) w.localStorage.setItem('addToHome', Date.now() + options.expire * 60000);

        if ( !overrideChecks && ( !isSafari || !isExpired || isSessionActive || isStandalone || !isReturningVisitor ) ) return;

        var touchIcon = '',
            platform = nav.platform.split(' ')[0],
            language = nav.language.replace('-', '_');

        balloon = document.createElement('div');
        balloon.id = 'addToHomeScreen';
        balloon.style.cssText += 'left:-9999px;-webkit-transition-property:-webkit-transform,opacity;-webkit-transition-duration:0;-webkit-transform:translate3d(0,0,0);position:' + (OSVersion < 5 ? 'absolute' : 'fixed');

        // Localize message
        if ( options.message in intl ) {        // You may force a language despite the user's locale
            language = options.message;
            options.message = '';
        }
        if ( options.message === '' ) {         // We look for a suitable language (defaulted to en_us)
            options.message = language in intl ? intl[language] : intl['en_us'];
        }

        if ( options.touchIcon ) {
            touchIcon = isRetina ?
                document.querySelector('head link[rel^=apple-touch-icon][sizes="114x114"],head link[rel^=apple-touch-icon][sizes="144x144"],head link[rel^=apple-touch-icon]') :
                document.querySelector('head link[rel^=apple-touch-icon][sizes="57x57"],head link[rel^=apple-touch-icon]');

            if ( touchIcon ) {
                touchIcon = '<span style="background-image:url(' + touchIcon.href + ')" class="addToHomeTouchIcon"></span>';
            }
        }

        balloon.className = (isIPad ? 'addToHomeIpad' : 'addToHomeIphone') + (touchIcon ? ' addToHomeWide' : '');
        balloon.innerHTML = touchIcon +
            options.message.replace('%device', platform).replace('%icon', OSVersion >= 4.2 ? '<span class="addToHomeShare"></span>' : '<span class="addToHomePlus">+</span>') +
            (options.arrow ? '<span class="addToHomeArrow"></span>' : '') +
            (options.closeButton ? '<span class="addToHomeClose">\u00D7</span>' : '');

        document.body.appendChild(balloon);

        // Add the close action
        if ( options.closeButton ) balloon.addEventListener('click', clicked, false);

        if ( !isIPad && OSVersion >= 6 ) window.addEventListener('orientationchange', orientationCheck, false);

        setTimeout(show, options.startDelay);
    }

    function show () {
        var duration,
            iPadXShift = 208;

        // Set the initial position
        if ( isIPad ) {
            if ( OSVersion < 5 ) {
                startY = w.scrollY;
                startX = w.scrollX;
            } else if ( OSVersion < 6 ) {
                iPadXShift = 160;
            }

            balloon.style.top = startY + options.bottomOffset + 'px';
            balloon.style.left = startX + iPadXShift - Math.round(balloon.offsetWidth / 2) + 'px';

            switch ( options.animationIn ) {
                case 'drop':
                    duration = '0.6s';
                    balloon.style.webkitTransform = 'translate3d(0,' + -(w.scrollY + options.bottomOffset + balloon.offsetHeight) + 'px,0)';
                    break;
                case 'bubble':
                    duration = '0.6s';
                    balloon.style.opacity = '0';
                    balloon.style.webkitTransform = 'translate3d(0,' + (startY + 50) + 'px,0)';
                    break;
                default:
                    duration = '1s';
                    balloon.style.opacity = '0';
            }
        } else {
            startY = w.innerHeight + w.scrollY;

            if ( OSVersion < 5 ) {
                startX = Math.round((w.innerWidth - balloon.offsetWidth) / 2) + w.scrollX;
                balloon.style.left = startX + 'px';
                balloon.style.top = startY - balloon.offsetHeight - options.bottomOffset + 'px';
            } else {
                balloon.style.left = '50%';
                balloon.style.marginLeft = -Math.round(balloon.offsetWidth / 2) - ( w.orientation%180 && OSVersion >= 6 ? 40 : 0 ) + 'px';
                balloon.style.bottom = options.bottomOffset + 'px';
            }

            switch (options.animationIn) {
                case 'drop':
                    duration = '1s';
                    balloon.style.webkitTransform = 'translate3d(0,' + -(startY + options.bottomOffset) + 'px,0)';
                    break;
                case 'bubble':
                    duration = '0.6s';
                    balloon.style.webkitTransform = 'translate3d(0,' + (balloon.offsetHeight + options.bottomOffset + 50) + 'px,0)';
                    break;
                default:
                    duration = '1s';
                    balloon.style.opacity = '0';
            }
        }

        balloon.offsetHeight;   // repaint trick
        balloon.style.webkitTransitionDuration = duration;
        balloon.style.opacity = '1';
        balloon.style.webkitTransform = 'translate3d(0,0,0)';
        balloon.addEventListener('webkitTransitionEnd', transitionEnd, false);

        closeTimeout = setTimeout(close, options.lifespan);
    }

    function manualShow (override) {
        if ( !isIDevice || balloon ) return;

        overrideChecks = override;
        loaded();
    }

    function close () {
        clearInterval( positionInterval );
        clearTimeout( closeTimeout );
        closeTimeout = null;

        // check if the popup is displayed and prevent errors
        if ( !balloon ) return;

        var posY = 0,
            posX = 0,
            opacity = '1',
            duration = '0';

        if ( options.closeButton ) balloon.removeEventListener('click', clicked, false);
        if ( !isIPad && OSVersion >= 6 ) window.removeEventListener('orientationchange', orientationCheck, false);

        if ( OSVersion < 5 ) {
            posY = isIPad ? w.scrollY - startY : w.scrollY + w.innerHeight - startY;
            posX = isIPad ? w.scrollX - startX : w.scrollX + Math.round((w.innerWidth - balloon.offsetWidth)/2) - startX;
        }

        balloon.style.webkitTransitionProperty = '-webkit-transform,opacity';

        switch ( options.animationOut ) {
            case 'drop':
                if ( isIPad ) {
                    duration = '0.4s';
                    opacity = '0';
                    posY += 50;
                } else {
                    duration = '0.6s';
                    posY += balloon.offsetHeight + options.bottomOffset + 50;
                }
                break;
            case 'bubble':
                if ( isIPad ) {
                    duration = '0.8s';
                    posY -= balloon.offsetHeight + options.bottomOffset + 50;
                } else {
                    duration = '0.4s';
                    opacity = '0';
                    posY -= 50;
                }
                break;
            default:
                duration = '0.8s';
                opacity = '0';
        }

        balloon.addEventListener('webkitTransitionEnd', transitionEnd, false);
        balloon.style.opacity = opacity;
        balloon.style.webkitTransitionDuration = duration;
        balloon.style.webkitTransform = 'translate3d(' + posX + 'px,' + posY + 'px,0)';
    }


    function clicked () {
        w.sessionStorage.setItem('addToHomeSession', '1');
        isSessionActive = true;
        close();
    }

    function transitionEnd () {
        balloon.removeEventListener('webkitTransitionEnd', transitionEnd, false);

        balloon.style.webkitTransitionProperty = '-webkit-transform';
        balloon.style.webkitTransitionDuration = '0.2s';

        // We reached the end!
        if ( !closeTimeout ) {
            balloon.parentNode.removeChild(balloon);
            balloon = null;
            return;
        }

        // On iOS 4 we start checking the element position
        if ( OSVersion < 5 && closeTimeout ) positionInterval = setInterval(setPosition, options.iterations);
    }

    function setPosition () {
        var matrix = new WebKitCSSMatrix(w.getComputedStyle(balloon, null).webkitTransform),
            posY = isIPad ? w.scrollY - startY : w.scrollY + w.innerHeight - startY,
            posX = isIPad ? w.scrollX - startX : w.scrollX + Math.round((w.innerWidth - balloon.offsetWidth) / 2) - startX;

        // Screen didn't move
        if ( posY == matrix.m42 && posX == matrix.m41 ) return;

        balloon.style.webkitTransform = 'translate3d(' + posX + 'px,' + posY + 'px,0)';
    }

    // Clear local and session storages (this is useful primarily in development)
    function reset () {
        w.localStorage.removeItem('addToHome');
        w.sessionStorage.removeItem('addToHomeSession');
    }

    function orientationCheck () {
        balloon.style.marginLeft = -Math.round(balloon.offsetWidth / 2) - ( w.orientation%180 && OSVersion >= 6 ? 40 : 0 ) + 'px';
    }

    // Bootstrap!
    init();

    return {
        show: manualShow,
        close: close,
        reset: reset
    };
})(window);

标签： javascriptweb-applicationshomescreen

解决方案

这个插件似乎只是创建一个弹出窗口，提示用户使用本机菜单选项将当前页面添加到主屏幕。它实际上并没有将页面添加到用户的主屏幕本身，因此您无法自定义 url。

在 Android 上有一个替代方案（希望很快会出现其他平台），那就是让您的网站成为一个渐进式 Web 应用程序(PWA)。如果 Android 检测到您的网站是 PWA，它可以自动显示确实将页面添加到用户主屏幕的提示。

作为构建 PWA 的一部分，您将创建manifest.json文件。该文件有一个设置start_url，您可以使用它来指定将从主屏幕图标加载的页面。

推荐阅读