3

我以前见过对此的“解决方案”，但有一个重大缺陷！

这就是我想要实现的目标；

我有一个需要用户登录才能使用的网络应用程序。出于各种原因，我不希望它仅通过主屏幕在常规 Safari 中使用（从美学上讲，它仅在全屏时才真正“起作用”）。

因此，当用户浏览该站点时，它应该检测它是通过主屏幕（在这种情况下显示登录页面）还是常规 safari（在这种情况下显示一个启动屏幕，邀请查看者将其添加到他们的主屏幕）。

我可以成功检测到它是通过主屏幕打开还是现在（使用 window.navigator.standalone）打开，但是我遇到的所有解决方案都涉及将用户重定向到另一个页面，如果它没有通过主屏幕打开。这样做的问题是用户将书签（或添加到主屏幕）错误的页面。据我所知，没有办法指定要添加到主屏幕的不同页面。

我尝试了以下方法，但似乎不起作用；

/* Added to login page head */
$(document).ready()
        if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                initialize();
            }else{
                $('.container').load('/install.cfm')
            }
        }else{
            $('.container').load('/install.cfm')
        }

编辑：根据@scunliffe 的评论，我现在尝试了以下方法，这也不起作用（在脚本执行之前加载了jQuery，所以这不应该是问题）；

if (window.navigator.userAgent.indexOf('iPhone') != -1) {
            if (window.navigator.standalone == true) {
                $('#logindiv').show;
            }else{
                $('#installdiv').show;
            }
        }else{
            $('#installdiv').show;
        }
4

2 回答 2

8

你能改变你的逻辑，让登录页面成为默认页面，但如果用户在 iphone/iOS 设备上？如果不独立运行，他们会收到一条消息吗？

$(document).ready(function(){
    if(navigator.userAgent.indexOf('iPhone') != -1){//test for other iOS devices?
        if(window.navigator.standalone == true){
            //do stuff!
            initialize();
        } else {
            //show message telling user to add to their home screen...
        }
    } else {
        //show message that this must be run on device X/Y/Z...
    }
});

更新：

根据您更新的示例，您只需修改代码以将显示/隐藏作为方法调用。

$(document).ready(function(){
  if(window.navigator.userAgent.indexOf('iPhone') != -1){
    if(window.navigator.standalone == true){
      $('#logindiv').show();
    } else {
        $('#installdiv').show();
    }
  } else {
    $('#installdiv').show();
  }
});

和

<div id="logindiv">
  ...stuff to login here...
</div>
<div id="installdiv">
  ...note to install here...
</div>
于 2013-03-04T16:15:19.610 回答
2

您可以尝试hash-trick“添加到主屏幕”中使用的示例，这里是示例

基本上，它会检查 URL 末尾是否有哈希，如果有，则表示它已添加到主屏幕，如果没有，则它可以运行脚本，然后将哈希添加到 URL。因此，当他们将链接添加到主屏幕时，下次他们打开 Web 应用程序时，屏幕上就会显示哈希值。这是一种混乱的方式，但它确实有效。

于 2013-03-04T19:02:24.460 回答