Home > Developer > JavaScript
One thing to say Oh, "UIWebView and JavaScript interaction One" this blog is reproduced by a number of sites, very happy, but there is a bit of fun to say, we reprint someone else's article when remember to explain the source of the reprint, there are two reasons, The first is to respect the work of the author, on the other hand, because some of the blog has some demo, but reproduced the people did not put the demo, to see the blog students brought a great inconvenience.
Next, we have implemented through the HTML button to transmit data to the OC page, but did not implement through the OC page data to the JS page, and modify the HTML page, not really full interaction, here will share with you.
Let's start by sharing the test.html code for you:
<html> <head> <title>Test</title> <meta http-equiv="Content-type" Content="text/html; Charset=utf-8 "/> <script type ="text/javascript" src ="Test.js"></script> </head> <body> <form name="MyForm" onsubmit ="return false;" > <table> <tr> <TD Height =" +" width =" align" = "Center" bgcolor="#DC143C">I ' m jack,i ' m an IOS coder</td> </tr> <tr> <TD Height =" +" width = " align" = "Center" > <input name ="INPUT1" id ="input1" type= "Text" size=" maxlength" =" > " </td> </tr> <tr> <TD Height=" +" width= " align" = "Center" > <input name ="Submit" type="Submit" value ="Submit" onClick ="Check ()"> </td> </tr> <tr> <TD Height=" +" width= " align" = "Center" > <input name ="ChangeValue" type="Submit" value=" ChangeValue " onClick =" Change_value () " > </td> </tr> <tr> <TD Height =" +" width = " align" = "Center" > <input name ="Input2" id ="Input2" type= "Text" size=" maxlength" =" > " </td> </tr> </table> </form> </body></html>There are two places to remind you to avoid making the same mistakes I did
OnSubmit = "return false;" In the Red Line section Mainly because I used the button to trigger the event, the Submit default refresh page, so to Returnfalse to suppress the trigger event after the page refresh.
The Red Line section, the value of input and the function name of the onclick () function cannot be the same, otherwise the function cannot be called.
These two places are not aware of the mistakes they have taken a long time to ask several people, and finally found the problem lies. Learn the lesson, we must remember Oh!!!
Below you see the code for the Test.js file:
Window.onerror = function(err) {Log' Window.onerror: '+ err);}; function connectwebviewjavascriptbridge(callback) { if(Window. Webviewjavascriptbridge) {callback (Webviewjavascriptbridge); }Else{Document.addeventlistener (' Webviewjavascriptbridgeready ', function() {Callback (Webviewjavascriptbridge); },false); }} function check(){Connectwebviewjavascriptbridge ( function(bridge) { varstr = document.getElementById (' INPUT1 '). Value;//Pass the value of the first input box to the OC pageBridge.callhandler (' Submit 'Str function(response) {Log' JS got response ', response); }); });} function change_value(){Connectwebviewjavascriptbridge ( function(bridge) {Bridge.init ( function(message, Responsecallback) {Log' JS got a message ', message);vardata = {' Javascript responds ':' wee! '}; Log' JS responding with ', data); Responsecallback (data); }); Bridge.registerhandler (' Changevaluehandler ', function(data, Responsecallback) {document.getElementById (' Input2 '). Value =' 3 ';//Change the value of the second input box on an HTML page varResponseData = {' Javascript Says ':' right back atcha! '} responsecallback (ResponseData) }); });}Not much to say the demo
In addition today saw a piece of blog on my idea of inspiration is very big also share with you:
Http://honglu.me/2014/09/27/WebViewJavascriptBridge Use/
UIWebView interacting with JavaScript III change the value on an HTML page by using the OC page
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
