ホームページ >ウェブフロントエンド >htmlチュートリアル >UIWebView は JavaScript 3 と対話し、OC page_html/css_WEB-ITnose を通じて HTML ページの値を変更します。
UIWebView は JavaScript 3 と対話し、OC page_html/css_WEB-ITnose を通じて HTML ページの値を変更します。
- WBOYオリジナル
- 2016-06-24 11:45:46987ブラウズ
言いたいことが一つあります。このブログ「UIWebView と JavaScript の相互作用 1」がいくつかの Web サイトに転載されているのはとても嬉しいのですが、他の人のブログを転載してもらうと、言いたいことがあります。記事の転載元を必ず説明してください。理由は 2 つあります。一方、ブログにはデモが掲載されることがありますが、転載者はダウンロードを投稿しませんでした。デモのアドレスが記載されており、ブログをご覧になった学生の皆様には大変ご迷惑をおかけしました。
前回の記事に引き続き、htmlボタン経由でocページにデータを送信する方法は実装しましたが、ocページ経由でjsページにデータを送信してhtmlページを修正する方法は実装していません。本当の完全な対話はありません。ここで一度だけ共有します。
まず test.html のコードを共有しましょう:
<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 ="30" width ="320" align="center" bgcolor="#DC143C">I'm Jack,I'm an IOS coder</td> </tr> <tr> <td height ="30" width ="320" align="center"> <input name ="input1" id ="input1" type="text" size="25" maxlength="100" > </td> </tr> <tr> <td height="30" width="60" align="center"> <input name ="submit" type="submit" value="submit" onClick ="check()"> </td> </tr> <tr> <td height="30" width="60" align="center"> <input name ="changevalue" type="submit" value="changevalue" onClick ="change_value()" > </td> </tr> <tr> <td height ="30" width ="320" align="center"> <input name ="input2" id ="input2" type="text" size="25" maxlength="100" > </td> </tr> </table> </form> </body></html>
私と同じ間違いをしないように注意する必要がある箇所が 2 つあります
onsubmit = "return false;" の赤い線の部分は次のとおりです。主な理由は、ボタンを使用してイベントをトリガーすると、デフォルトで submit によってページが更新されるため、イベントのトリガー後にページの更新を無効にするには false を返す必要があるためです。
赤線の部分では、入力の値とOnclick()関数の関数名が同じであってはならず、同じでなければ関数を呼び出すことができません。
これら 2 つの間違いは私が偶然に犯したもので、最終的に問題を見つけるまでに長い時間がかかり、何人かの人に尋ねました。誰もが学んだ教訓を忘れてはなりません。 ！ ！
test.js ファイルのコードを見てみましょう:
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) { var str = document.getElementById('input1').value;//将第一个输入框的值传递到OC页面中去 bridge.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); var data = { 'Javascript Responds':'Wee!' }; log('JS responding with', data); responseCallback(data); }); bridge.registerHandler('changeValueHandler', function(data, responseCallback) { document.getElementById('input2').value ='3';//改变html页面上第二个输入框的值 var responseData = { 'Javascript Says':'Right back atcha!' } responseCallback(responseData) }); });} デモのダウンロード アドレスについてはあまり言う必要はありません
さらに、今日、私のアイデアに多くのインスピレーションを与えたブログを見たので、それを共有したいと思いますあなた:
http://honglu .me/2014/09/27/WebViewJavascriptBridge use/