总结一下写h5页面遇到的问题

本文总结了H5页面在iOS和Android设备上常见的兼容性问题,包括textarea字符计数不准、键盘弹出导致页面错位、输入法遮挡输入框、onblur事件覆盖点击事件以及Android上传文件按钮失效等问题,并提供了相应的解决方案。

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

因为各种原因,没有跟框架来写h5,遇到一些坑,特此铭记:

1.ios端textarea标签中maxlength定的值,如果输入”换行符“,限制会不准确,比如2000,只能输入1995左右,就无法输入
    解决方案: 使用oninput方法,利用sustring截取字符串

var len = val.length;  //获取标签内容的value值,然后计算长度,利用长度限制,截取显示的内容

if (len >= 2000) {

    val = val.substring(0, 2000);

}2.移动端h5页面,点击输入框,弹出键盘;收回键盘时,页面没有随着键盘收回而归位;
点收回键盘的时候,触发了输入框的onblur事件,事件中利用 window.scroll(0, 0);就可以了

3.移动端h5页面,android会弹出输入法遮挡输入框;
    (1)可以直接在onfocus时   target.scrollIntoView();  target是指当前触发的输入框

      记得要设position:absolute; top:0;

4.输入项的onblur事件先于并遮挡了 button的点击事件触发,so可以给onblur事件setTimeout 300ms,做一下延迟;

5.android 端内嵌入h5页面,上传文件按钮点击无效,因为android的webview禁止了<input type="file"/> 功能实现,需要android修改原生的传图方法,让h5调用,待续……

### H5 页面重复加载或显示问题解决方案 #### 1. 防止页面滚动位置丢失 当用户从当前页返回上一页时,如果页面自动滚回顶部,可以通过保存并恢复滚动位置的方式解决问题。具体方法是在离开页面前记录当前位置,并在页面重新加载时将其设置回去。 ```javascript // 记录滚动位置 window.addEventListener('beforeunload', function () { localStorage.setItem('scrollPosition', window.scrollY); }); // 恢复滚动位置 document.addEventListener('DOMContentLoaded', function () { const scrollPosition = localStorage.getItem('scrollPosition'); if (scrollPosition !== null) { window.scrollTo(0, parseInt(scrollPosition)); localStorage.removeItem('scrollPosition'); // 清除存储的位置 } }); ``` 此代码片段能够有效解决因页面刷新而导致的滚动位置丢失问题[^1]。 --- #### 2. 处理 WebView 中的重定向问题 对于 Flutter 应用中的 WebView 加载 H5 页面时遇到的重定向问题,可以采用以下方式处理: - **设定延迟机制** 当 `onPageFinished` 被调用后,在一定时间内忽略由导航请求引发的重定向行为。这样可以在 A2 返回到 A1 的过程中避免不必要的重定向操作。 ```dart class MyWebView extends StatefulWidget { @override _MyWebViewState createState() => _MyWebViewState(); } class _MyWebViewState extends State<MyWebView> { final Set<String> _redirectUrls = {}; DateTime? _lastPageFinishedTime; bool shouldAllowNavigation(String url) { if (_redirectUrls.contains(url)) { final now = DateTime.now(); if (_lastPageFinishedTime != null && now.difference(_lastPageFinishedTime!).inMilliseconds < 500) { return false; // 如果时间间隔小于500ms,则认为是重定向 } } return true; } void onPageFinished(String url) { setState(() { _lastPageFinishedTime = DateTime.now(); // 更新最后完成的时间戳 _redirectUrls.add(url); // 添加URL至集合中以便后续判断 }); } Future<bool> onNavigationRequest(String url) async { await Future.delayed(Duration(milliseconds: 10)); // 短暂延时以确保顺序正确 return shouldAllowNavigation(url); } @override Widget build(BuildContext context) { return WebView( initialUrl: 'your_initial_url', javascriptMode: JavascriptMode.unrestricted, onPageFinished: (url) => onPageFinished(url), navigationDelegate: (navigation) { return NavigationDecision.navigate; // 或者根据需求决定是否阻止 }, ); } } ``` 上述代码实现了对 Webview 导航请求的有效控制,从而减少由于频繁重定向引起的页面重复加载现象[^2]。 --- #### 3. 提升性能优化用户体验 为了进一步提升用户的体验感,可以从以下几个方面入手: - **减少无意义的网络请求** 对于一些静态资源文件(如 CSS 和 JS),建议启用浏览器缓存策略,降低每次访问都需要重新下载的可能性。 - **懒加载技术的应用** 图片较多的情况下容易造成内存溢出或者界面卡顿等问题,因此推荐引入图片懒加载插件来改善这一状况。 - **合理设计交互流程** 若某些特定场景确实存在不可避免的多次跳转动作,则需提前规划好相应的过渡动画效果以及提示信息等内容展示形式,让用户清楚知道目前所处状态是什么样的阶段之中[^3]。 --- #### 总结说明 综上所述,针对 H5 页面可能出现的重复加载或者是显示异常等情况提供了多种可行性的改进措施,包括但不限于保持原有浏览记录不变、调整框架内部逻辑结构等方面进行了探讨分析。希望这些方法可以帮助开发者更好地应对实际项目开发过程里遇见的相关难题!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值