记录下前端浏览器某些js操作的区别（兼容性问题）document.getElementById('data2').val

此贴将持续更新，为记录各浏览器兼容性问题

1.文件上传

问题描述：Chrome浏览器、Edge浏览器同时上传同一文件失败（第一次可以成功，第二次打开同一文件将打不开的问题），但是FireFox却可以成功，找到原因之后原来是因为Chrome浏览器、Edge浏览器在上传完之后并没有自动清空file的值

<el-button type="primary" @click="handleShow" size="mini">上传</el-button>
<form name=formen>
  <input @click="handleImportJSON" name="data2" style="display:none" class="MyButtion" id="data2" type="file" value="">
</form>

这是未隐藏style="display:none" data2且未上传文件状态（Chrome浏览器）：

这是未隐藏data2且已上传文件状态（Chrome浏览器），可以看到文件在此处是未被自动清空的，这时候我们再点击同一文件上传时就会打开失败，所以需要手动清空file， document.getElementById('data2').value = '',在执行完这一步操作之后就可以重复上传同一文件且无需手动清空了，Edge浏览器是一样的。

但是FireFox浏览器是自动清空的，也就是说在我们上传完之后浏览器帮我们做了上一行代码所做的事情。

2.时间格式转换

Safari浏览器在new Date()转换如2020-01-01 16:16:16格式时返回NaN或者invalid Date,但在其他浏览器正常。

new Date('2018-11-11 00:00:00') 
/* chrome: Sun Nov 11 2018 00:00:00 GMT+0800 (中国标准时间)  （正常）
   safari: Invalid Date
*/
new Date('2018.11.11 00:00:00') 
/* chrome: 正常
   safari: Invalid Date
*/
new Date('2018/11/11 00:00:00') 
/* chrome: 正常
   safari: 正常
*/
new Date('2018-11-11T00:00:00') 
/* chrome: 正常
   safari: 正常
*/

问题原因

在safari浏览器下，new Date() 无法识别像 YYYY-MM-DD HH:mm:ss、YYYY.MM.DD HH:mm:ss这样的格式，只能识别YYYY/MM/DD HH:mm:ss、YYYY-MM-DDTHH:mm:ss这样的格式，但是chrome,firfox,ie都做了很好的拓展，所以不存在这个问题。

解决方案

1.把 '-' 用正则转换成 '/'

const timeStr = '2018-11-11 00:00:00';
const date = new Date(Date.parse(timeStr.replace(/-/g, '/')));

2.或者采用字符串slice方法截取需要的部分，或者+new Date()转换时间戳之后再getHours()等方法拼接

3.低版本浏览器丢失dom问题

75版本下谷歌浏览器丢失div，高版本则正常，问题原因是开发人员 aure 使用错误，详见 developer.salesforce.com/docs/compon…