重慶分公司,新征程啟航
為企業提供網站建設、域名注冊、服務器等服務
為企業提供網站建設、域名注冊、服務器等服務
接到一個需求,需要我調用本地.js文件里的方法,我一開始就想當然的直接用webView去調用:
創新互聯建站是一家集網站建設,云岡企業網站建設,云岡品牌網站建設,網站定制,云岡網站建設報價,網絡營銷,網絡優化,云岡網站推廣為一體的創新建站企業,幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿,時刻以成就客戶成長自我,堅持不斷學習、思考、沉淀、凈化自己,讓我們為更多的企業打造出實用型網站。
結果是一直在打印error,后來發現并不能去調.js文件里的東西,但是可以用html文件包裝一下.js文件
這樣就能訪問到generatorBrainKey()方法了,但是在真機測試的時候又出現問題了,因為我們寫的地址是固定的,無法找到指定的.js文件,這個問題的當時糾結了半天,結果發現解決辦法就是把前面的地址去掉只保留文件名就行.
這樣就沒問題了.
在 APP 中,免不了與 H5頁面打交道,所以掌握 與 JS 交互就顯的至關重要,本文總結了常見的與 JS 交互方式。
注意事項
在 OC 原生中
在 html 文件中
早期的JS與原生交互的開源庫很多都是用得這種方式來實現的,例如:PhoneGap、 WebViewJavascriptBridge 。
效果圖
使用WKNavigationDelegate中的代理方法,攔截自定義的 URL 來實現 JS 調用 OC 方法。
注意點
關于如何區分執行不同的OC 方法,也與UIWebView的處理方式一樣,通過URL 的host 來區分執行不同的方法:
JS 調用OC 方法后,有的操作可能需要將結果返回給JS。這時候就是OC 調用JS 方法的場景。
WKWebView 提供了一個新的方法 evaluateJavaScript:completionHandler: ,實現OC 調用JS 等場景。
注意點
運行結果
在iOS 7之后,apple添加了一個新的庫JavaScriptCore,用來做JS交互,因此JS與原生OC交互也變得簡單了許多。
首先導入JavaScriptCore庫, 然后在OC中獲取JS的上下文。
再然后定義好JS需要調用的方法,例如JS要調用share方法:
則可以在UIWebView加載url完成后,在其代理方法中添加要調用的share方法:
OC 調用 JS 方法有多種,首先介紹使用JavaScriptCore框架的方式。
使用JSContext 的方法 -evaluateScript ,可以實現 OC 調用 JS 方法
效果圖
使用WKWebView的時候,如果想要實現JS調用OC方法,除了攔截URL之外,還有一種簡單的方式。那就是利用WKWebView的新特性MessageHandler來實現JS調用原生方法。
創建 WKWebViewConfiguration 對象,配置各個API對應的MessageHandler。
然后在界面即將顯示的時候添加MessageHandler
需要注意的是addScriptMessageHandler很容易引起循環引用,導致控制器無法被釋放,所以需要移除MessageHandler
這里實現了兩個協議 WKUIDelegate,WKScriptMessageHandler , WKUIDelegate 是因為我在JS中彈出了alert 。 WKScriptMessageHandler 是因為我們要處理JS調用OC方法的請求。
WKScriptMessage 有兩個關鍵屬性 name 和 body 。
因為我們給每一個OC 方法取了一個name,那么我們就可以根據name 來區分執行不同的方法。body 中存著JS 要給OC 傳的參數。
關于參數body 的解析,我就舉一個body中放字典的例子,其他的稍后可以看demo。
解析JS 調用OC 實現分享的參數:
message.boby 就是JS 里傳過來的參數。我們不同的方法先做一下容錯性判斷。然后正常取值就可以了。
下面只列舉一個shareClick()方法,其他看Demo
這里使用WKWebView 實現OC 調用JS方法與之前說的文章一樣,通過
- evaluateJavaScript:completionHandler:
效果圖如下圖所示
詳情看下面文章鏈接
iOS下 JS 與 OC 互相調用(五) - UIWebView+WebViewJavascriptBridge
詳情看下面文章鏈接
iOS下 JS 與 OC 互相調用(六) - WKWebView+WKWebViewJavascriptBridge
iOS下 JS 與OC 互相調用(一) - UIWebView 攔截 URL
iOS下 JS 與OC 互相調用(二) - JavaScriptCore
iOS 下 JS 與 OC 互相調用(三) - WKWebView 攔截 URL
iOS下JS與OC互相調用(四)-MessageHandler
iOS下 JS 與 OC 互相調用(五) - UIWebView+WebViewJavascriptBridge
iOS下 JS 與 OC 互相調用(六) - WKWebView+WKWebViewJavascriptBridge
1、首先找到js位置,在cms后臺界面中,選擇欄目。
2、自定義js——增加自定義js。
3、然后增加js ,例如調用最新的十條文章,sql語句為基本的mysql語句。
4、這里有個地方是可以設置模板的,方便設置自己的樣式,提交就完成了 。
5、上面的為默認的模板,也可自己新加一個對應的模板,然后選擇。調用方法為:script src="JS地址"/script。
本例子是為了讓大家能快速開發出OC調用JS功能的一個簡單的例子。
1、準備一個本地化的html網頁,如jsIOS.html
script type="text/javaScript"
function postStr(){
return document.getElementById("text1").value;
//return "javaScript返回值啦";
}
/script
2、將此html文件放到項目代碼目錄里面,如圖:
3、拖一個UIWebView控件和UIButton控件到xxxViewController對應的.xib或.storyboard視圖的UIView上;
在xxxViewController的.h文件中分別聲明UIWebView類型變量和UIButton類型的變量,以及一個按鈕點擊事件(并且跟視圖里面的控件連線),
并且添加一個UIWebViewDelegate類型的委托。喎?"" target="_blank" class="keylink"vcD4KPHA+eHh4Vmlld0NvbnRyb2xsZXIuaM7EvP7E2sjdyOfPwqO6PC9wPgo8cD48L3A+CjxwIGNsYXNzPQ=="p1"
#import
@interface ViewController : UIViewController
@property(nonatomic,retain) IBOutlet UIWebView *webview;
@property(nonatomic,retain) IBOutlet UIButton *button;
-(IBAction)IOS_JS:(id)sender;
@end
4、在xxxViewController.m文件中實現通過點擊事件,調用javaScript的方法并取得返回值。
代碼如下:
#import "ViewController.h"
@interface ViewController ()
@end
@implementation ViewController
@synthesize webview;
- (void)viewDidLoad
{
[super viewDidLoad];
//設置webView
webview.backgroundColor = [UIColor clearColor];
//webview.scalesPageToFit =YES;
webview.delegate =self;
//找到jsIOS.html文件的路徑
NSString *basePath = [[NSBundle mainBundle]bundlePath];
NSString *helpHtmlPath = [basePath stringByAppendingPathComponent:@"jsIOS.html"];
NSURL *url = [NSURL fileURLWithPath:helpHtmlPath];
//加載本地html文件
[webview loadRequest:[NSURLRequest requestWithURL:url]];
}
/*
* 點擊事件
* 調用javaScript的方法postStr()并取得返回值
* 輸出返回值到控制臺
*/
-(IBAction)IOS_JS:(id)sender
{
NSString *str = [self.webview stringByEvaluatingJavaScriptFromString:@"postStr();"];
NSLog(@"JS返回值:%@",str);
}
- (void)didReceiveMemoryWarning
{
[super didReceiveMemoryWarning];
}
@end
能的。安卓和ios可以用js進行調試的,因為js是屬于通用的計算機程序語言,在調用速度上JS省掉了編譯的步驟,執行過程更輕量速度更快。所以能把js打包給安卓和ios調用。