iOS webView 隐藏div

最新推荐文章于 2021-06-03 06:47:50 发布
最新推荐文章于 2021-06-03 06:47:50 发布
阅读量1.5k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/miao_binbin/article/details/42965807
本文介绍了一个iOS应用中使用UIWebView的示例方法，展示了如何在页面加载完成后执行JavaScript代码以修改网页元素。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

    

//    [webView stringByEvaluatingJavaScriptFromString:@"document.getElementById('s-topBanner').style.display=\"none\";document.getElementById('s-topBanner').parentNode.removeChild(document.getElementById('s-topBanner'))"];

    

}


ios加载本地html文件白屏时间过长,iOS WebView加载网页触摸白屏bug排查及修复
weixin_30152861的博客
06-09 1051
最近兄弟团队给提了一个bug，说他们iOS端的网页，触摸后很大几率出现白屏，一开始我是很不信的，后面本地调试竟然更高概率发生。首先，系统是iOS10、11，网页是高度100%，中间部分越界滚动的一个常规效果，框架vue，不过感觉bug和vue关系不大，大概结构如下：由于希望得到平滑点的滚动，在中间滚动部分加了.page-content {-webkit-overflow-scrolling: to...
IOS webview vue h5 vue-pdf 预览
小白变不白
05-18 588
<template> <div class="main"> <!-- <header-back></header-back> --> <!-- <van-nav-bar left-text="返回" title="pdf查看" left-arrow @click-left="onClickLeft" /> --> <header-back>&lt..
ios-webView隐藏HTML网页的某些不需要的模块.zip
07-11
代码很少 ，主要功能是对以UIWebView加载的html网页进行某些不想展示的模块，进行隐藏。具体看代码
ios开发中如何隐藏各种bar
weixin_33881041的博客
03-06 96
状态条Status Bar [UIApplication sharedApplication].statusBarHidden = YES; 或者 // iOS3.2+支持[application setStatusBarHidden:NO withAnimation:UIStatusBarAnimationFade];  statusBarHidden属性支持在iOS2....
ios WKWebview弹出键盘上的按钮隐藏
zlhuan
11-06 2110
#import @interface WKWebView (AccessoryHiding) @property (nonatomic, assign) BOOL hackishlyHidesInputAccessoryView; @end #import "WKWebView+AccessoryHiding.h" #import  
UIWebView隐藏右侧和底部滚动条，去掉滚动边界的黑色背景,禁止左右滑动
追梦
04-17 4218
UIWebView隐藏右侧和底部滚动条，去掉滚动边界的黑色背景,禁止左右滑动
网页加载去除网页元素 webView
haibing_521的博客
11-02 661
/**  *  页面加载完成之后调用  *  *  @param webView    实现该代理的webview  */ - (void)webViewDidFinishLoad:(UIWebView *)webView {     [webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByCla
iOS中精确计算WebView高度的方法示例
08-27
}</style></head><div id=\"webview_content_wrapper\">%@</div>",f_Device_w-30,detailDic[@"content"]]; [_detailWebView loadHTMLString:htmlcontent，...'); ``` 五、总结 在这篇文章中，我们详细讨论了如何...
oc webview 添加水印
flg1554112450的博客
07-28 1158
此处注入js，无需等待所有内容加载完毕 - (void)webViewDidStartLoad:(UIWebView *)webView{ [self performSelector:@selector(addWaterAction) withObject:self afterDelay:1]; } - (void)addWaterAction{ [self addWater]; } 此处注入js，可能要等所有内容加载完毕，才能添加水印上去 - (void)webView...
ios-webView添加网络css和网络html.zip
07-11
在iOS开发中，WebView是一种非常常见的组件，它允许我们在原生应用中展示HTML内容，实现与Web页面的交互。这个压缩包"ios-webView添加网络css和网络html.zip"很可能包含了一个示例项目，用于演示如何在iOS的WebView...
iOS开发如何删掉不可删除的桌面快捷方式【Web Clip】
热门推荐
sail的技术博客
06-25 9万+
丝瓜视频网页版如何删除？丝瓜官网怎么删除？ 不小心安了丝瓜视频，描述文件安装了，可是卸载不了了，哪位大神有办法？
android不加载显示div内容,javascript - 立即在Android WebView中隐藏div，而不是在加载网页后隐藏 - 堆栈内存溢出...
weixin_29238147的博客
06-03 735
我有一个名为downloadapp的div，我想向访问我的移动网站而不是使用我的Android应用程序的用户显示。 因此，我需要为已经使用我的应用程序的用户隐藏该div。我的代码：private void startWebView(String url) {webView.getSettings().setJavaScriptEnabled(true);webView.setWebViewCli...
Android WebView隐藏H5的部分内容
xiao_nian的博客
12-14 6442
一、说明        产品有个需求，要在App中打开天猫购物的链接，并且要隐藏掉H5页面的某些内容，让用户只能浏览商品，而不能购买，这个就需要在Java代码中操作WebView，让H5页面加载完成后能够隐藏掉某些内容。 二、分析       首先我们来看一下天猫购物的链接地址：https://market.m.taobao.com/apps/market/need/yxIndex.html...
webview隐藏h5部分控件的方法
格调的博客
05-24 3341
private WebViewClient mWebViewClient = new WebViewClient() { @Override public boolean shouldOverrideUrlLoading(WebView view, String url) { } @Override ...
web前端,js实现div隐藏显示
翟浩浩Android专栏
09-28 4899
显示/隐藏             function toggle(targetid){             if (document.getElementById){                 target=document.getElementById(targetid);                 if (target.style.display=="bl
webView删除网页元素
ffffjr的博客
10-11 1091
个人笔记
Android webview加载H5隐藏某个固定的标签
猫熊的弟弟的博客
07-14 962
今天接到一个需求，要求Webview在加载H5的时候需要隐藏标题。刚接到这个任务的时候第一反应是直接让前端人员删除不久行了，然后就去和产品说，经过我的据理力争，我妥协了。唉！移动端不好做啊！！！ 算了，既然来需求了，那就撸起袖子干吧！ 还好我们公司的前端对于标题使用的是同一个Class（没有使用id) 这样我弱小的心灵也得到了些许安慰。给前端人员点个赞。 进入正题 1.首先我们要先监听页面加载完成的情况 web_common_layout.setWebViewClient(new MyWebViewCli
webview ios安全区
最新发布
03-27
<think>好的，我现在需要处理用户在iOS的WebView中适配安全区的问题，特别是底部的小黑条。用户提到在微信小程序的WebView中嵌入H5页面时，使用env()和constant()可能不生效，所以需要其他解决方案。 首先，我应该回忆一下相关的知识。记得iOS的安全区域是指屏幕边缘不被刘海、圆角或底部指示条覆盖的部分。在网页中，通常可以通过CSS的viewport-fit属性和env()函数来调整布局。但根据用户提供的引用[^1]，微信WebView中的H5使用这些方法可能无效，所以可能需要其他方法。 接下来，用户提供的引用[^2]提到在Vue项目的index.html中配置viewport的meta标签，设置viewport-fit=cover。这可能是一个关键步骤，因为设置viewport-fit为cover可以让页面扩展到整个屏幕，包括安全区域之外。然后结合使用padding-bottom来避免内容被遮挡。 另外，引用还提到在顶层的H5应用做兼容处理，可能需要手动添加padding。例如，检测iOS设备，然后动态添加底部内边距。这可能涉及到JavaScript判断设备和屏幕特性，然后调整样式。 可能的步骤包括： 1. 设置viewport的meta标签，确保viewport-fit=cover。 2. 使用CSS的safe-area-inset-bottom环境变量来添加底部padding。 3. 对于不支持env()的旧版本iOS，使用constant()作为回退。 4. 在微信WebView中，可能无法直接使用这些变量，因此需要用JavaScript检测并动态调整样式，比如通过计算底部安全区域的高度，然后手动设置padding。 同时需要考虑不同iOS版本的兼容性，比如env()和constant()的使用顺序，以及如何确保在不支持的浏览器中也能正常显示。另外，可能还需要测试不同的WebView环境，比如微信内置的浏览器和其他浏览器中的表现差异。 另外，用户提供的引用中提到微信官方文档可能有相关说明，但用户没有给出具体内容，可能需要查阅微信的文档确认是否有特别的处理方式。例如，是否需要在微信的WebView中启用某些设置，或者是否有特殊的API可以调用。 总结可能的解决方案： - 配置meta标签，设置viewport-fit=cover。 - 使用CSS的padding-bottom: env(safe-area-inset-bottom)和constant()来适配。 - 在微信WebView中，可能需要通过JavaScript动态计算安全区域高度并应用样式，因为env()可能不生效。 - 结合Vue等框架，在公共的HTML文件中进行配置，确保所有页面都应用这些样式。 可能需要测试这些步骤在不同设备和环境中的效果，确保底部内容不会被小黑条遮挡。</think>### iOS WebView安全区适配解决方案 #### 1. 设置Viewport Meta标签 在HTML的`<head>`中添加以下meta标签，强制页面覆盖整个屏幕（包括安全区）： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> ``` 此配置允许页面内容扩展到刘海屏和底部安全区域。 #### 2. CSS环境变量适配 通过CSS的`env()`和`constant()`函数动态调整底部间距： ```css body { padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-11.2 */ padding-bottom: env(safe-area-inset-bottom); /* iOS 11.2+ */ min-height: 100vh; /* 确保高度占满屏幕 */ } ``` 需注意在微信WebView中可能需要**手动计算安全区域高度**，例如通过JavaScript动态添加padding[^1]。 #### 3. 微信WebView特殊处理 若在微信小程序中内嵌H5页面，可通过以下方法适配： ```javascript // 检测iOS设备并动态调整样式 if (/iPhone/i.test(navigator.userAgent)) { const safeArea = window.innerHeight - document.documentElement.clientHeight; document.body.style.paddingBottom = `${safeArea}px`; } ``` 此方法绕过`env()`限制，直接计算底部安全区高度。 #### 4. 容器元素适配方案 针对固定定位的底部导航栏，添加安全区占位元素： ```css .bottom-tab { position: fixed; bottom: 0; left: 0; right: 0; height: 50px; /* 原始高度 */ padding-bottom: env(safe-area-inset-bottom); background: white; } ``` 同时添加占位元素避免内容被遮挡： ```html <div class="safe-area-placeholder"></div> <style> .safe-area-placeholder { height: env(safe-area-inset-bottom); background: transparent; } </style> ``` #### 5. 响应式布局验证 使用CSS媒体查询确保横竖屏切换时的适配： ```css @media screen and (orientation: landscape) { body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值