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

Question

I've previously seen a 'solution' to this, but with a major flaw!

Here's what I'm trying to achieve;

I have a web-app that requires a user to login before it can be used. For a variety of reasons, I don't want it to be used in regular Safari, only via the Home Screen (aesthetically, it only really 'works' when in full screen).

So, when a user browses to the site, it should detect whether it's been opened via the home screen (in which case it shows the login page) or regular safari (in which case it shows a splash screen inviting the viewer to add it to their home screen).

I can successfully detect whether it's opened via the Home Screen or now (using window.navigator.standalone), however all the solutions I've come across involve redirecting the user to a different page if it's not opened via the home screen. The problem with this is that the user would be bookmarking (or adding to home screen) the wrong page. As far as I'm aware, there's no way to specify a different page to be added to the home screen.

I've tried the following, which doesn't seem to work;

/* 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')
        }

Edit : Based on @scunliffe's comment, I have now tried the following, which also doesn't work (jQuery is loaded before the script executes, so that shouldn't be the problem);

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

Answer 1

Can you alter your logic so that the login page is the default but if the user is on an iphone/iOS device? then they get a message if not running standalone?

$(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...
    }
});

Update:

Based on your updated sample, you just need to modify the code to call show/hide as a method.

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

and

<div id="logindiv">
  ...stuff to login here...
</div>
<div id="installdiv">
  ...note to install here...
</div>

Answer 2

You could try the hash-trick used in "Add to Home Screen" here is the example here

Basically it checks to see if there is a hash at the end of the URL, if it does then that means it was added to the home screen if it doesn't then it can run a script then add the hash to the url. So when they add the link to the home screen and the next time they open the web app it would have the hash on the screen. Its kind of a messy way of doing it but it works.