天天看點
傳回

http://blog.csdn.net/u010105969/article/details/53541088歡迎使用Markdown編輯器

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協定，轉載請附上原文出處連結和本聲明。

本文連結：https://blog.csdn.net/u010105969/article/details/101682356

iOS開發中的WKWebView與JS的互動

之前已經寫過一個篇OC與JS互動的部落格了（部落格位址：http://blog.csdn.net/u010105969/article/details/53189934），可當時用來展示網頁的控件是UIWebView，而在iOS8之後蘋果推出了WKWebView，此控件也能用來顯示網頁，可與JS的互動卻與UIWebView有所不同。

====

JS代碼：

（貼下判斷iOS還是安卓的代碼：

==varu = navigator.userAgent;

varisAndroid = u.indexOf(‘Android’) > -1 || u.indexOf(‘Adr’) > -1; //android終端

varisiOS = !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端

alert(‘是否是Android：’+isAndroid);

alert(‘是否是iOS：’+isiOS);

if(isAcdroid){

}else if(isiOS){

}

）==

<head>

    <title>iOS and Js</title>

    <style type="text/css">

        * {

            font-size:40px;

        }

    </style>

</head>



<body>

    

    <div style="margin-top: 100px">

        <h1>Test how to use objective-c call js</h1><br/>

        <div><inputtype="button"value="call js alert"onclick="callJsAlert()"></div>

        <div><inputtype="button"value="111111"onclick="callAbc1()"></div>

        <div><inputtype="button"value="222222"onclick="callAbc2()"></div>

        <br/>

        <div><inputtype="button"value="Call js confirm"onclick="callJsConfirm()"></div><br/>

    </div>

    <br/>

    <div>

        <div><inputtype="button"value="Call Js prompt "onclick="callJsInput()"></div><br/>

        <div>Click me here:<ahref="http://www.baidu.com">Jump to Baidu</a></div>

    </div>

    

    <br/>

    <div id="SwiftDiv">

        <span id="jsParamFuncSpan"style="color: red; font-size: 50px;"></span>

    </div>

    

    <script type="text/javascript">

        function callJsAlert() {

            alert('Objective-C call js to show alert');

            

          

        }

    function callAbc1() {

        alert('liangsen...');

        

        // window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});

    }

    function callAbc2() {

        nslog('22222...');

        

        // window.webkit.messageHandlers.AppModel.postMessage({body: 'call js alert in js'});

    }

    

    function callJsConfirm() {

        if (confirm('confirm','Objective-C call js to show confirm')) {

            document.getElementById('jsParamFuncSpan').innerHTML

            = 'true';

        } else {

            document.getElementById('jsParamFuncSpan').innerHTML

            = 'false';

        }

        

        // AppModel是我們所注入的對象

       // window.webkit.messageHandlers.AppModel.postMessage({body: 'call js confirm in js'});

    }

    

    function callJsInput() {

        var response = prompt('Hello','Please input your name:');

        document.getElementById('jsParamFuncSpan').innerHTML = response;

        

        // AppModel是我們所注入的對象

       // window.webkit.messageHandlers.AppModel.postMessage({body: response});

    }

    </script>

</body>

複制

效果圖：

在點選前三個按鈕的時候會調用方法：

// 警告框

  • (void)webView:(WKWebView *)webView runJavaScriptAlertPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler{

    completionHandler();

    NSLog(@“3-----%@”,message);

}

輸出的message就是JS傳遞給我們的資料。

如果點選第四個conform按鈕會調用方法：

// 确認框

  • (void)webView:(WKWebView *)webView runJavaScriptConfirmPanelWithMessage:(NSString *)message initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(BOOL result))completionHandler{

    completionHandler(YES);

    NSLog(@"-----%@",message);

}

輸出的message就是JS傳遞給我們的資料。

如果點選最後一個input按鈕會調用方法：

