js 与oc 交互

来源：互联网发布：淘宝怎么输入淘口令编辑：程序博客网时间：2024/06/06 15:41

现在随着html5的发展。越来越多的公司采用混合式开发。这主要基于html5的跨平台，简单.可以节约开发成本和开发时间。在iOS与H5开发中最重要的就是js交互。下面就以ocy与js操作，简单聊聊。

1 本地 html与oc

html 如下；

<!DOCTYPE html>

<html>

<head>

<style>

#three{

position:absolute; //通过

left:400px;

top:40px;

width:100px;

height:100px;

background-color:blue;

}

</style>

</head>

<body>

</div>

<p></p>

<br/>

</script>

</body>

</html>

在body上添加了一个div 给了些宽高；一张图片

new file 新建一个文件 index.html 注意后缀

oc 中 webview加载：

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate>

@property(nonatomic,strong)UIWebView* webView;

@end

@implementation ViewController

- (void)viewDidLoad {

[superviewDidLoad];

// Do any additional setup after loading the view, typically from a nib.

self.webView=[[UIWebViewalloc]init];

self.webView.frame=CGRectMake(0,0,self.view.frame.size.width,300);

[self.viewaddSubview:self.webView];

//!!!

self.webView.delegate=self;

NSURL *path=[[NSBundlemainBundle]URLForResource:@"index"withExtension:@"html"];

NSURLRequest *request=[NSURLRequestrequestWithURL:path];

[self.webViewloadRequest:request];

}

// 网页加载完成

-(void)webViewDidFinishLoad:(UIWebView *)webView{

//删除蓝色div

NSString*str=@"var delegate = document.getElementById('three');delegate.remove();";

NSString*pt=@"/Users/yst911521/Desktop/Html5_js_01/Html5_js_01/屏幕快照 2016-12-31 下午4.49.34.png";

//替换图片

NSString*st2=[NSStringstringWithFormat:@"var img= document.getElementsByTagName('img')[0];img.style.width='100px';img.style.height='100px';img.src='%@';",pt];

[self.webViewstringByEvaluatingJavaScriptFromString:str];

[self.webViewstringByEvaluatingJavaScriptFromString:st2];

}

@end

通过webviewdelegate 里的代理方法在html加载完成时处理

NSString*str=@"var delegate = document.getElementById('three');delegate.remove();";

//var delegate = document.getElementById('three')

获取 id = 'three' 的div

delegate.remove(); //这句就是删除掉delegate 也就是 id =‘three’的div

//更换图片

NSString*pt=@"/Users/yst911521/Desktop/Html5_js_01/Html5_js_01/屏幕快照 2016-12-31 下午4.49.34.png";

//替换图片

NSString*st2=[NSString stringWithFormat:@"var img= document.getElementsByTagName('img')[0];img.style.width='100px';img.style.height='100px';img.src='%@';",pt];

pt 为工程中图片路径

st2 var img= document.getElementsByTagName('img')[0];//获取图片标签（获取图片标签有多种防方式 1 id 2 class 3 name 4 typeclass 这里采用 4）

img.style.width='100px';img.style.height='100px'; //改变图片的宽高

//img.src='%@';",pt ;这句就是跟换图片 src 引用本地资源用本地一张图片替换

2 服务其请求html

同理拿到标签进行修改。唯一的区别是需要看懂别人的html根据不同情况用不同方法拿到标签

3 html 调用 oc

有时需要html里的点击事件进行操作

同样创建webview 遵循代理

html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

//js

function getimage(){

window.location.href='yst://getimage';

//alert(0);

}

</script>

</body>

</html>

//创建了一个button

oc加载html

- (void)viewDidLoad {

[superviewDidLoad];

// Do any additional setup after loading the view.

self.view.backgroundColor=[UIColorwhiteColor];

self.webView=[[UIWebViewalloc]init];

self.webView.frame=CGRectMake(0,0, self.view.frame.size.width,300);

[self.viewaddSubview:self.webView];

//!!!

self.webView.delegate=self;

NSURL *path=[[NSBundlemainBundle]URLForResource:@"htmlUserOc.html5"withExtension:@"html"];

NSURLRequest *request=[NSURLRequestrequestWithURL:path];

[self.webViewloadRequest:request];

self.pickER=[[UIImagePickerControlleralloc]init];

}

//拦截请求

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{

NSString*str =request.URL.absoluteString;

NSLog(@"******%@",str);

NSRange range = [strrangeOfString:@"yst://"];

if (range.location !=NSNotFound) {

NSString * mm = [strsubstringFromIndex:range.location +range.length];

SEL sel =NSSelectorFromString(mm);

[selfperformSelector:sel ];

}

// NSLog(@"---%@",mm);

returnYES;

}

//点击时改变背景色

-(void)getimage{

self.view.backgroundColor=[UIColorgreenColor];

}

0 0