WKWebView上JS互動與載入CSS樣式(Hybrid混合開發)
首先,我們需要準備一篇帶有互動指令碼的HTML
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <h1>我是大標題</h1> <h2 id="showView" style="color: blue; font-size: 40px;">我是2標題</h2> <hr/> </head> <body> <script> function func() { alert("奇葩的坨坨~~"); } function func2() { <!-- window.location.href = "oc://ocFunc";//呼叫oc裡面的方法--> var messgeToPost = {'ButtonId':'clickMe'}; //這裡的buttonClicked是WKwebView配置過的 window.webkit.messageHandlers.buttonClicked.postMessage(messgeToPost); } function func3() { window.location.href = "oc://ocFunc";//呼叫oc裡面的方法 var messgeToPost = {'ButtonId':'touchUp'}; window.webkit.messageHandlers.touchUp.postMessage(messgeToPost); } function func4() { var result = confirm('confirm窗體'); if (result == true) { document.getElementById("showView").innerHTML = 'ture'; }else { document.getElementById("showView").innerHTML = 'false'; } } function func5() { var result = prompt('Title','Please input anything') document.getElementById("jsShow").innerHTML = result; } </script> <p>我就是為了測試</p> <a href="http://www.baidu.com">百度</a> <button onclick = "func2()" id="clickMe">JS呼叫OC</button> <button onclick = "func3()" id="touchUp">TouchUp</button> <button onclick = "func4()" id="confirm">Confirm</button> <button onclick = "func5()" id="TextInput">TextInput</button> <br/> <div id="SwiftDiv"> <span id="jsShow" style="color: red; font-size: 100px;"></span> </div> </body> </html>
當我們載入了這個網頁檔案之後,我們可以直接呼叫JS的function函式。(如上:func(),func2(),func3()等等)
臥槽,表達能力有限,還是貼程式碼吧。。。。。。。。。。。。。。。。。日了狗了!
// // ViewController.m // JS的呼叫 // // Created by 曹敬賀 on 15/11/23. // Copyright © 2015年 北京明蘭網路科技有限公司. All rights reserved. // #import "ViewController.h" #import <WebKit/WebKit.h> @interface ViewController ()<WKNavigationDelegate,WKScriptMessageHandler,WKUIDelegate> @property (nonatomic,strong)WKWebView * mywebView; @end @implementation ViewController @synthesize mywebView; - (void)viewDidLoad { [super viewDidLoad]; //讀取本地的JS網頁檔案 NSString * local_JS_Path = [[NSBundle mainBundle]pathForResource:@"js" ofType:@"html"]; NSString * html = [NSString stringWithContentsOfFile:local_JS_Path encoding:NSUTF8StringEncoding error:nil]; WKUserContentController * wkVC = [[WKUserContentController alloc]init]; [wkVC addScriptMessageHandler:self name:@"buttonClicked"]; [wkVC addScriptMessageHandler:self name:@"touchUp"]; WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init]; WKPreferences * prefer = [[WKPreferences alloc]init]; prefer.javaScriptEnabled = YES; prefer.minimumFontSize = 20; prefer.javaScriptCanOpenWindowsAutomatically = YES; configuration.preferences = prefer; configuration.userContentController = wkVC; mywebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 40, self.view.bounds.size.width, self.view.bounds.size.height - 40) configuration:configuration]; mywebView.UIDelegate = self; mywebView.navigationDelegate = self; [self.view addSubview:mywebView]; [mywebView loadHTMLString:html baseURL:nil]; NSArray* array = @[@"直接呼叫js"]; for(int i=0;i<array.count;i++) { UIButton* button = [UIButton buttonWithType:UIButtonTypeRoundedRect]; button.frame = CGRectMake(i*(320/array.count), 20, 320/array.count, 20); button.tag = i + 100; [button setTitle:array[i] forState:UIControlStateNormal]; [button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside]; [self.view addSubview:button]; } } - (void)buttonClick:(UIButton *)sender { if (sender.tag == 100) { //呼叫html中已有的JS的方法(如Demo中js.html中的func()方法) [mywebView evaluateJavaScript:@"func()" completionHandler:^(id obj, NSError * error) { if (error) { NSLog(@"呼叫html的JS方法出錯!"); } }]; } } #pragma mark -------WKWebDelegate--------- - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message { NSLog(@"Name:%@ Body:%@",message.name,message.body); } //alert - (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler { NSLog(@"alert:%@==%@",message,frame); UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"title" message:message preferredStyle:UIAlertControllerStyleAlert]; [alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { completionHandler(); }]]; [self presentViewController:alert animated:YES completion:^{ }]; } //confirm - (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL))completionHandler { NSLog(@"confirm:%@==%@",message,frame); UIAlertController * alert = [UIAlertController alertControllerWithTitle:@"title" message:message preferredStyle:UIAlertControllerStyleAlert]; [alert addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { completionHandler(YES); }]]; [alert addAction:[UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction * _Nonnull action) { completionHandler(NO); }]]; [self presentViewController:alert animated:YES completion:nil]; } //TextInput - (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullable NSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString * result))completionHandler { NSLog(@"TextInput:%@==%@",prompt,defaultText); UIAlertController * alert = [UIAlertController alertControllerWithTitle:prompt message:defaultText preferredStyle:UIAlertControllerStyleAlert]; [alert addTextFieldWithConfigurationHandler:^(UITextField * _Nonnull textField) { textField.textColor = [UIColor blackColor]; }]; [alert addAction:[UIAlertAction actionWithTitle:@"確定" style:UIAlertActionStyleDefault handler:^(UIAlertAction * _Nonnull action) { completionHandler(alert.textFields[0].text); }]]; [self presentViewController:alert animated:YES completion:nil]; } - (void)didReceiveMemoryWarning { [super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end
這樣就完成了對網頁的基本呼叫。
另外還可以向網頁中注入JS程式碼,注入方法網路上很多,這裡不再贅述!
最近感覺網頁載入型app越來越重要,所以我嘗試了一下用WKWebView載入本地CSS樣式和JS檔案的方式掛載到網頁上。
首先講下CSS,在以前用UIWebView方式載入網頁時,CSS樣式可以自動的被應用到html中,但是在新的WKWebView中,工程中的CSS樣式是不會被自動載入到網頁中的,那麼我們就必須手動新增CSS檔案,但載入CSS樣式的檔案時遇到了困難,在github上和stackoverflow上搜索了好多帖子,發現好多人和我遇到了同樣的問題。那麼如何載入CSS樣式呢,我們可以用指令碼掛載CSS樣式,然後將指令碼注入到網頁中,這樣就能夠實現CSS樣式的載入了。
其次,JS的掛載,網上有很多,忽略。
第三,關於網頁載入本地圖片的問題,如果網頁中需要本地圖片,那麼我們載入的時候,將baseurl設定稱為bundle的pathURL即可,圖片的路徑只要寫檔名即可。
第四,BUG?我在ios8下測試載入本地html,用WKWebView時,CSS用掛指令碼的方式依然載入不上,在ios9上沒有問題,應該是ios9把這個問題修復了?
第五,從網頁中提取資料,這個需要完全的JS,我在一位JS大神同事的幫助下,能提取到幾乎所有的節點資料,由於我對JS一知半解,不在這賣弄風騷了。
https://www.w3.org/2010/05/video/mediaevents.html
相關推薦
WKWebView上JS互動與載入CSS樣式(Hybrid混合開發)
首先,我們需要準備一篇帶有互動指令碼的HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
c#兩種方式呼叫google地球,呼叫COM API以及呼叫GEPLUGIN 與js互動,載入kml檔案,dae檔案。將二維高德地圖覆蓋到到三維谷歌地球表面。
網路上資源很多不全面,自己在開發的時候走了不少彎路,在這裡整理了最全面的google全套開發,COM互動,web端互動。封裝好了各種模組功能。 直接就可以呼叫。 第一種方式:呼叫COMAPI實現呼叫google地球 1、安裝googleearth客戶端。傳送門:https://pan.baidu.com/
用JS改變的元素CSS樣式
article 引用 dsm date word ttr class doc scrip CSS樣式的引用有3種方式:style引用、class引用、id引用,所以js改變元素的樣式我們也分3種來說。 1.js改變由style方式引用的樣式:方法一:docu
如果在一個標簽上兩類並用,css樣式表中引用時,兩個類必須寫在一起,不能有空格。
nbsp clas div 樣式表 ext style borde 引用 order 例: <html> <style type="text/css"> .mui-table-view-cell.mui-collapse{ bo
js的操作及css樣式
1.Js操作css樣式 Div.style.width=”100px”.在div標籤內我們添加了一個style屬性,並設定 了width值。這種寫法會給標籤帶來大量的style屬性,跟實際專案是不符。 我們沒有讓css和html分離。 所以如果是為了獲取css樣式 window.getCompute
本地IIS部署的arcgis js api ,載入地圖樣式改變 --解決方案
之前部署了離線的arcgis js api ,在載入地圖的時候google 瀏覽器總是提示跨域的問題,而且地圖的樣式也發生了變化,但是引用官網的線上api的時候就不會出現的這種問題,意識到是部署的api哪裡還沒有做好,查閱資料許久才找到解決方案,特寫下這篇部落格(其實都已經過去好長時間了 = =)
js控制重新載入css和js
重新載入js的方法 var head = $("head").remove("script[role='reload']"); $("<scri" + "pt>" + "<
jquery動態載入css樣式檔案
需求:頁面展示時,需要js判斷手機寬度(解析度),當寬度大於某個值時,引用big.css,當寬度小於某個值時,引用small.css,本來css中可以判斷,但是由於終端不識別,素以只能手動程式碼判斷了。 實現:在js加入程式碼(最好在開頭位置) // 獲取手機螢
WKWebView詳解&WKWebVieW和JS互動
開發App的過程中,常常會遇到在App內部載入網頁,通常用UIWebView載入。而這個自iOS2.0開始使用的Web容器一直是開發的心病:載入速度慢,佔用記憶體多,優化困難。如果載入網頁多,還可能因為過量佔用記憶體而給系統kill掉。各種優化的方法效果也不那麼明顯iOS8 以後,蘋果推出了新框架 W
WKWebView實現JS互動
需求:利用webView載入H5頁面,並實現點選H5頁面的按鈕觸發事件,事件是呼叫OC的方法。 簡單說就是JS呼叫OC的方法,這裡我們選擇的是WKWebView,至於為什麼不用UIWebView,自行百度或者看開發文件。 實現: 1、首先應該倒入 WebK
Vue.js 動態繫結CSS樣式
第一種方法: v-bind:class="{a:b,c:b}" a c 代表CSS樣式表裡相應的樣式名 b 代表true(啟用此樣式)/false(不啟用此樣式) html <!--vue-app是根容器--> &l
django後臺無法載入css樣式
專案做著突然出現這個問題,找了半天解決方案都不成功。最後終於讓我找到問題所在 這種情況一般會在windows系統下出現 前臺、後臺如果無法載入css等樣式。(建議通過此辦法來解決) 這是因為你安裝的某些IDE 或者其他更改了登錄檔導致的 系統的登錄檔
前端頁面完成後如何放在IDEA專案工程的目錄下能正確載入css樣式
1.首先WEB-INF裡的檔案不能被外界訪問,所以CSS,JS等檔案不能放在此處,剛開始我把前端做出來的東西全部放在了WEB-INF下所以肯定不對。 2.通過問學長得知在html裡面沒有引進CSS的樣式,好詭異的說,慧婷做好了給我看的時候樣式都是有的,也就是說她應該引進樣式
JS和jquery操作css樣式
在寫js的時候經常弄混掉js和jquery對樣式操作的方法,這裡總結一下:JS方法:1.直接設定style屬性,設定 !important值無效,如果屬性值有 “ - ”改成小駝峰寫法(textAlign)或者 element.style['text-align']= '10
UIWebView載入html,不顯示資源圖片,不載入css樣式
專案中需要載入本地的html,不顯示本地的資源圖片檔案,而且樣式也跟瀏覽器開啟的不一樣。初步判斷是資源路徑讀取的問題。 鑑於iOS沙盒機制的問題,這些資原始檔在編譯過程中,都被儲存到同一資源路徑下了。所以就需要我們修改html中圖片資源的讀取位置。 如本地html中有
html-載入css樣式的4種方法
載入css樣式有4種 1.外部樣式(外聯樣式) 如果css是一個外部檔案,可以在你html檔案的<head></head>裡寫上 <link href="style.css" rel="stylesheet" type="
Adnroid WebView使用,js互動與彈窗設定
package com.zy.tour.usercenter; import android.annotation.SuppressLint; import android.app.Activity; import android.app.AlertDialog; imp
WordPress內網訪問無法載入css樣式
在本地安裝部署好wp後,本機localhost和ip訪問能訪問,主題樣式和酷炫的頁面效果載入都沒有問題。開始我用手機連上本地區域網後訪問wp站點,沒有樣式,當時懷疑的是手機的瀏覽器不支援css和js效果,仔細想想這個結論並不成立;然後換在同一網段下的另一臺主機訪
Flutter與已有iOS工程混合開發與指令碼配置
作者:Realank Liu 連結:https://juejin.im/post/5b7a1bfbe51d4538a93d2339 來源:掘金 著作權歸作者所有。商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
React-Native與安卓原生的混合開發
寫在前面 目前很多大廠APP(如淘寶、餓了麼、美團等等)並不是純原生Android&IOS,也不是純JS開發,而是Hybird APP開發,混合型優勢很多:比如熱更新,保證在一些類似雙十一的活動到來時能夠快速上線活動頁面,使用者不必再去更新APP。再來有效地減小了安裝包的體積