iOS与H5交互以及问题记录

最新推荐文章于 2023-08-30 10:33:48 发布

学无止境Jesse

最新推荐文章于 2023-08-30 10:33:48 发布

阅读量1.6k

点赞数 1

分类专栏： iOS 项目 objective-c h5交互文章标签： ios H5 ios与h5交互 uiwebview

本文链接：https://blog.csdn.net/Jesse0308/article/details/53170760

版权

本文详细介绍了在iOS应用中UIWebView与H5的交互，包括iOS调用JS方法，如查询、添加、删除和修改标签，以及JS调用iOS方法的两种策略。同时，文章还讨论了在H5界面内播放视频导致导航栏上移的bug及其解决办法，涉及横屏模式下的状态栏处理。

摘要由CSDN通过智能技术生成

前提：在iOS控制器中加载UIWebView，设置代理，遵守UIWebViewDelegate协议。
这里写图片描述

一、iOS调用JS方法

通过iOS调用JS代码实现起来比较方便直接调用UIWebView的方法- (nullable NSString )stringByEvaluatingJavaScriptFromString:(NSString )script;

1.查询标签

  // 查询标签
  NSString *str = @"var word = document.getElementById('word');"                       @"alert(word.innerHTML)";

[webView stringByEvaluatingJavaScriptFromString:str];

2.为网页添加标签：
NSString *str = @”var img = document.createElement(‘img’);”
“img.src = ‘icon5.jpg’;”
“img.width = 300;”
“img.heigth = 100;”
“document.body.appendChild(img);”;
[webView stringByEvaluatingJavaScriptFromString:str];

3.删除网页标签：
// 删除标签
NSString *str1 = @”var word = document.getElementById(‘word’);”
@”word.remove();”;
[webView stringByEvaluatingJavaScriptFromString:str1];

4.更改标签：
// 更改
NSString *str2 = @”var change = document.getElementsByClassName(‘change’)[0];”
“change.innerHTML = ‘hello’;”;
NSString *result = [webView stringByEvaluatingJavaScriptFromString:str2];

HTML端代码：

  <!DOCTYPE html>
     <html lang="en">
     <head>
            <meta charset="UTF-8">
            <title>iOS和H5交互</title>
     </head>
     <body>
            <p id="word">6666666666</p>
            <ul>
                 <li class="change">111111</li>
                 <li class="haha">222222</li>
                 <li>333333</li>
                 <li>444444</li>
            </