Hybrid app development, H5 page invoke iOS native app interface

Hybrid app development, the front-end development H5 page, will inevitably pull in the compatibility, in the page compatibility colleagues, will have some data interaction with the native app;

Hybrid app development, Android compatibility is to say, Android use is the Chrome browser core, is already very good compatibility H5 page, and the operating mechanism is able to run synchronously, but iOS is not so easy;

I'm not talking about Android-compatible issues, just talking about iOS.

Problem 1:h5 Call iOS interface, iOS need to initialize, JS code only run once on ISO

Solve:

I use the H5 page which is angular frame

var ua = navigator.userAgent.toLowerCase ();         if (/iphone|ipad|ipod/. Test (UA)) {            $rootScope. $on ("$locationChangeSuccess",function() {                parent.location.reload ();            })        }

It means that every time the HH5 page is loaded successfully, it is refreshed once;

Problem 2:ios is initialized only once, this is due to the internal mechanism of iOS itself, iOS execution code is stored in the cache once, but JS needs to be executed again, otherwise the function can not be realized;

Solution: ISO initialization is performed only once, which is the mechanism of iOS itself and cannot be changed;

Call other interfaces, can only be executed in the function of the first initialization, that is, each JS file can only have one iOS initialization, and other about the need to initialize the operation of the things are written in the initialization function;

function Connectwebviewjavascriptbridge (callback) {if (window.                    Webviewjavascriptbridge) {callback (Webviewjavascriptbridge)} else { Document.addeventlistener (' Webviewjavascriptbridgeready ', function () {Callback (Webviewjavascript Bridge)}, False)}} Connectwebviewjavascriptbridge (function (Brid GE) {bridge.init (function (message, responsecallback) {var data = {' Javascript Respond                    S ': ' wee! '} Responsecallback (data)}) Bridge.registerhandler (' Testjavascripthandler ', function (data, RE                    Sponsecallback) {var responsedata = {' Javascript Says ': ' Right Back atcha! '} Responsecallback (ResponseData)}) Bridge.callhandler (' interface name ', {': ' Interface name ') , ' body ': {"Interface name": ' 111 '}}, function (response) {//Interface request data operation}) $ ("Body"). Click (Fu Nction () {bridge.callhandler (' interface name ', {': ' Interface name ', ' body                           ': {' interface name ': ' 111 '}}, function (response) {//Interface request data operation                     })                    })            })        }

Including the click Operation Request interface should be placed in the initialization function;

The above content for their own summary, error please point out, declined to copy reprint

Hybrid app development, H5 page invoke iOS native app interface