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


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

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

微信号:                                             公众号


展开阅读全文

没有更多推荐了,返回首页