# OC与JS交互的那些事儿以及JavaScriptCore框架
2017-04-04 本文已影响64人
呼哮山庄
有时候需要对我们采集的一些网页进行一些必要的修改,我们可以通过与JS交互来达到我们的目的.
-
Part1----------------UIWebView内置方式
UIWebView内置一个方式可以执行JavaScript代码，因此OC调用JS比较方便点
- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
调用这个方法需要在网页加载完成之后，因为这个时候整个html页面包括js/css已经注入到webView中，此时调用方法才会有响应，相反网页加载完成之前调用界面不会有任何响应
1.动态调整webView上的字体大小
//JS代码
NSString *changeWebStr = [NSString stringWithFormat:@"document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%f%%'",slider.value];
// 执行js代码
[webView stringByEvaluatingJavaScriptFromString:changeWebStr];
2.webView点击图片看放大图效果
可以参考此篇:webView点击图片看放大图效果
大致意思如下:
步骤1:在webViewDidFinishLoad协议方法中加载js代码
function getImages(){
var objs = document.getElementsByTagName("img");
for(var i=0;i<objs.length;i++){
objs[i].onclick=function(){
document.location="myweb:imageClick:"+this.src;
};
};
return objs.length;
};
- 注意这段代码可以单独写一个名为test.js文件,也可以以字符串的形式写在我们的代码中,字符串中的js代码需要加
\\转义.
static NSString * const jsGetImages =
@"function getImages(){\
var objs = document.getElementsByTagName(\"img\");\
for(var i=0;i<objs.length;i++){\
objs[i].onclick=function(){\
document.location=\"myweb:imageClick:\"+this.src;\
};\
};\
return objs.length;\
};";
这两种效果相同.
然后webview调用文首的方法
[_webview stringByEvaluatingJavaScriptFromString:[NSString stringWithContentsOfURL:[[NSBundle mainBundle] URLForResource:@"test" withExtension:@"js"] encoding:NSUTF8StringEncoding error:nil]];
//加载js文件
[_webView stringByEvaluatingJavaScriptFromString:jsGetImages];//加载js字符串
步骤2:接收js返回值
当点击图片的时候会实现这个代理方法（每次加载webview都会显示）
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{}
在协议方法内
step1.将url转换为string
NSString *requestString = [[request URL] absoluteString];
requestString是以myweb:imageClick:开头的图片URL,图片的URL可以获得,之后就是一些UI操作.
-
Part2-------------------JavaScriptCore框架
项目中导入该框架,引入头文件就可以使用了,包括如下5个类
- JSContext
- JSValue
- JSManagedValue
- JSVirtualMachine
- JSExport
//首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）
JSContext *context = [_WebView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext" ];
NSString *alertJS= @"alert('test js OC')"; //准备执行的js代码
[context evaluateScript:alertJS];//通过oc方法调用js的alert
js获取网页一些相关元素的代码
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
更新中. . .
