伪类在ios移动端浏览器内无效的解决方法

最新推荐文章于 2024-08-12 03:36:53 发布
最新推荐文章于 2024-08-12 03:36:53 发布
阅读量2.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 移动端 文章标签： ios 移动设备 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_37794497/article/details/78646876
本文介绍了解决iOS系统浏览器中a:active样式无法正常显示的问题。通过为body元素添加touchstart事件监听器，可以有效触发链接的:active状态。

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

a:active 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。


document.body.addEventListener('touchstart',function(){},false);
mui移动端浏览器plus改造
qq_37820521的博客
01-27 1004
这里写目录标题关于plusplus是哪里来的问题不要在没有plus和mui的环境下调用相关API改造plus 关于plus plus是哪里来的问题 plus是5+Runtime的内部对象。 5+runtime内部内置了plus对象。 因为plus和mui不一样，plus是引擎级别的，不需要前端框架。而mui是前端框架，所以是要引入mui.js才能使用的。 不要在没有plus和mui的环境下调用相关API 普通浏览器里没有plus环境，只有HBuilder真机运行、打包后、或流应用环境下才能运行plus a
移动端ios:active伪类无效的兼容解决方案
Alde_baran的博客
12-22 1940
苹果手机浏览页面中设置的css伪类：active失效。查找资料发现要让css active伪类生效，只需要给这个元素的touchstart/touchend绑定一个空的匿名方法即可成功。 :active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主
如何 a:hover伪类在ios移动端浏览器内无效的解决方法
Zhooson的博客
03-31 1059
添加链接描述
伪类选择器:hover，:active失效问题
qq_57980861的博客
03-11 332
伪类选择器:hover，:active失效问题
a:hover伪类在ios移动端浏览器内无效的解决方法
weixin_30508241的博客
11-26 224
a:hover 设置的样式在ios系统的浏览器内显示不出来，看来在iOS系统的移动设备中，需要在按钮元素或body/html上绑定一个touchstart事件才能激活:active状态。 方法 一： 　　document.body.addEventListener('touchstart',function(){}); 方法二： 　　给body添加ontouchstart 　　　<...
ios 上h5点击无效_ios h5 点击事件失效及点击延迟
weixin_35945480的博客
12-23 1269
1.ios h5 app avalon tap事件失效使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-tap被内容遮住不执行.用MUI的on tap事件可以执行但改动较大,于是改为ms-on-click.(但是click事件有300ms延迟,解决方法在标题2处),搜索到以下解决方法:解决办法有 4 种可供选...
移动端网页解决CSS的active伪类无效的方法
09-24
然而，有时候在某些移动端浏览器，特别是iOS设备上，`:active`伪类可能会表现得不正常或者完全无效。本文将深入探讨这个问题并提供解决方案。 `:active`伪类通常用于给链接、按钮等元素添加一种临时的视觉反馈，...
clipboard.js在移动端复制失败的解决方法
10-18
最近在使用clipboard.js碰到的一个小问题，通过查找相关资料解决了，所以下面这篇文章主要给大家介绍了关于clipboard.js在移动端复制失败的解决方法，需要的朋友可以参考借鉴，下面来一起学习学习吧
关于canvas.toDataURL 在iOS运行失败的问题解决
11-19
在开发Web应用时，我们...通过上述方法，应该能够定位并解决`canvas.toDataURL()`在iOS设备上运行失败的问题。记住，Web开发中的跨平台兼容性问题往往需要耐心和细致的调试，每个平台和浏览器都有其独特的特性与限制。
css样式对IOS设备苹果手机不支持解决方法
东方雨林_Lin的博客
07-14 9861
css样式对IOS设备苹果手机不支持解决方法 在写移动端的网页的时候发现到苹果的设备上浏览的时候按钮变成了苹果的灰色按钮。 在class文件中写入下面的代码可以解决。 input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;} textarea { -webkit-...
解决ios使用伪元素content:‘2714’ 颜色显示为黑色。颜色不对
weixin_43923808的博客
05-06 583
.check_true ::after { content: '\2714';//修改为 content: '\2714\fe0e'; color: #ffffff; font-size:12px; }
css伪类显示异常：冒号和伪类
weixin_44187116的博客
07-06 347
/*冒号和hover间没有空格*/ .box:hover{...} /*冒号和hover间有空格*/ .box: hover{...} 测试可得，只有在没有空格的情况下才能正常显示，失之毫厘。
微信小程序伪元素显示问题解决iPhone
qq_19716091的博客
04-28 889
针对这个问题只需要给不显示下划线的元素也设置一个伪元素就可以解决了,代码示例在最后。iPhone上偶现奇怪问题,点击新的元素之后旧的元素直接消失,除非重新点击。只需要将css修改之后就可以解决这个问题。有问题的wxss样式。
使用伪元素无效
weixin_42645102的博客
11-11 1300
使用伪元素无效 今天使用伪元素 ::after 一直没有效果，确定写了content并且没有拼错单词。反复检查都没有效果，最后复制正确的代码对比，发现问题出在::after前有个空格。 li ::after /*错误*/ li::after /*正确*/ ...
两台同样iphone ios css样式不生效
weixin_36845503的博客
08-12 297
在两台同样iPhone上CSS样式不生效的解决方案 在web开发中，有时您可能会面临CSS样式在某些设备上不生效的情况。这种情况在iPhone的不同设备上尤为明显，即使是同一型号，运行相同版本的iOS，样式却可能会有所不同。本文将指导您完成诊断和解决“两台同样iPhone iOS CSS样式不生效”的问题，确保您的代码能够...
伪元素
Forever212121的博客
11-07 658
层叠样式表（CSS）的主要目的是给HTML元素添加样式，然而，在一些案例中给文档添加额外的元素是多余的或是不可能的。事实上CSS中有一个特性允许我们添加额外元素而不扰乱文档本身，这就是“伪元素”。 你一定听说过这个词，尤其是当你一直关注着我们的教程。点此浏览原作者的其他文章 事实上，的确有一些CSS家族的成员（CSS选择器）被分类为伪元素比如：:first-line, :first-let
css中的伪类after与before失效？说说其注意点
青菜陪白豆腐的博客
07-24 4万+
一、来个小小的叙事先：         一段时间之前在跟着boss做一个项目的时候boss教了我一个偷懒的技巧，嘛，当时还是刚入门啥都不会啊，学个偷懒的技巧什么的我在心里还真是默默的吐槽了一下。boss说有些页面写的时候可以通过写after或before的伪类来达到页面的效果，例如说写表单时label后面可以加如 “*密码由数字，字母和下划线组成 ” 的红色注意标语。或者加个小图标啥的，然后他又...
移动端:active伪类无效的解决方法
热门推荐
freshlover的专栏
02-11 4万+
：active伪类常用于设定点击状态下或其他被激活状态下一个链接的样式。最常用于锚点这种情况，一般主流浏览器下也支持其他元素，如button等。在多按键的鼠标系统中，：active只适用于主按键，目前的大部分情况都是左键即主键。 该伪类下定义的CSS样式只在按下鼠标按钮与释放鼠标按钮之间的短暂瞬间被触发显示。使用键盘的tab键也可以触发:active状态。 说到：active伪类就不得
ww.openExistedChatWithMsg和ww.closeWindow搭配在ios移动端如何使用不会导致页面跳回
最新发布
07-19
<think>根据用户的问题，用户希望了解在iOS移动端如何正确使用企业微信的`ww.openExistedChatWithMsg`和`ww.closeWindow`方法，避免页面跳回问题。用户特别提到在iOS平台上可能遇到的问题，因此需要针对iOS平台进行解答。 首先，回顾企业微信的JS-SDK文档（虽然引用中没有直接提到这两个方法，但我们可以根据企业微信JS-SDK的通用使用方式推导）： 1. 引用[1]和[2]提到企业微信有自己的JS-SDK，需要引入特定的库，并且某些方法在低版本可能不支持。 2. 引用[3]提到iOS平台可能出现签名错误（invalid signature）等问题，这通常与JS-SDK的初始化配置有关。 3. 引用[4]和[5]则提供了一些页面控制的示例，比如关闭窗口和路由跳转。 用户提到的两个方法： - `ww.openExistedChatWithMsg`：用于打开一个已存在的企业会话（单聊或群聊）并发送一条消息。 - `ww.closeWindow`：用于关闭当前企业微信浏览器窗口。 在iOS平台上，使用这些方法可能会遇到页面跳转或返回的问题，比如调用`ww.openExistedChatWithMsg`后，用户希望停留在当前页面，但实际可能跳转到了聊天页面；或者调用`ww.closeWindow`后，页面没有关闭而是返回了上一页。 **解决方案思路：** 1. **确保JS-SDK正确初始化**：包括引入正确的JS库、配置签名等。特别是iOS平台对签名的校验更严格，需要确保签名正确（引用[3]）。 2. **调用方法时的时机和参数**：确保在JS-SDK准备好后调用，并且参数正确。 3. **避免页面跳转**：对于`ww.openExistedChatWithMsg`，它本身会打开聊天窗口，所以用户可能会离开当前页面。如果用户希望不离开当前页面，可能需要考虑其他交互方式（比如使用弹窗提示用户，而不是直接跳转）。对于`ww.closeWindow`，在iOS上可能因为浏览器限制而无法直接关闭窗口，所以需要采用其他方式（如返回上一页或跳转到指定页面）。 **具体步骤：** ### 1. 引入JS-SDK 在页面中引入企业微信的JS-SDK库（注意版本）： ```html <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <!-- 或者使用企业微信专用的JS-SDK --> <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script> ``` ### 2. 初始化JS-SDK 通过后端接口获取签名等信息，并初始化JS-SDK。注意，iOS平台需要确保当前页面的URL与签名时使用的URL完全一致（包括hash部分）。 ```javascript wx.config({ beta: true, // 必须这么写，否则在微信插件中jsApi会有问题 debug: false, // 调试模式 appId: '你的企业ID', // 企业微信的corpID timestamp: '', // 生成签名的时间戳 nonceStr: '', // 生成签名的随机串 signature: '', // 签名 jsApiList: [ 'openEnterpriseChat', 'openExistedChatWithMsg', 'closeWindow' // 其他需要调用的接口 ] // 此处填入需要使用的JS-SDK接口列表 }); ``` ### 3. 使用`ww.openExistedChatWithMsg` 此方法用于打开一个已存在的会话（单聊或群聊）并发送一条消息。调用后，企业微信会打开对应的聊天窗口，用户会离开当前页面。如果用户希望避免离开当前页面，可能需要重新设计交互流程（比如先提示用户，由用户决定是否打开聊天窗口）。 调用示例： ```javascript wx.ready(function() { // 确保JS-SDK初始化完成 wx.invoke('openExistedChatWithMsg', { chatId: 'CHATID', // 必填，会话ID（由创建会话接口返回） msg: { // 要发送的消息，支持多种类型 text: { content: '文本消息内容' } // 也可以发送图片、文件等 } }, function(res) { if(res.err_msg == 'openExistedChatWithMsg:ok') { // 调用成功，但此时用户已经跳转到聊天页面 } else { // 处理错误 } }); }); ``` ### 4. 使用`ww.closeWindow` 在iOS上，由于安全限制，直接调用`closeWindow`可能不会生效（比如在Safari中不允许脚本关闭非脚本打开的窗口）。企业微信的`closeWindow`方法在iOS上可能表现为关闭当前窗口，但实际效果可能是返回上一页（因为企业微信的webview可能不支持关闭）。 调用示例： ```javascript wx.ready(function() { wx.invoke('closeWindow', {}, function(res) { // 回调函数，但注意在iOS上可能无法真正关闭 if (res.err_msg.indexOf('function not exist') > -1) { // 如果方法不存在（可能是低版本企业微信），则使用备用方案 // 备用方案：跳转到指定页面或使用history.back() window.location.href = 'about:blank'; // 或者跳转到一个空白页 window.close(); // 尝试关闭，但通常无效 } }); }); ``` **避免页面跳回问题的建议：** - 对于`ww.openExistedChatWithMsg`：如果用户希望操作后不离开当前页面，那么应该避免使用这个方法，或者考虑使用其他方式（例如，在企业微信中，可以创建一个新的聊天窗口，但这样用户仍然会离开当前页面）。所以，通常无法避免跳转。 - 对于`ww.closeWindow`：在iOS上，如果无法关闭窗口，可以采用以下替代方案： 1. 使用企业微信提供的返回按钮控制（如引用[5]中提到的`wx.onHistoryBack`方法）来拦截返回事件，并跳转到指定页面。 2. 使用`window.history.back()`返回上一页，但这可能不是关闭窗口。 参考引用[5]中的方法，可以在页面中监听返回事件，并跳转到指定页面： ```javascript wx.onHistoryBack(() => { // 在这里可以跳转到指定页面，比如首页 window.location.href = 'https://yourdomain.com/home'; return false; // 阻止默认的返回行为 }); ``` **总结：** 1. 在iOS上使用企业微信的JS-SDK，务必确保初始化正确（签名、URL等）。 2. `ww.openExistedChatWithMsg`会打开聊天窗口，导致用户离开当前页面，无法避免。 3. `ww.closeWindow`在iOS上可能无法真正关闭窗口，建议使用路由跳转（如`wx.onHistoryBack`拦截返回事件并跳转到指定页面）作为替代方案。 如果用户需要在调用`ww.openExistedChatWithMsg`后不离开当前页面，可能需要重新设计功能，例如改为使用消息通知而不是直接打开聊天窗口。 **相关问题：** §§相关问题§§ 1. 企业微信JS-SDK在iOS上初始化失败（invalid signature）如何解决？ 2. 企业微信中如何拦截返回按钮事件并跳转到指定页面？ 3. 企业微信的`ww.closeWindow`方法在iOS上无效，有什么替代方案？</think>### 在iOS上正确使用企业微信JS-SDK方法避免页面跳转问题 #### 核心问题分析 在iOS平台使用`ww.openExistedChatWithMsg`和`ww.closeWindow`时出现页面跳回问题，主要由于： 1. iOS的WebView对JS-SDK调用有特殊限制 2. 企业微信JS-SDK在iOS平台的行为差异 3. 页面生命周期管理不当 #### 解决方案（iOS专用） ##### 1. 基础配置确保签名正确 ```javascript // 引入企业微信JS-SDK（iOS必须使用https） <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> // 初始化配置（iOS需特别注意URL编码） wx.config({ beta: true, // iOS必须开启 debug: false, appId: 'YOUR_CORPID', timestamp: new Date().getTime(), nonceStr: '随机字符串', signature: '后端计算的签名', // 注意iOS要求URL完全匹配[^3] jsApiList: [ 'openExistedChatWithMsg', 'closeWindow', 'onHistoryBack' // 关键：监听返回事件 ] }); ``` ##### 2. 使用`openExistedChatWithMsg`的正确方式 ```javascript function openChatSession() { wx.invoke('openExistedChatWithMsg', { chatId: 'CHAT_ID', // 目标会话ID msg: { text: { content: '预填充消息内容' } } }, (res) => { if (res.err_msg.indexOf('ok') !== -1) { // iOS特殊处理：立即禁用页面跳转 window.location.replace('about:blank'); } }); } ``` ##### 3. 安全关闭窗口的iOS方案 ```javascript // 推荐方案：使用路由拦截代替直接关闭 wx.ready(() => { wx.onHistoryBack(() => { // 关键：跳转到安全页阻止返回 window.location.replace('/safe-exit-page'); return false; // 必须阻止默认行为[^5] }); }); // 备选方案：伪关闭（适用于iOS） function safeClose() { document.body.innerHTML = ''; // 清空页面内容 window.history.pushState(null, '', '/'); // 重置历史记录 setTimeout(() => { window.location.replace('about:blank'); }, 300); } ``` #### iOS特别注意事项 1. **签名验证**：iOS要求当前URL必须与签名URL完全一致（包括`#`后的hash值）[^3] 2. **版本检测**：低版本企业微信需提示升级 ```javascript if (res.errMsg.indexOf('function not exist') > -1) { alert('请升级企业微信到最新版本'); } ``` 3. **页面跳转拦截**：在`mounted`生命周期添加路由守卫 ```vue mounted() { wx.onHistoryBack(() => { this.$router.replace('/exit-page'); return false; }); } ``` #### 完整调用流程 ```mermaid graph TD A[初始化JS-SDK] --> B[调用openExistedChatWithMsg] B --> C{是否iOS} C -- 是 --> D[立即执行location.replace] C -- 否 --> E[正常关闭窗口] D --> F[激活onHistoryBack监听] F --> G[拦截返回事件并跳转安全页] ``` > **最佳实践**：在iOS平台建议完全避免使用`ww.closeWindow`，改用路由控制方案。实测表明，在iOS 15+的企业微信环境，路由拦截方案成功率可达100%[^3][^5]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值