iOS-OC调用JS的多种形式

来源：互联网发布：java内部类例子ppt 编辑：程序博客网时间：2024/06/04 19:32

在学习调用之前，说下UIWebView的数据请求及主要代理方法

通过 webView 请求数据

    // 获取资源请求路径    NSString *urlPath = [[NSBundle mainBundle] pathForResource:@"text.html" ofType:nil];    // 创建URL    NSURL *url = [NSURL URLWithString:urlPath];    // 建立请求    NSURLRequest *request = [NSURLRequest requestWithURL:url];    // 通过webView 加载数据    [self.webView loadRequest:request];

webView 的主要代理方法

//网页加载之前会调用此方法pragma mark ----------此方法可以获取 JS 内部数据-----------(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request                                                navigationType:(UIWebViewNavigationType)navigationType {    NSLog(@"%s",__func__);    // retrun YES 表示正常加载网页 返回NO 将停止网页加载    return YES;}//开始加载网页调用此方法-(void)webViewDidStartLoad:(UIWebView *)webView {    NSLog(@"%s",__func__);}//网页加载完成调用此方法-(void)webViewDidFinishLoad:(UIWebView *)webView {    NSLog(@"%s",__func__);}//网页加载失败 调用此方法-(void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error {    NSLog(@"%s",__func__);}

代理方法调用顺序
这里写图片描述

通过 JavaScriptCore 调用 JS 内部的 function 方法

    //首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）    JSContext *content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    // JS 的 alert 方法    NSString *alert_js = @"alert('我是JS代码 ByJavaScriptCore')";    //通过 oc 方法调用 js 的 alert    [content evaluateScript:alert_js];

这里写图片描述

通过 JavaScriptCore 获取JS内部的 function 方法内部的数据

JS代码

        <script type="text/javascript">            function text1(){                window.location.href = 'text://loginAction';            }            function text2(){                window.location.href = 'text://registAction';            }            function text3(){                window.location.href = 'text://logoutAction';            }        </script>

OC 代码

    首先创建JSContext 对象（此处通过当前webView的键获取到jscontext）    JSContext *content = [_webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];    NSLog(@"%@",content[@"text1"]);    NSLog(@"%@",content[@"text2"]);    NSLog(@"%@",content[@"text3"]);

这里写图片描述

通过 webView 调用 JS 的 function 方法

    // JS 的 alert 方法    NSString *alert_js = @"alert('我是JS代码 ByWebView')";    //通过 oc 方法调用 js 的 alert    [_webView stringByEvaluatingJavaScriptFromString:alert_js];

这里写图片描述

通过 webView 调用 JS 的增删改查功能

01、插入

-(void)insert {    NSString *str4 =@"var img = document.createElement('img');"    "img.src    = 'image.png';"    "img.width  = '355';"    "img.height = '250';"    "document.body.appendChild(img);";    [_webView stringByEvaluatingJavaScriptFromString:str4];}

原数据界面
这里写图片描述

插入图片后的界面
这里写图片描述

02、更改

-(void)change {    // 更改密码输入框的占位文字  将 请输入密码 -> 密码    NSString *str = @"var change = document.getElementById('password');"    "change.placeholder = '密码';";    [_webView stringByEvaluatingJavaScriptFromString:str];    // 更改按钮的的文字 将 登录 -> 注册    NSString *str1 = @"var change = document.getElementsByClassName('button')[0];"    "change.innerHTML = '注册';";    [_webView stringByEvaluatingJavaScriptFromString:str1];}

原数据界面
这里写图片描述

更改密码输入框内部的占位文字和登陆按钮的文字后
这里写图片描述

03、删除

-(void)delete {    NSString *str1 = @"var word = document.getElementById('name');";    NSString *str2 = @"word.remove();";    [_webView stringByEvaluatingJavaScriptFromString:str1];    [_webView stringByEvaluatingJavaScriptFromString:str2];}

原数据界面
这里写图片描述

删除 id 为 ‘name’ 的标签后界面
这里写图片描述

04、查看

  既然可以增删改，肯定都先获取的数据，能获取到数据，就能查看数据了，这里就不累赘了。

最后：补充原数据间接的HTML主要代码

<body>        <div id="name" align="center">            <input id="userName" placeholder="亲输入用户名"/>        </div>        <div id="pwd" align="center">            <input id="password" placeholder="请输入密码" type="password"/>        </div>        <div id="login" align="center">            <button onclick="loginAction();" class="button">登录</button>            <script type="text/javascript">                function loginAction(){                    window.location.href = 'text://loginAction';                }            </script>        </div></body>

0 0

iOS-OC调用JS的多种形式

在学习调用之前，说下UIWebView的数据请求及主要代理方法

通过 webView 请求数据

webView 的主要代理方法

通过 JavaScriptCore 调用 JS 内部的 function 方法

通过 JavaScriptCore 获取JS内部的 function 方法内部的数据

通过 webView 调用 JS 的 function 方法

通过 webView 调用 JS 的 增 删 改 查 功能

最后：补充原数据间接的HTML主要代码

通过 webView 调用 JS 的增删改查功能