JSContext监控UIWebView上JS事件，并执行JS方法，实现js与ios方法互调

来源：互联网发布：碧空尽知什么编辑：程序博客网时间：2024/05/16 03:56

http://blog.csdn.net/ztangxu/article/details/47974969

JSContext监控UIWebView上JS事件，并执行JS方法，实现js与ios方法互调

依赖库：#import <JavaScriptCore/JavaScriptCore.h>

ios7的新库，对js支持比较好
传统的方式是在uiwebview内捕获js事件，但是如果人家点击的时间不是跳转或者说不含request请求的，那么是不会进入shouldStartLoadWithRequest 方法的，那么就捕获不到此次的方法了。

上代码：

<code class="hljs objectivec has-numbering">-(<span class="hljs-keyword">void</span>)wb{    <span class="hljs-keyword">if</span> (!webView1) {        webView1 = [[<span class="hljs-built_in">UIWebView</span> alloc]initWithFrame:CGRectMake(<span class="hljs-number">0</span>, <span class="hljs-number">90</span>, SCREEN_WIDTH , SCREEN_HEIGHT)];        webView1<span class="hljs-variable">.scalesPageToFit</span> = <span class="hljs-literal">YES</span>;<span class="hljs-comment">//自动对页面进行缩放以适应屏幕</span>        [<span class="hljs-keyword">self</span><span class="hljs-variable">.view</span> addSubview:webView1];    }    webView1<span class="hljs-variable">.delegate</span> = <span class="hljs-keyword">self</span>;    <span class="hljs-built_in">NSURL</span> *baseURL = [<span class="hljs-built_in">NSURL</span> fileURLWithPath:[[<span class="hljs-built_in">NSBundle</span> mainBundle] bundlePath]];    <span class="hljs-built_in">NSString</span> *path = [[<span class="hljs-built_in">NSBundle</span> mainBundle] pathForResource:@<span class="hljs-string">"ios_test"</span> ofType:@<span class="hljs-string">"html"</span>];    <span class="hljs-built_in">NSString</span> *html = [<span class="hljs-built_in">NSString</span> stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:<span class="hljs-literal">nil</span>];    [webView1 loadHTMLString:html baseURL:baseURL];    _context = [webView1 valueForKeyPath:@<span class="hljs-string">"documentView.webView.mainFrame.javaScriptContext"</span>];    WeakSelf(bSelf);    _context[@<span class="hljs-string">"tokenSend"</span>] = ^() {        <span class="hljs-built_in">NSLog</span>(@<span class="hljs-string">"+++++++Begin Log+++++++"</span>);        <span class="hljs-built_in">NSArray</span> *args = [JSContext currentArguments];        <span class="hljs-keyword">for</span> (JSValue *jsVal in args) {            <span class="hljs-built_in">NSLog</span>(@<span class="hljs-string">"%@"</span>, jsVal);        }        JSValue *<span class="hljs-keyword">this</span> = [JSContext currentThis];        <span class="hljs-built_in">NSLog</span>(@<span class="hljs-string">"this: %@"</span>,<span class="hljs-keyword">this</span>);        <span class="hljs-built_in">NSLog</span>(@<span class="hljs-string">"-------End Log-------"</span>);        [bSelf<span class="hljs-variable">.context</span> evaluateScript:@<span class="hljs-string">"aha('dddee222')"</span>];    };</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li></ul>

本地html文件代码

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span><span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span><span class="hljs-params">()</span> {</span>        <span class="hljs-comment">//alert("点得好！！"+new Date());</span>      tokenSend(<span class="hljs-string">"1"</span>);    };<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">aha</span><span class="hljs-params">(xx)</span> {</span>    alert(xx);}</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span>    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"点这点这点这"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"test();"</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li></ul>

解释：方法“tokenSend”为客户端与js约定的一个方法名，
html内，点击了“点这里点这里”按钮后，会执行test()方法。test()方法内调用与ios端约定的方法tokenSend 那么客户端便会检测到js事件，便会_context的block内。在此便可以调用js方法aha()了。

爽不爽？不需要去 shouldStartLoadWithRequest判断漫长的js方法了。
还有更爽的。对实现方式不关注的话，可以直接return值给js！
html代码

<code class="hljs xml has-numbering"><span class="hljs-doctype"><!DOCTYPE html></span><span class="hljs-tag"><<span class="hljs-title">html</span> <span class="hljs-attribute">lang</span>=<span class="hljs-value">"en"</span>></span><span class="hljs-tag"><<span class="hljs-title">head</span>></span>    <span class="hljs-tag"><<span class="hljs-title">meta</span> <span class="hljs-attribute">charset</span>=<span class="hljs-value">"UTF-8"</span>></span>    <span class="hljs-tag"><<span class="hljs-title">title</span>></span>Document<span class="hljs-tag"></<span class="hljs-title">title</span>></span><span class="hljs-tag"></<span class="hljs-title">head</span>></span><span class="hljs-tag"><<span class="hljs-title">script</span>></span><span class="javascript">    <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">test</span><span class="hljs-params">()</span> {</span>        <span class="hljs-comment">//alert("点得好！！"+new Date());</span>      <span class="hljs-keyword">var</span> aa=  tokenSend(<span class="hljs-string">"1"</span>);      alert(aa);    };</span><span class="hljs-tag"></<span class="hljs-title">script</span>></span><span class="hljs-tag"><<span class="hljs-title">body</span>></span>    <span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"button"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">"点这点这点这"</span> <span class="hljs-attribute">onclick</span>=<span class="hljs-value">"test();"</span>></span><span class="hljs-tag"></<span class="hljs-title">body</span>></span><span class="hljs-tag"></<span class="hljs-title">html</span>></span></code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li></ul>

ios代码

<code class="hljs objectivec has-numbering"> _context[@<span class="hljs-string">"tokenSend"</span>] = ^() {        <span class="hljs-built_in">NSArray</span> *args = [JSContext currentArguments];        <span class="hljs-keyword">for</span> (JSValue *jsVal in args) {            <span class="hljs-built_in">NSLog</span>(@<span class="hljs-string">"%@"</span>, jsVal);        }        JSValue *<span class="hljs-keyword">this</span> = [JSContext currentThis];        <span class="hljs-keyword">return</span> @<span class="hljs-string">"token111"</span>;    };</code><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul><ul class="pre-numbering" style=""><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>

就这么简单，检测js时间，传值给js，js调用本地方法都实现了。
我就问你们嗨不嗨。

0 0