iOS中使用UIWebView与JS进行交互
iOS中使用UIWebView与JS进行交互
前一段忙着面试和复习，这两天终于考完试了，下学期的实习也有了着落，把最近学的东西更新一下，首先是使用UIWebView与JS进行交互
在webView中我静态获取了一个有图片的网页，我想为每张图片添加点击事件，就必须用到JS了
首先创建JS文件，如下：
1 //给每张img添加点击事件 2 function setImageClickFunction(){ 3 var imgs = document.getElementsByTagName("img"); 4 for (var i=0;i<imgs.length;i++){ 5 var src = imgs[i].src; 6 imgs[i].setAttribute("onClick","change_pic(src)"); 7 } 8 document.location = imageurls; 9 } 10 11 //点击图片后返回给OC的回调函数 12 function change_pic(imagesrc){ 13 var url = imagesrc; 14 // window.open("www.baidu.com") 15 document.location = url; 16 }
之后在HTML中插入该JS文件，并且在<body>中调用setImageClickFunction函数
在这里因为调用的是返回JSON的API，其中包含静态HTML和CSS链接，如果是动态网页直接load的话，在webViewWillLoad:函数中调用你的JS函数即可
1 //在加载静态Web这种情况下 2 NSString *js = [NSString stringWithFormat:@"<script type=\"text/javascript\">%@</script>", [NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"ClickImage" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]]; 3 NSString *html = [NSString stringWithFormat:@"<html><head>%@<link rel=\"stylesheet\" href=%@></head><body>%@</body></html>", js, css, body]; 4 [self.webView loadHTMLString:html baseURL:nil]; 5 6 //调用JS中的函数，为图片添加点击事件 7 - (void)webViewDidFinishLoad:(UIWebView *)webView { 8 [self.webView stringByEvaluatingJavaScriptFromString:@"setImageClickFunction()"]; 9 }
这样就为所有的图片添加了点击事件，在点击图片后，js回调给oc的下面方法
1 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { 2 NSLog(@"%@", request.URL.absoluteStrting); 3 }
在上面的方法中可以对回调的如这样的"https://pic3.zhimg.com/b4f7acc26514fb634131b04a430e6cbf_b.jpg”String进行其他处理
document：属性
document.title //设置文档标题等价于HTML的<title>标签
document.bgColor //设置页面背景色
document.fgColor //设置前景色(文本颜色)
document.linkColor //未点击过的链接颜色
document.alinkColor //激活链接(焦点在此链接上)的颜色
document.vlinkColor //已点击过的链接颜色
document.URL //设置URL属性从而在同一窗口打开另一网页
document.fileCreatedDate //文件建立日期，只读属性
document.fileModifiedDate //文件修改日期，只读属性
document.fileSize //文件大小，只读属性
document.cookie //设置和读出cookie
document.charset //设置字符集 简体中文:gb2312
document：方法
document.write() //动态向页面写入内容
document_createElement_x_x(Tag) //创建一个html标签对象
document.getElementByIdx_x_x(ID) //获得指定ID值的对象
document.getElementsByName(Name) //获得指定Name值的对象
document.body.a(oTag)
body：子对象
document.body //指定文档主体的开始和结束等价于<body></body>
document.body.bgColor //设置或获取对象后面的背景颜色
document.body.link //未点击过的链接颜色
document.body.alink //激活链接(焦点在此链接上)的颜色
document.body.vlink //已点击过的链接颜色
document.body.text //文本色
document.body.innerText //设置<body>...</body>之间的文本
document.body.innerHTML //设置<body>...</body>之间的HTML代码
document.body.topMargin //页面上边距
document.body.leftMargin //页面左边距
document.body.rightMargin //页面右边距
document.body.bottomMargin //页面下边距
document.body.background //背景图片
document.body.a(oTag) //动态生成一个HTML对象
location：子对象
document.location.hash // #号后的部分
document.location.host // 域名+端口号
document.location.hostname // 域名
document.location.href // 完整URL
document.location.pathname // 目录部分
document.location.port // 端口号
document.location.protocol // 网络协议(http:)
document.location.search // ?号后的部分
常用对象事件:
documeny.location.reload() //刷新网页
document.location.reload(URL) //打开新的网页
document.location.assign(URL) //打开新的网页
document.location.replace(URL) //打开新的网页
selection-选区子对象
document.selection
