Example of using schema protocol in IOS to invoke app and open app using IFRAME _ios

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

There are two ways to open the App in the browser in iOS: Smart App Banner and schema protocol.

Smart App Banner

That is, a META tag with app information on the tag, and an open behavior such as App-id, code like:

Copy Code code as follows:

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

You can look at the development document: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ Promotingappswithappbanners/promotingappswithappbanners.html
Today, Smart APP banner is not our hero, we're talking about schemas.

Use the schema URL to open the iOS APP

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

Copy Code code as follows:

myapplink://
# like Facebook's
fb://
# itunes's
itms-apps://
# and texting is like a class
sms://

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

Copy Code code as follows:

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

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

Bind Click event

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

The method of IFRAME is commonly used in development, but he also has some questions:

1. We don't have a good way to determine if the app is open.
2. can cause history change
3. Because caused 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, the actual open is an IFRAME page
4. If the page is leaking to the Android system, then there will be the page can not open, and so on
5. If there is no app, and the unsuccessful tuning, iOS Safari will itself pop-up a dialog box: can not open the Web site and other tips

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

Open App in iOS system using IFRAME

Clever you may think of, IFrame of the onload incident ah, but sorry to say, invalid! So we found the timer (settimeout), through a timer, if over a period of time (such as 500ms), when clicked the button (record time1), the page did not cut away (after the app, the page process will be interrupted), the process is interrupted, then the timer will also be interrupted, This time should not trigger the timer, if the adjustment of failure, then the timer will trigger, we judge that in a certain period if the page has not been cut away, think that the adjustment failed.

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

Copy Code code as follows:

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);
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) {
It takes time to cut back because it's been cut off.
So the timer even executes, but the time difference between the two should be greater than the 500ms
But that's not true!
Clear (null, false);
}else{
Clear (null, true);
}
}, 500);
}

It seems that the method is very reliable, but the reality is always so cruel!

Different browser app (including WebView), have their own in the background of the resident time, that is: If a browser he was cut away after the background resident 10s, then we set the timer 5s expired is futile, and 5s timer, users want to empty and so 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 Pagehide event, and from the app back to the browser, it will trigger the Pageshow method.

However, the code test found that in UC, Chrome, does not trigger the Pagehide and Pageshow method, but in Safari can.

Conclusion:

1. Invoke schema URL with IFRAME
2. Use the timer to determine whether to adjust the success over a period of 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 behind is 5. executed, but alert did not eject, it might have something to do with the implementation of alert.
6. In the experiment I used two timers, because after the browser is cut back, sometimes timeout trigger to pagehide and Pageshow before
7. Calculate Timer actual execution time difference, also is not reliable

Finally attached to the study of the code, is a more reliable method, although there is a certain failure (Third-party browser pagehide and pageshow does not trigger):

Copy Code code as follows:

<p><button id= "btn" > Dot i dot me! Alert, does not eject </button></p>
<p><button id= "btn2" > Dot i dot me! Alert2, although there are alert and info,info execution, but alert does not eject </button></p>
<p><button id= "Btninfo" > Dot i dot me! Info can be </button></p>

$ (function () {

var $info = $ (' #info ');

function info (msg) {
var p = $ (' <p> ' +msg+ ' </p> ');
$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 = +new Date ();
If the event fails, 1 seconds is set to null
Timer = settimeout (function () {
Timer = settimeout (function () {
var newtime = +new Date ();
if (now-newtime>1300) {
Clear (null, false);
}else{
Clear (null, true);
}

}, 1200);
}, 60);
}