UIWebView与JS的交互

最新推荐文章于 2018-11-07 16:24:10 发布

VIP文章呆瑞克

最新推荐文章于 2018-11-07 16:24:10 发布

阅读量701

点赞数

文章标签： objective-c uiwebview

本文链接：https://blog.csdn.net/Panwave/article/details/50147415

版权

UIWebView与JS的交互，说白了就是Objective-C和JavaScript的相互调用。Objective-C调用JavaScript代码的方法，是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScript代码最后获取执行结果。

JavaScript调用Objective-C的方法，并没有现成的API，但是有些方法可以达到相应的效果。具体是利用UIWebView的特性：在UIWebView的内发起的所有网络请求，都可以通过delegate函数得到通知。

说明：

本文是一个小白记录OC与JS交互的学习历程，适合跟我一样的小白，大神若要喷，请轻喷^_^
学习UIWebView与JS的交互之前，建议熟悉下HTML和Javascript的基本语法，不用看太多，在w3school看一到两天HTML，再看一到两天JS就行。

OC调用JS方法、JS调用OC方法（不使用第三方开源库的情况下）

准备工作：

1.新建一个Single View Application，
再新建一个ViewController（eg:BasicUsageViewController），然后在StoryBoard新建一个ViewController，拖一个UIWebView和UILabel以备用，关联webView及代理

@property (weak, nonatomic) IBOutlet UIWebView *webView;
@property (weak, nonatomic) IBOutlet UILabel *testLabel;

2.在工程中新建一个web1.html文件（Commend+N、Other、Empty、Next、输入、create），代码如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
            <title>我是HTML标题</title>
            </head>
    <body bgcolor="#9aff9a">
        <div id="addNewNodeTest">
            <p id="p1"> 这是段落A。</p>
            <p id="p2"> 这是段落B。</p>
        </div>
        <div class="page">
            <button onclick="changeUILabelText()"> 改变UILabel文字 </button>
            <button onclick="logText()"> NSLog打印文字 </button>
        </div>
    </body>

</html>

3.再在工程中新建一个test.js文件，代码如下：

//添加子节点
function addNewNodeTest () {
   
    var para = document.createElement("p");
    var node = document.createTextNode("这是新段落。");
    para.appendChild(node);
    var element = document.getElementById("addNewNodeTest");
    element.appendChild(para);
    console.log("添加子节点成功");
}

//改变UILabel的文本
function changeUILabelText() {
   
    //"changelabeltext"是你自己定的一个协议。
    //注url不要含大写字母，就算是大写字母，在`webView:shouldStartLoadWithRequest:navigationType:`代理方法里也会被替换成小写字母
    var url = "changelabeltext:" + "我是改变后的文字";
    //给document.location重新赋值就相当于webView加载一个新的URL，所以又会调用`webView:shouldStartLoadWithRequest:navigationType:`方法，然后就可以在这个代理方法里截获这个重定向请求
    document.location = url;
}

//也可以自己封装个传参数的方法
function sendCommand(cmd,param){
   
    var url = "yourprotocol:" + cmd + ":" + param;
    document.location = url;
}
//打印测试
function logText(){
   
    sendCommand("log","Hi,I'm In logText Function");
}

好了，现在可以开撸了

4.加载webView并插入测试js

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    NSString* path = [[NSBundle mainBundle] pathForResource:@"web1" ofType:@"html"];
    [self.webView loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:path]]];

    NSString *filePath = [[NSBundle mainBundle] pathForResource:@"test" ofType:@"js"];
    NSString *jsString = [[NSString alloc] initWithContentsOfFile:filePath encoding:NSUTF8StringEncoding error:nil];
    [self.webView stringByEvaluatingJavaScriptFrom

最低0.47元/天解锁文章

呆瑞克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
UIWebView与JS的交互

UIWebView与JS的交互，说白了就是Objective-C和JavaScript的相互调用。Objective-C调用JavaScript代码的方法，是通过UIWebView的 - (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;的方法来实现的。该方法向UIWebView传递一段需要执行的JavaScr
复制链接

扫一扫