Demand:
The app uses the H5 page to make the display, and to get the corresponding product ID, the user clicks on the H5 page to jump back to the app native page.
Method:
First of all to determine whether the user is iOS or Android device (only consider iOS and Android, because it is still a bit different, so separate), and then disable the H5 page jump, get the click Area ID, to the app.
iOS: where Godetail is the method that iOS they want to invoke, data is the ID value, and the type is passed to the app when it has other parameters.
1 varu = navigator.useragent;//Get user Device2 varIsios =!! U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS x/);//iOS terminal3 4$ ("a"). Click (function(){5 varhref = $ ( This). attr ("Data-href");6 if(Isios && window.) Webviewjavascriptbridge) {//iOS app device does not execute7$( This). attr ("href", "javascript:;");//prohibit H5 page Jump8Webviewjavascriptbridge.callhandler (' Godetail ', {"Data": href, ' type ': "1"},function(){9 Ten }); One return false; A - } -});
android: in the Android code inside the call H5 write a Method Gotoandroidapp (), and then they get the value of the Goodsdetail parameter, the first is the ID, the second is the type value, there are other parameters can be transmitted in turn multiple
1 //methods that are only called by the Android app2 functionGotoandroidapp () {3$ ("a"). Click (function(){4$( This). attr ("href", "javascript:;");5 varhref = $ ( This). attr ("Data-href");6Window.androidVik.goodsDetail (href,1);7 return false;8 });9}
The Complete case:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <Metaname= "Viewport"content= "Width=device-width,initial-scale=1,maximum-scale=1,user-scale=no">6 <title>Docking app</title>7 </Head>8 <Body>9 <Divclass= "ios">Ten <ahref= "Index.html"Data-href= "1">iOS Click button</a> One </Div> A <Divclass= "Android"> - <ahref= "Index.html"Data-href= "2">Android Click button</a> - </Div> the <Scriptsrc= "Http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></Script> - <Scripttype= "Text/javascript"> - varu=navigator.useragent;//Get user Device - varIsios= !!U.match (/\ (i[^;] +;( U;)? Cpu.+mac OS X/); //iOS terminal + - $("a"). Click (function(){ + varhref= $( This). attr ("Data-href"); A if(Isios&&window. Webviewjavascriptbridge) {//iOS app device does not execute at $( This). attr ("href","javascript:;");//prohibit H5 page Jump - Webviewjavascriptbridge.callhandler ('Godetail', {"Data": href,'type':"1"}, function(){ - - }); - return false; - } in }); - //methods that are only called by the Android app to functionGotoandroidapp () { + $("a"). Click (function(){ - $( This). attr ("href","javascript:;"); the varhref= $( This). attr ("Data-href"); * window.androidVik.goodsDetail (HREF,1); $ return false;Panax Notoginseng }); - } the </Script> + </Body> A </HTML>
H5 and iOS, Android data docking
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
