ios oc与html交互

作者: fulen | 来源:发表于2017-03-20 13:49 被阅读51次

新建一个html文件,如图

新建空的文件 保存为html文件

一、 1.1 改变html的标签

<html>
    <head>
       <meta charset="UTF-8">
        <title>改变html中的标签</title>
    </head>
    <body>
       <p id="word">123456789</p>
       <ul>
          <li class="change">你好</li>
          <li>我好</li>
          <li>大家好</li>
          <li>真的好</li>
       </ul>
    </body>
</html>

1.1.1 在mainstoryborad中新建一个webView,如图

创建webView

1.1.2

#import "ViewController.h"

@interface ViewController ()<UIWebViewDelegate,UIPickerViewDelegate,UINavigationControllerDelegate>

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

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    // 1.增删改查 index.html
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];

实现代理方法

// 1.增删改查 index.html
#pragma mark - **************** 1.改变html中的字符串
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    // 删除
    NSString *remove = @"var word = document.getElementById('word');";
    NSString *removeFinal = @"word.remove();";
    [webView stringByEvaluatingJavaScriptFromString:remove];
    [webView stringByEvaluatingJavaScriptFromString:removeFinal];
    
    // 更改
    NSString *change = @"var change = document.getElementsByClassName('change')[0];"  "change.innerHTML = '改变了';";
    [webView stringByEvaluatingJavaScriptFromString:change];
    
    // 插入
    NSString *insert = @"var img = document.createElement('img');"
                        "img.src = 'IMG_0001.JPG';"
                        "img.width = '80';"
                        "img.height = '180';"
                        "document.body.appendChild(img);";
    [webView stringByEvaluatingJavaScriptFromString:insert];
}

1.1.3 改变前后的效果图

原加载的html 用oc修改后的html

二、改变网页中标签

2.1 新建xianhua.html

暂时不适用本地html,在viewDidload中添加代码

// 2.加载网页 网页版手机鲜花网 改变网页中标签
    NSURL *url = [NSURL URLWithString:@"http://www.xianhua.cn/m/?u=318719"];
//    NSURL *url = [[NSBundle mainBundle] URLForResource:@"xianhua" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    self.webView.backgroundColor = [UIColor grayColor];

2.1.2加载效果如图

原网页加载效果

2.2.1 遵循代理,修改原网页标签

// 2.加载网页 网页版手机鲜花网 改变网页中标签
#pragma mark - **************** 2.操作网页 --手机鲜花网
- (void)webViewDidFinishLoad:(UIWebView *)webView{
    NSString *str1 = @"var h1 = document.getElementsByTagName('h1')[0];"
                     "h1.innerHTML='我把它改了哦';";
    [webView stringByEvaluatingJavaScriptFromString:str1];
    NSString *str3 = @"document.body.outerHTML";
    NSString *html = [webView stringByEvaluatingJavaScriptFromString:str3];
    NSLog(@"html======%@",html);
}

2.2.2 修改后的效果如图

修改后的效果

2.2.3 将打印的html复制到xianhua.html中

打印的html

2.3.1 将加载方式换成加载本地html

- (void)viewDidLoad {
    [super viewDidLoad];
// 2.加载网页 网页版手机鲜花网 改变网页中标签
//    NSURL *url = [NSURL URLWithString:@"http://www.xianhua.cn/m/?u=318719"];
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"xianhua" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    self.webView.backgroundColor = [UIColor grayColor];
}

2.3.2从本地加载html的效果

本地加载xianhua.html

三、访问系统相册

3.1.1新建本地html

<html>
    <head>
        <meta charset="UTF-8">
    </head>
    
    <body>
        <button onclick="getImage()">访问相册</button>
        
        <script>
            function getImage(){
<!--               alert(0);-->
                window.location.href = '123://image';
            }
        </script>
    </body>
    
</html>

3.1.2加载本地html

- (void)viewDidLoad {
    [super viewDidLoad];
// 3.访问系统相册
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"interviewImg" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    self.webView.backgroundColor = [UIColor grayColor];
}    

3.1.3遵循代理,调用相册

// 3.访问系统相册
#pragma mark - **************** 3.访问系统相册
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    NSString *str = request.URL.absoluteString;
    NSRange range = [str rangeOfString:@"123://"]; // 注意用http会出现尾缀多/的问题
    if (range.location != NSNotFound) {
        NSString *method = [str substringFromIndex:range.location+range.length];
        NSLog(@"method ======= %@",method);
        SEL sel = NSSelectorFromString(method);
        [self performSelector:sel];
    }
    NSLog(@"str ====== %@",str);
    return YES;
}
- (void)image{
    UIImagePickerController *pickerController = [[UIImagePickerController alloc] init];
    pickerController.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
    [self presentViewController:pickerController animated:YES completion:nil];
}

3.2 效果如图

调用系统相册

四、拿到html中input的值

4.1 新建userMessage.html

<html>
  <head>
      <meta charset="UTF-8">
  </head>

  <body>
      <p></p>
      <span>用户名</span>
      <input id="userName">
      <p></p>
      
      <span>密码</span>
      <input id="pwd" type="password">
      <p></p>
      
      <button id="btn">登录</button>
      
      <script>
          var userName = document.getElementById('userName');
          var pwd = document.getElementById('pwd');
          var btn = document.getElementById('btn');
          
          
<!--          function getMessage(){-->
<!--              var name = userName.value;-->
<!--              var password = pwd.value;-->
<!--              -->
<!--              window.location.href='123://'+name+'?'+password;-->
<!--<!--              alert(0);--> // 此行注释了-->
<!--          }-->
      
            btn.onclick = function(){
                var name = userName.value;
                var password = pwd.value;
                window.location.href='123://'+name+'?'+password;
            }
      </script>
      
  </body>

</html>

4.2 加载本地userMessage.html

- (void)viewDidLoad {
    [super viewDidLoad];
    // 4.拿到用户名和密码
    NSURL *url  = [[NSBundle mainBundle] URLForResource:@"userMessage" withExtension:@"html"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:request];
    self.webView.backgroundColor = [UIColor grayColor];
}

4.3 效果如图

加载html页面

4.4 遵循代理,拿到html中input的值

// 4.拿到用户名和密码
#pragma mark - **************** 拿到用户名和密码
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType{
    
    NSString *str = request.URL.absoluteString;
    NSRange range = [str rangeOfString:@"123://"];
//    NSLog(@"str ===== %@",str);
    if (range.location != NSNotFound) {
        NSString *method = [str substringFromIndex:range.location+range.length];
        NSLog(@"method ====== %@",method);
        
    }
    return YES;
}

4.5 拿到用户名和密码,并输出打印结果

输出的打印结果

相关文章

网友评论

    本文标题:ios oc与html交互

    本文链接:https://www.haomeiwen.com/subject/wcnbnttx.html