美文网首页
iOS 通过js注入数据填充html页面

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

作者: 阿汤8阿义 | 来源:发表于2017-10-31 18:12 被阅读589次

这是一个很趋向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代码。

相关文章

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

    这是一个很趋向web开发的技术点,这里主要是自己对js有一定的了解。首先编写了一个html模板,这里面是没有什么数...

  • chrome扩展插件开发

    原理和消息机制 简单的说就是通过注入js的方法通过消息发布/订阅实现对浏览的html页面进行互操作,比如填充数据或...

  • iOS 分析一次有意思的需求——HTML代码注入

    级别: ★★☆☆☆标签:「HTML代码注入」「WKScriptMessageHandler」「iOS与JS交互」...

  • swift中wkwebview OC向js传值(token和us

    WKUserScript就是帮助我们完成JS注入的类,它能帮助我们在页面填充前或js填充完成后调用。 let ke...

  • WKWebView与Js实战

    通过本篇文章,至少可以学习到: OC如何给JS注入对象及JS如何给IOS发送数据 JS调用alert、confir...

  • OC 与 html 的交互的使用

    通过本篇文章,至少可以学习到: OC如何给JS注入对象及JS如何给IOS发送数据 JS调用alert、confir...

  • js--页面获取数据

    js页面获取数据 <...

  • 网易新闻详情页

    通过请求html页面,自己解析数据,自己拼接html,自定义css和js文件,可以修改页面上的所有样式。实现点击图...

  • Python对Crypto解密

    有网站在前端页面上对某些数据进行js加密后渲染填充的,通过抓包拿到解密的方法,但有大量的数据想通过python来解...

  • WKWebView JS注入

    碰到个webview页面突然被放大了,查看html源码发现: 所以想到了对html进行js注入 WKUserScr...

网友评论

      本文标题:iOS 通过js注入数据填充html页面

      本文链接:https://www.haomeiwen.com/subject/lwobpxtx.html