Examples of using the schema protocol to invoke apps and open apps using IFrame in iOS

In iOS, you need to tune up an app to use the schema protocol, which is native to iOS, and because the iOS system can't use its own browser kernel, so all browsers support it, unlike Android, Android can do its own kernel, But iOS doesn't.

There are two ways to open apps in your browser in iOS: Smart app Banner and schema protocol.

Smart App Banner

That is, through a meta tag, on the label to bring the app information, and open the behavior, such as: App-id, such as, code-like:

<meta name= "Apple-itunes-app" content= "App-id=myappstoreid, Affiliate-data=myaffiliatedata, App-argument=myURL" >

you can see the development document in detail:https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/ Safariwebcontent/promotingappswithappbanners/promotingappswithappbanners.html
Today Smart APP banner is not our main character, we are talking about schema

Use the schema URL to open the iOS APP

Schema is similar to custom URL protocol, we can open our own application through a custom protocol, such as:

myapplink://# such as Facebook's fb://# itunes itms-apps://# and SMS are similar sms://

The simplest way to open an app is through a link, as we write in HTML:

<a href= "myapplink://" > Open My App</a>

When users click on the link, they can open the corresponding app.

Bind Click event

But in fact, we are more in the case of binding events, such as doing a layer of what, can not blindly use a tag ah, so can be solved in two ways: Location.href and IFRAME.

The way to IFrame is common in development, but he also has some questions:

1. We don't have a good way to tell if the app is open.
2. will cause history changes
3. Because of the history changes, so some webview will have problems, such as: I check, open a page, if there is an IFRAME, choose to open in Safari, actually open an IFRAME page
4. If the page is leaking to the Android system, then the page will not open, such as the problem
5. If there is no app, the iOS safari will pop up a dialog box itself: Can't open the URL and so on

So now the question is: how to know that the IFRAME has opened an app, that is, to resolve the IFRAME open app callback.

Use an IFRAME to open an app in an iOS system

Clever you may think of, IFRAME the OnLoad event ah, but unfortunately, invalid! So we found the timer (setTimeout), through a timer, if within a period of time (such as 500ms), when clicked on the button (record time1), the page does not cut away (after the app, the page process will be interrupted), the process is interrupted, then the timer will be interrupted, This time should not trigger the timer, if the adjustment failed, then the timer will be triggered, we judge under a certain period if the page is not cut away, it is considered to be failed.

In addition through the timer trigger time timer2, do bad, judge whether too outrageous (cut away after the time should be longer than the timer actual timer 500ms):

Function openios (Url, callback)  {    if  (!url)  {         return;    }    var node  = document.createelement (' iframe ');    node.style.display =  ' none ';     var body = document.body;    var timer;     var clear = function (evt, istimeout)  {         (typeof callback=== ' function ')  &&  callback (istimeout);         if  (!node)  {             return;        }         node.onload = null;         Body.removechild (node);    &NBsp;    node = null;       };     var hide = function (e) {        cleartimeout (timer);         clear (E, false);    };     node.onload = clear;    node.src = url;     body.appendchild (node);     var now = +new date ();     //If the event fails, 1 seconds is set to null     timer = settimeout (function () {         var newtime = +new date ();           if (now-newtime>600) {             //because cut away, in cut back need to consume time              //so the timer even executes, but the time difference between the twoShould be with the 500ms have a larger access             //but the reality is not like this!             clear (Null, false);           }else{             clear (null, true);          }     }, 500);}

It looks like a good way to go, but the reality is always so cruel!

Different browser apps (including WebView), have their own in the background of the resident time, that is: if a browser after he was cut off, backstage resident 10s, then we set the timer 5s expires is futile, and 5s timer, user to empty and so on 5s! Interaction doesn't make you do that!

Finally we think of the pageshow and Pagehide events, that is, if the browser is cut to open the app, it should trigger the browser's Pagehide event, and from the app back to the browser, will trigger the Pageshow method.

However, the code test found that in UC, Chrome, Pagehide and Pageshow methods are not triggered, but are available in Safari.

Conclusion:

1. Invoking the schema URL with an IFRAME
2. Use the timer to determine whether or not it has been successfully adjusted over time
3. Use Pageshow and pagehide to assist the timer to make more detailed judgments
4. It is surprising that alert may not be ejected in the timer! The DOM in the back is 5. Execute, but alert doesn't pop up, it might have something to do with the alert implementation.
6. In the experiment I used two timers, because after switching back to the browser, sometimes timeout triggers before pagehide and pageshow
7. Calculate the timer actual execution time difference, also is not reliable

finally attached to the research code, is a more reliable method, although there is still a certain failure (third-party browser Pagehide and Pageshow does not trigger):

 <button id= "BTN" > Point me! Alert, will not pop </button>  <button id= "btn2" > Dot i dot me! Alert2, although there are alert and info,info execution, but alert does not eject </button>  <button id= "Btninfo" > Point me! Info can be </button>    $ (function () {    var  $info  = $ (' #info ');     function info (msg) {    var p = $ ('   ' +msg+ '   ');     $info. Append (P);   }    $ (' #btn '). On (' Click ',  function () {    openios (' baiduboxapp://',  function (t) {       if (t) {        alert (' Timeout or no  baidu app ');      }else{         alert (' invoke success ');       }    });   });   $ (' #btn2 '). On (' Click ',  function () {    openios (' baiduboxapp://',  function (t) {       if (t) {        info (' Timeout or no  baidu app2 ');         alert (' timeout or no  Baidu app2 ');      }else{         info (' Invoke success2 ');         alert (' Invoke success2 ');       }    });   });   $ (' #btninfo '). On (' Click ',  function () {    openios (' baiduboxapp://',  function (t) {       if (t) {        info (' timeout or no  Baidu app ');      }else{         info (' invoke success ');       }    });   });   });   Function openios (Url, callback)  {    if  (!url)  {         return;    }    var node  = document.createelement (' iframe ');    node.style.display =  ' none ';     var body = document.body;    var timer;     var clear = function (evt, istimeout)  {         (typeof callback=== ' function ')  &&  callback (istimeout);         window.removeeventlistener (' Pagehide ',  hide, true);         window.removeeventlistener (' Pageshow ',  hide, true);         if  (!node)  {            return;         }           Node.onload = null;        body.removechild (node);         node = null;      };     var hide = function (e) {         Cleartimeout (timer);         clear (E, false);     };    window.addeventlistener (' Pagehide ',  hide, true);     window.addeventlistener (' Pageshow ',  hide, true);     node.onload =  clear;    node.src = url;    body.appendchild (node);     var now&nbsP;= +new date ();     //If the event fails, 1 seconds is set to null     timer =  SetTimeout (function () {        timer = settimeout () {           var newtime = +new date ();           if (now-newtime>1300) {             clear (Null, false);           }else{            clear ( Null, true);          }           }, 1200);     }, 60);}

Examples of using the schema protocol to invoke apps and open apps using IFrame in iOS