Javascript iOS Web应用程序-仅在添加到主屏幕时显示内容？

我以前见过一个解决方案，但是有一个很大的缺陷

以下是我努力实现的目标

我有一个web应用程序，需要用户登录才能使用。出于各种原因，我不希望它仅通过主屏幕用于常规的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是在脚本执行之前加载的，所以这应该不是问题）

---

如果用户在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...
    }
});

更新：

根据更新的示例，您只需要修改代码以作为方法调用show/hide

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

及

…在这里登录的东西。。。
…注意在此处安装。。。

您可以尝试“添加到主屏幕”中使用的

哈希技巧

基本上，它会检查URL末尾是否有散列，如果有，则意味着它已添加到主屏幕。如果没有，则可以运行脚本，然后将散列添加到URL。因此，当他们将链接添加到主屏幕时，下一次打开web应用程序时，屏幕上会显示哈希值。这是一种混乱的操作方式，但它可以工作。
登录页面是默认页面（纯粹是因为它在用户未登录时显示-通过阻止它在Safari中使用，用户应该只能通过主屏幕进行登录）。我的问题是如何正确显示页面，也就是说，当用户在常规safari中查看时，我希望显示不同的内容，而在通过主屏幕查看时，只显示登录页面。我想我可以将上述代码与jQuery.load结合使用来实现这一点，但它似乎不起作用。我只是想澄清一下，我建议您只有一个物理页面。。。如果适用，它会显示登录信息。。。但如果不是从主屏幕启动，或者不是在iOS设备上启动，则显示通知。（但都是一样的物理页面）啊，我没想过那样做！我会试一试的。好吧，我已经这样试过了（原谅我可怜的JS，我还在找我的脚！）。设置2个带显示的div:none，一个带有登录表单，另一个是“splash”，提示用户添加到主屏幕。检测脚本应该显示相关的div，但是没有。if（window.navigator.userAgent.indexOf（'iPhone'）！=-1）{if（window.navigator.standalone==true）{$（'logindiv'）.show；}else{$（'installdiv'）.show；}}else{$（'installdiv'）.show；}谢谢！我丢失了$（文档）。准备好了吗。。。新手错误！谢谢你的帮助，非常感谢！可能是唯一的选择？谢谢分享。：）
$(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>