WKWebView上JS互動與載入CSS樣式(Hybrid混合開發)

阿新 • • 發佈：2019-01-11

首先，我們需要準備一篇帶有互動指令碼的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混合開發)

WKWebView上JS互動與載入CSS樣式(Hybrid混合開發)

c#兩種方式呼叫google地球,呼叫COM API以及呼叫GEPLUGIN 與js互動，載入kml檔案，dae檔案。將二維高德地圖覆蓋到到三維谷歌地球表面。

用JS改變的元素CSS樣式

如果在一個標簽上兩類並用，css樣式表中引用時，兩個類必須寫在一起，不能有空格。

js的操作及css樣式

本地IIS部署的arcgis js api ，載入地圖樣式改變 --解決方案

js控制重新載入css和js

jquery動態載入css樣式檔案

WKWebView詳解&WKWebVieW和JS互動

WKWebView實現JS互動

Vue.js 動態繫結CSS樣式

django後臺無法載入css樣式

前端頁面完成後如何放在IDEA專案工程的目錄下能正確載入css樣式

JS和jquery操作css樣式

UIWebView載入html，不顯示資源圖片，不載入css樣式

html-載入css樣式的4種方法

Adnroid WebView使用,js互動與彈窗設定

WordPress內網訪問無法載入css樣式

Flutter與已有iOS工程混合開發與指令碼配置

React-Native與安卓原生的混合開發

WKWebView上JS互動與載入CSS樣式(Hybrid混合開發)

相關推薦