1、UIWebview
给UIWebview 添加一个头部(尾部同理)。
// 1.先设置webview的scrollview内容上边距为要添加的头部的高度
webView.scrollView.contentInset=UIEdgeInsetsMake(80, 0, 0, 0);
// 2、把头部视图添加到webview的scrollview上 (注意:添加的视图的Y值是负的)
UIView *titleview = [[UIView alloc] initWithFrame:CGRectMake(0, -70, SCREEN_MAIN_WIDTN, 70)];
[self.web.scrollView addSubview:titleview];
// 3、有时候设置了偏移量但是webview的scrollview的内容还是没动(添加了头部但是看不见) 这时候需要设置scrollview的内容向下偏移一个负值(让scrollview滚动顶部)
[self.web.scrollView setContentOffset:CGPointMake(0, -80)];
2、加载HTML字符串图片过宽超出屏幕
//给img标签加上一个样式 限制宽度(需要修改其他样式同理)
NSString *newWebStr = [webString stringByReplacingOccurrencesOfString:@"<img" withString:@"<img style=\"max-width:95%; height:auto\""];
3、UIWebview 与JS交互
JS 调用OC (js 调用方法都在子线程 操作UI 请切换到主线程 不然可能会崩溃)
//1.1、JS 中写要调用的方法“callOCFunction”
function clickBtn(){
var dict = {"name":"tom","age":"20"};
callOCFunction(dict);
}
//1.2、在OC中引入 “JavaScriptCore” 给JS 对象绑定方法
#import <JavaScriptCore/JavaScriptCore.h>
-(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"callOCFunction"]=^(NSDictionary *dic){
NSLog(@"%@",dic);
};
}
//2.1、另外一种方式是JS 端通过对象来调用OC 方法
function clickBtn(){JS 中写要调用的方法“Obj.callOCFunction” Obj 是一个对象
var dict = {"name":"tom","age":"20"};
Obj.callOCFunction(dict);
}
//2.2、在OC中 给JS 对象绑定对象并遵守协议实现协议方法
// 写一个协议 让你的类遵守这个协议
@protocol JSObjcDelegate<JSExport>
-(void)callOCFunction:(NSDictionary*)dic;
@end
-(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
context[@"Obj"]=self;// 绑定对象
}
// 实现协议方法
-(void)callOCFunction:(NSDictionary *)dic{
NSLog(@"%@",dic);
}
OC 调用JS
// 'callJsFunction'为js中的一个方法 ‘JSValue’ 为返回值(UIWwebview)
-(void)webViewDidFinishLoad:(UIWebView *)webView{
JSContext *context=[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
NSString *jsstr=[NSString stringWithFormat:@"callJsFunction('oc-str')"];
JSValue *jsvaule = [context evaluateScript:jsstr];
NSLog(@"%@",jsvaule);
}
// WKWebview 调用JS方法
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation{
NSLog(@"----down----");
NSString *js = @"callJsFunction('hahaha')";//调用js方法
[webView evaluateJavaScript:js completionHandler:^(id _Nullable response, NSError * _Nullable error) {
NSLog(@"response:%@..error:%@",response,error);// js 调用结束的回调方法
}];
}
4、WKWebview与JS交互
// JS 调用OC
#import <WebKit/WebKit.h>
@interface WKWebVC ()<WKScriptMessageHandler,WKNavigationDelegate>
@end
//1、该对象提供了通过js向web view发送消息的途径
WKUserContentController *userContentController = [[WKUserContentController alloc] init];
//添加在js中操作的对象名称,通过该对象来向web view发送消息
[userContentController addScriptMessageHandler:self name:@"FirstJsObect"];
//2、配置wkwebview
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc]init];
config.userContentController = userContentController;
//3、通过初试化方法,生成webview对象并完成配置
WKWebView *web=[[WKWebView alloc] initWithFrame:self.view.bounds configuration:config];
NSString *path=[[NSBundle mainBundle] pathForResource:@"test" ofType:@"html"];
[web loadFileURL:[NSURL fileURLWithPath:path] allowingReadAccessToURL:[NSURL fileURLWithPath:path]];
web.navigationDelegate=(id)self;
#pragma WKScriptMessageHandler (需要实现这个协议方法 才能收到js 发过来的消息)
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
NSLog(@"js 发送过来的数据----%@",message.body);
}
// js 中调用方式如下
function clickBtn(){
var dict = {"name":"tom","age":"20"};
window.webkit.messageHandlers.FirstJsObect.postMessage(dict);
}
网友评论