iOSでUIWebViewがJSインタラクションを使用する-機知に富んだ初心者

5437 ワード
UICWebView
iOSでは、ニュースや紹介など、webviewを使ってコンテンツを表示することもあります.しかし、あまり使われていないので、jsを使ってwebviewとやり取りする方法を教えてあげましょう.
ここでは、画像をクリックして画像のパスを取得する例を示します.
1.テストページhtml
<!doctype html>

<html>  <head>    </head>  <body>   <div>       <img src="test.png"/>      </div>  </body> </html>

2.コントロールにhtmlをロードします
[_webview loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle]URLForResource:@"work" withExtension:@"html"]]];

3.ここには画像が1枚しか表示されていません
4.testという名前の関連jsファイルをロードする.js 
function setImageClickFunction(){  var imgs = document.getElementsByTagName("img");  for (var i=0;i<imgs.length;i++){   var src = imgs[i].src;   imgs[i].setAttribute("onClick","click(src)");  }  document.location = imageurls; } function click(imagesrc){  var url="ClickImage:"+imagesrc;  document.location = url; }

ここで2つの方法の意味を言います(jsに詳しくないものに役立ちます):1つ目はあなたのwebviewのすべての画像にクリックイベントを加えて、2つ目の方法はクリックして画像のURLに戻るため、このURLを受信することについて以下に言います.
5.controllerにjsコードをロードする
[_webview stringByEvaluatingJavaScriptFromString:[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"test" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]];

また、jsコードをhtmlに直接置くこともできます.効果は同じです.
6.webviewのエージェントメソッドでは、最初のjsメソッドを呼び出す
-(void)webViewDidFinishLoad:(UIWebView *)webView

{

     [_webview stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"]; }

あ、ここではつまりwebviewのロードが終わったら彼にバインドしてイベントをクリックします.さて、最後にURLを受け取ります
7.js戻り値を受信し、画像をクリックするとこのエージェントメソッドが実装され(webviewをロードするたびに表示される)、戻り値を出力してみましょう.
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {   NSString *path=[[request URL] absoluteString];   NSLog(@"%@",path);  return YES; }
2014-10-03 19:39:37.099 webview[31153:60b] ClickImage:file:///Users/zhiwupei/Library/Application%20Support/iPhone%20Simulator/7.1-64/Applications/C4F814F6-088D-444F-A508-40AB5C775567/webview.app/test.png

コンソールが画像のパスを印刷しているのが見えます.ここではローカル画像を使っているので、ネット画像も同じ理屈です.これにより、画像をクリックして彼のパスを取得することができます.
 
 
変換元:http://www.tuicool.com/articles/6nM3ym
nginx php-fpmでスローログ構成を有効にする(実行が遅いPHPスクリプトを検出するために使用)
PHPがmysqliを実現して複数の文を一括実行する方法の例