iOS 通过js注入数据填充html页面

2017-10-31  本文已影响589人  阿汤8阿义

这是一个很趋向web开发的技术点,这里主要是自己对js有一定的了解。
首先编写了一个html模板,这里面是没有什么数据的。为了求快这一步我要前端的同事帮忙,帮我写了一个。
在就是自己搭建了webView,加载本地html.
重要的开始了,注入js代码。注入js入口是使用了stringByEvaluatingJavaScriptFromString:。
注入代码一般都是在:

- (void)webViewDidFinishLoad:(UIWebView *)webView

这里要注意到,为什么我们的js代码要到此方法中写入呢?这是因为加载html也是有生命周期的,如果我们提前加了会导致被后边的覆盖和可能就根本没有加载进来。下面就简单的介绍一下html的生命周期

html的生命周期分为5步:
1.uninitialized : 还没开始加载

2.loading : 加载中

3.loaded : 加载完成

4.interactive : 结束渲染,用户已经可以与网页进行交互。但内嵌资源还在加载中

5.complete : 完全加载完成

WebViewDidFinishLoad 被调用时,readyState 可能处在 interactive 和 complete 两种状态。当我们需要对网页中的元素进行修改时,最好在 complete 状态进行,不然我们的修改可能被重置。例如百度登录页[(http://wappass.baidu.com/passport)在iPad上打开时](http://wappass.baidu.com/passport%EF%BC%89%E5%9C%A8iPad%E4%B8%8A%E6%89%93%E5%BC%80%E6%97%B6%EF%BC%8CWebViewDidFinishLoad),WebViewDidFinishLoad 的 readyState 就是 interactive,这时假设想要在输入框里自动填写账号密码并修改输入框背景为黄色,我们的修改将会在 complete 状态时被重置。
为了解决这个问题,我们可以在 WebViewDidFinishLoad 判断 readyState 的状态,如果不是 complete,则重写 window.onload 或者 document.onreadystatechange 两个方法,他们都可以准确判断内嵌资源加载完毕的时机。

上面插入了一点html的一些技术,下面接着说js注入。刚开始我也是犯一点,导致js始终加载不进去。

NSString *js = [NSString stringWithFormat:@"document.getElementById('testdiv').innerHTML='<p>%@</p>';",@"我在这里开始的"];
    [_webView stringByEvaluatingJavaScriptFromString:js];
以上就是js注入代码很简单。这里为什么还要写上<p></p>,这是因为有innerHTML,这要告述我们要添入<p></p>。这样写管id是在div这层还是那里,都是可以加载进入的。
Paste_Image.png

图中就是我的html代码。

上一篇下一篇

猜你喜欢

热点阅读