iOS 基于JavaScriptCore 不等webView加载完毕就交互，网页获取原生内容。 webView的高级用法之JS交互，js与oc的相互调用

一：本文解决的问题：

   1.不等webView加载完毕，就能获取原生的内容，

   2.举个例子： 加载一个城市生活网页，不等加载完成，h5端获取原生定位所在城市，然后根据城市名不同加载不同的城市生活内容。。（例子不恰当，网页时可以自己定位的，忽略，意思懂就行）

二：本文默认您已经了解JS交互的一些内容了，若您不明白，请看这篇文章，里面介绍了JS交互的详细内容，demo地址等 http://blog.csdn.net/horisea/article/details/52191573

三.进入正文：

  1.项目中JS交互的地方是,一般的交互方式是这样的，网页加载完毕，传递上下文，就能交互了。

 - (void)webViewDidFinishLoad:(UIWebView *)webView{

  ——context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

_context[@"testobject"]=testJO;

  一直以来自己的认知是必须在webView加载完之后，，拿到context，将定义好的对象赋值过去；

   缺点：：必须在加载完之后才能调用，那么h5端获取城市名时，此时网页还没加载好，肯定是取不到的。。

  现在开始思考解决办法：

 四 .解决办法：

 1.从H5端考虑解决

H5知道iOS已经加载好之后，再去取城市名，window.onload方法取获取城市名，看起来很有用的样子。

当然这些肯定不是我们iOS端做的，直接让h5开发人员设置就行了，事实证明，这样是不可以的，取不到

是不是太急了，我们不妨睡一会再去，1秒后取取试试，，

setTimeout(function(){

}, 1000); （这里的1000是1000ms = 1s）

window.onload = function(){

我擦，可以了

再尝试一下，把1000ms改成1ms（毫秒） 马丹，还是可以的 。。。

问题解决。

思考：可能是上下文的桥接就需要这1ms的时间吧，，再低的没试过  当然这些都是H5开发人员的活，而且我觉得这个不靠谱

2.从客户端的角度出发去解决问题

  1.webView加载的时候，就拿到上下文，然后传值，想着很完美

  2.如何提前给呢  说实话我不知道，也不知道有，但既然有这样的需要，看看前辈们有造好的轮子吧

 http://www.jianshu.com/p/939db6215436附加上博客链接将demo下载下来

直接将UIWebView+TS_JavaScriptContext，拖进工程，这是基于运行时，给webView增加的protocol，在JavaScriptCore创建好上下文时，就进行桥接传递值了。

然后将

 - (void)webViewDidFinishLoad:(UIWebView *)webView{

 _context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

_context[@"testobject"]=testJO;

; }

替换成下面这段

#pragma mark - Black Technology

    - (void)webView:(UIWebView *)webView didCreateJavaScriptContext:(JSContext*) ctx{

       _context[@"testobject"]=testJO;

    }

然后就可以为所欲为了。。 至于UIWebView+TS_JavaScriptContext具体实现，自己研究吧，

五：写在最后的：  转载注明出处

      1.JS交互必看博客：http://blog.csdn.net/horisea/article/details/52191573 里面有demo，直接替换demo里的方法就能在加载完成之前交互了额。

      2.webView离线缓存：http://blog.csdn.net/horisea/article/details/53815596

      3.RN和原生的交互：http://blog.csdn.net/horisea/article/details/54176417

      4.动态返回行高：http://blog.csdn.net/horisea/article/details/52025886

     5.带有文本框的cell数据处理：http://blog.csdn.net/horisea/article/details/51872619

如果你喜欢这篇文章，或者有任何疑问，可以扫描第一个二维码，加楼主好友哦

也可以扫第二个二维码，关注楼主个人微信公众号。这里有很多生活，职业，技术相关的文章哦。欢迎您的到来。

微信号：                                             公众号