JS的Date对象在Safari与IOS中的兼容问题

 最近小编在做一个会议室预定的功能,这个功能就像在买电影票时选择座位一样,看看会议室的哪个时间段空闲,有什么设备等等。由于我做的是APP,APP既要兼容Android,又要兼容iOS,刚开始的开发与调试我都是用谷歌浏览器干的,我没有用其它浏览器进行测试,谁知道最后遗留一个很大的隐患。下面是我的界面。


问题一:

 这个界面运用了大量的日期类型的计算,当我们用JavaScript实例化一个日期对象时,我们可以这样用:

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. var date =new Date();  

 上面这段代码是获取当前日期,这段代码在Firefox、Chrome、Safari浏览器中都可以运行。但是如果我想根据字符串获取日期,问题就来了。看下面代码。

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. var date =new Date("2016-05-31 08:00");  

 这段代码是获得字符中指定的日期,它Firefox、Chrome中就能运行,但是放在Safari就会报错,错误是NaN,意思是Not a Number。就是因为这个错,苹果手机不能正常运行我开发的这个界面,当时都快郁闷死了,我写了300行js啊,几乎都与时间有关,不是取值就是赋值,要不就是计算,如今IOS不支持。。。。。。。

 在网上找了一下,将代码这样写就好了:

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. var date =new Date("2016/05/31 08:00");  

 这样Android和IOS就能共用了,写了个函数,替换一下!

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. function GetDateDiff(startDiffTime, endDiffTime) {  
  2.             //将xxxx-xx-xx的时间格式,转换为 xxxx/xx/xx的格式   
  3.             startTime = startDiffTime.replace(/\-/g, "/");  
  4.             endTime = endDiffTime.replace(/\-/g, "/");  
  5. };  

 

问题二:

另外,在IOS中通过一下方式创建Date对象,还会出现一个问题。这时创建的Date对象是undefined 。

注:一般情况下,构造函数中的参数是从后台返回的字符串日期,

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. var date =new Date("2016/05/31 08:00");  

 所以,这时要用比较传统的方式处理。


[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片

  1. var createdDate = "${tx.createdDate}"; // 2016-12-23 13:24:08.0
    var d = createdDate.split(" ")[0].split("-");
    var t = createdDate.split(" ")[1].split(":");

    var endTime= new Date();
    endTime.setFullYear(d[0]);
    endTime.setMonth(d[1]);
    endTime.setDate(d[2]);
    endTime.setHours(t[0]);
    endTime.setMinutes(t[1]);
    endTime.setSeconds(t[2].substring(0,t[2].indexOf("."))); //精确到秒


问题三:

  HTML5中新增了日历控件,如果将控件的type=“datetime-local”,如果是Chrome,控件的日期显示格式是2016/05/30 08:00 ,如果是Safari,日期的显示格式是:2016-05-31T08:00,当我们用jQuery取值赋值的时候,就必须用这种方式才能赋值:假如说这个日历控件的id是timeDate,代码如下:

[javascript]  view plain  copy
 print ? 在CODE上查看代码片 派生到我的代码片
  1. $("#timeDate').val("2016-05-30T08:30");  

  用$("#timeDate').val("2016/05/30 08:30");就会报错。可是Chrome的显示方式就是这样的啊!!!尼玛的还有天理吗?
  这两个坑肯定不光坑过我自己一个人,希望以后注意吧!
### iOS 18 Safari 中 `location.reload()` 方法的使用说明错误处理 #### 方法概述 `location.reload()` 是 JavaScript 的内置方法,用于重新加载当前文档。它接受一个布尔参数,如果设置为 `true`,则强制从服务器重新加载页面;如果未提供该参数或设为 `false`,则可能从缓存中加载页面。 然而,在某些特定环境中(如微信浏览器、Vue 路由场景),或者在不同版本的 Safari 浏览器中,可能会遇到兼容性问题[^5]。对于 iOS 18 上的 Safari 浏览器,以下是一些已知的行为和解决方案: --- #### 已知行为 1. **默认缓存机制** 在现代浏览器中,包括 iOS 18 的 Safari,`location.reload()` 默认尝试从缓存中加载资源。这可能导致开发者无法观察到预期的效果,尤其是在开发阶段需要频繁更新文件的情况下[^4]。 2. **微信环境下的限制** 微信内置浏览器对 `location.reload()` 存在特殊限制,调用此方法通常会被忽略或失败。虽然这不是 iOS 18 Safari 的问题,但如果应用需支持微信分享链接,则应考虑替代方案。 3. **HTTPS 协议的影响** 如果网站运行于 HTTPS 下,部分旧版 Safari 可能会对相对路径跳转产生异常反应,尽管这一问题主要集中在更早版本(如 Safari 8.0)。但在调试过程中仍需注意网络请求的安全性和一致性[^1]。 --- #### 解决方案 针对上述情况,可以采取以下措施来确保 `location.reload()` 正常工作: 1. **强制刷新** 明确传递 `true` 参数给 `location.reload()`,从而绕过缓存并直接向服务器发起新请求: ```javascript window.location.reload(true); ``` 2. **检测事件状态** 对于一些特殊情况(例如页面被恢复而非正常加载的情况),可以通过监听 `onpageshow` 和 `event.persisted` 属性判断是否需要手动触发刷新操作: ```javascript window.onpageshow = function(event) { if (event.persisted) { window.location.reload(true); } }; ``` 3. **替换 URL 方案** 若发现 `location.reload()` 不生效,可改用修改地址栏的方式实现类似效果。这种方法尤其适用于 Vue 等前端框架中的单页应用场景: ```javascript const timestamp = new Date().getTime(); window.location.href = `${window.location.pathname}?t=${timestamp}`; ``` 4. **跨平台适配** 针对微信或其他第三方客户端内的嵌入式 WebView,建议优先测试其对标准 API 的支持程度,并准备备用逻辑。例如利用 `setTimeout` 延迟执行命令以规避潜在冲突: ```javascript setTimeout(() => { try { window.location.reload(true); } catch (e) { console.error('Reload failed:', e.message); window.location.assign(window.location.href); } }, 500); ``` 5. **Cookie 同步注意事项** 当涉及登录态保持时,务必确认 SFSafariViewController 是否正确同步了原生 Safari 的 Cookie 数据[^3]。否则即使成功完成了页面重定向也可能因缺少必要的认证信息而报错。 --- #### 示例代码片段 以下是综合以上策略的一个完整例子: ```javascript // 尝试安全地刷新当前页面 function safePageRefresh() { let reloadAttempted = false; // Step A: Try standard method first. try { window.location.reload(true); reloadAttempted = true; } catch (_) {} if (!reloadAttempted || !navigator.userAgent.includes('Safari')) { // Fallback B: Append query string to force update without cache hit. const currentUrl = window.location.href.split('?')[0]; window.location.replace(`${currentUrl}?_ts=${Date.now()}`); } // Optional C: Handle edge cases like WeChat restrictions gracefully here... } ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值