// 輸入框

  • (void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt:(NSString *)prompt defaultText:(nullableNSString *)defaultText initiatedByFrame:(WKFrameInfo *)frame completionHandler:(void (^)(NSString *__nullable result))completionHandler{

    completionHandler(@“http”);

    NSLog(@"－－－－－%@", prompt);

}

輸出的prompt是JS傳遞給我們的資料。

注意：在利用UIWebView展示網頁的時候我們如果要想與JS進行互動那麼我們就得擷取JS代碼中的方法名，而我們在使用WKWebView的時候就不用了。JS代碼中利用

alert(‘liangsen…’);

來給我們傳遞資料，我們用runJavaScriptAlertPanelWithMessage這個方法來接收JS傳遞給我們的資料。

傳資料：

網頁給用戶端傳遞的資料有時并不隻是一個字元串這個簡單，還可能是JSON資料類型的資料，這時我們需要其他的傳遞資料的方式。首先需要增加html中的代碼，如在“111111”按鈕的點選事件增加代碼：

window.webkit.messageHandlers.AppModel.postMessage({body: ‘call js alert in js’});

AppModel是我們注入的對象，“（）”中的内容是我們傳遞給用戶端的資料。

用戶端中需增加的代碼：

// 注入JS對象名稱AppModel，當JS通過AppModel來調用時，

// 我們可以在WKScriptMessageHandler代理中接收到

[config.userContentControlleraddScriptMessageHandler:selfname:@“AppModel”];

注意JS對象名稱的一緻性（這裡的JS對象名稱是“AppModel”）。

實作代理中的方法：

#pragma mark - WKScriptMessageHandler

  • (void)userContentController:(WKUserContentController *)userContentController

    didReceiveScriptMessage:(WKScriptMessage *)message { NSLog(@"body:%@", message.body);

    NSDictionary * dic = message.body;

    NSString * urlStr = dic[@“body”];

    NSLog(@“urlStr:%@”, urlStr);

    if ([message.nameisEqualToString:@“AppModel”]) { // 打開外部連結

    NSLog(@"找到了注入的JS對象...");

    }

}

OC調用JS代碼：

[self.webView evaluateJavaScript:@“jsFunction()” completionHandler:^(id _Nullable result, NSError * _Nullable error) {

NSLog(@"==%@----%@",result, error);

        }];

複制

jsFunction()是 js方法

歡迎使用Markdown編輯器

你好！ 這是你第一次使用 Markdown編輯器 所展示的歡迎頁。如果你想學習如何使用Markdown編輯器, 可以仔細閱讀這篇文章，了解一下Markdown的基本文法知識。

新的改變

我們對Markdown編輯器進行了一些功能拓展與文法支援，除了标準的Markdown編輯器功能，我們增加了如下幾點新功能，幫助你用它寫部落格：

  1. 全新的界面設計 ，将會帶來全新的寫作體驗；
  2. 在創作中心設定你喜愛的代碼高亮樣式，Markdown 将代碼片顯示選擇的高亮樣式 進行展示；
  3. 增加了 圖檔拖拽 功能，你可以将本地的圖檔直接拖拽到編輯區域直接展示；
  4. 全新的 KaTeX數學公式 文法；
  5. 增加了支援甘特圖的mermaid文法1 功能；
  6. 增加了 多螢幕編輯 Markdown文章功能；
  7. 增加了 焦點寫作模式、預覽模式、簡潔寫作模式、左右區域同步滾輪設定 等功能，功能按鈕位于編輯區域與預覽區域中間；
  8. 增加了 檢查清單 功能。

功能快捷鍵

撤銷：Ctrl/Command + Z

重做：Ctrl/Command + Y

加粗：Ctrl/Command + B

斜體：Ctrl/Command + I

标題：Ctrl/Command + Shift + H

無序清單：Ctrl/Command + Shift + U

有序清單：Ctrl/Command + Shift + O

檢查清單：Ctrl/Command + Shift + C

插入代碼：Ctrl/Command + Shift + K

插傳入連結接：Ctrl/Command + Shift + L

插入圖檔：Ctrl/Command + Shift + G

查找：Ctrl/Command + F

替換：Ctrl/Command + G

合理的建立标題，有助于目錄的生成

直接輸入1次#，并按下space後，将生成1級标題。

輸入2次#，并按下space後，将生成2級标題。

以此類推，我們支援6級标題。有助于使用

TOC

文法後生成一個完美的目錄。

如何改變文本的樣式

強調文本 強調文本

加粗文本 加粗文本

标記文本

删除文本

引用文本

H2O is是液體。

210 運算結果是 1024.

插傳入連結接與圖檔

連結: link.

圖檔:

http://blog.csdn.net/u010105969/article/details/53541088歡迎使用Markdown編輯器

帶尺寸的圖檔:

http://blog.csdn.net/u010105969/article/details/53541088歡迎使用Markdown編輯器

居中的圖檔:

http://blog.csdn.net/u010105969/article/details/53541088歡迎使用Markdown編輯器

居中并且帶尺寸的圖檔:

http://blog.csdn.net/u010105969/article/details/53541088歡迎使用Markdown編輯器

當然，我們為了讓使用者更加便捷，我們增加了圖檔拖拽功能。

如何插入一段漂亮的代碼片

去部落格設定頁面，選擇一款你喜歡的代碼片高亮樣式，下面展示同樣高亮的

代碼片

.

// An highlighted block
var foo = 'bar';

複制

生成一個适合你的清單

  • 項目
    • 項目
      • 項目
  1. 項目1
  2. 項目2
  3. 項目3
  • 計劃任務
  • 完成任務

建立一個表格

一個簡單的表格是這麼建立的：

項目 Value
電腦 $1600
手機 $12
導管 $1

設定内容居中、居左、居右

使用

:---------:

居中

使用

:----------

居左

使用

----------:

居右

第一列 第二列 第三列
第一列文本居中 第二列文本居右 第三列文本居左

SmartyPants

SmartyPants将ASCII标點字元轉換為“智能”印刷标點HTML實體。例如：

TYPE ASCII HTML
Single backticks 'Isn't this fun?' ‘Isn’t this fun?’
Quotes "Isn't this fun?" “Isn’t this fun?”
Dashes -- is en-dash, --- is em-dash – is en-dash, — is em-dash

建立一個自定義清單

Markdown Text-to-HTML conversion tool Authors John Luke

如何建立一個注腳

一個具有注腳的文本。2

注釋也是必不可少的

Markdown将文本轉換為 HTML。

KaTeX數學公式

您可以使用渲染LaTeX數學表達式 KaTeX:

Gamma公式展示 Γ(n)=(n−1)!∀n∈N\Gamma(n) = (n-1)!\quad\forall n\in\mathbb NΓ(n)=(n−1)!∀n∈N 是通過歐拉積分

Γ(z)=∫0∞tz−1e−tdt . \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. Γ(z)=∫0∞​tz−1e−tdt.

你可以找到更多關于的資訊 LaTeX 數學表達式here.

新的甘特圖功能，豐富你的文章

Mon 06Mon 13Mon 20已完成 進行中 計劃一 計劃二 現有任務Adding GANTT diagram functionality to mermaid

  • 關于 甘特圖 文法，參考 這兒,

UML 圖表

可以使用UML圖表進行渲染。 Mermaid. 例如下面産生的一個序列圖：

張三李四王五你好！李四, 最近怎麼樣?你最近怎麼樣，王五？我很好，謝謝!我很好，謝謝!李四想了很長時間,文字太長了不适合放在一行.打量着王五...很好... 王五, 你怎麼樣?張三李四王五

這将産生一個流程圖。:

連結

長方形

圓

圓角長方形

菱形

  • 關于 Mermaid 文法，參考 這兒,

FLowchart流程圖

我們依舊會支援flowchart的流程圖：

Created with Raphaël 2.2.0開始我的操作确認？結束yesno

  • 關于 Flowchart流程圖 文法，參考 這兒.

導出與導入

導出

如果你想嘗試使用此編輯器, 你可以在此篇文章任意編輯。當你完成了一篇文章的寫作, 在上方工具欄找到 文章導出 ，生成一個.md檔案或者.html檔案進行本地儲存。

導入

如果你想加載一篇你寫過的.md檔案，在上方工具欄可以選擇導入功能進行對應擴充名的檔案導入，

繼續你的創作。

  1. mermaid文法說明 ↩︎
  2. 注腳的解釋 ↩︎
上一篇: JZ2440 中斷學習
下一篇: AI_第一部分 資料結構與算法（4.線性表之數組相關）