筱筱日常踩坑笔记

mac2024-07-06  53

new Date()在IOS中的坑

我们平时的在工作中,创建一个指定时间的new Date对象时,通常的做法是

new Date('2019-10-19 12:40');

然后根据这个对象获取年月日等信息。 我们发现这种方式在chrome,firefox,Android中使用都没有问题。但是在IOS中就会出问题,在IOS中使用这种方式创建时间对象,返回的值是valid Date(无效值)。

因为IOS中使用new Date创建时间对象时,是需要制定格式的,

new Date('2019/10/19 12:40');

IOS下需要这样的格式才能返回正确的结果。

所以我们在使用的时候,为了兼容各个浏览器平台,可以使用下面的方法来解决

var obj=new Date("2019/10/19 12:40").replace(/-/g, "/");

都使用/来分割,因为在其他浏览器中这种格式也是支持的。

drag和drop在firefox中的坑

我们都知道html5中提出了drag和drop方法,主要为了实现拖拽功能,简单使用方法

function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); } function drop(ev) { ev.preventDefault(); var data=ev.dataTransfer.getData("Text"); ev.target.appendChild(document.getElementById(data)); } <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div> <br /> <img id="drag1" src="/i/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" />
问题一: drag拖动没有效果

当你遇到这个问题时,你应该检查你是否加入下面这条命令

ev.dataTransfer.setData("Text",ev.target.id)

通常的拖动就是将一个元素原封不动的拖动到另外一个位置,但是很多时候需求不是这样,需要在目标位置根据拖动的元素重新生成dom,那么我们通常在drag的时候不需要ev.dataTransfer.setData("Text",ev.target.id),但是在firefox中,这条命令是必须的,否则不能实现拖动效果。

问题二:drop后打开一个搜索页面

在Firefox中ondrop事件会触发Firefox自带的拖拽搜索功能,在ondrop事件触发执行时触发的函数中加上这两条:

/* 禁止冒泡行为 */ event.stopPropagation(); /* 禁止默认行为 */ event.preventDefault();

具体实现方法

function drop(event) { /* 禁止冒泡行为 */ event.stopPropagation(); /* 禁止默认行为 */ event.preventDefault(); /* 获取拖拽中"Text"的元素 */ var data = event.dataTransfer.getData("Text"); /* 将拖拽中的元素附加到这个区域中 */ event.target.appendChild(document.getElementById(data)); /* 一个提示信息 */ console.log("元素已被拖动"); }

在Vue项目中,我们可以直接这样用

@drop.stop.prevent="onDrop"

小程序中video地址问题

最近在小程序中用到了video,src是动态获取的,但是当视频文件路径存在中文时,在android下视频加载会很慢,但是在IOS下直接加载失败,通过查找规律,将存在中文路径的src使用encodeURI(url)方法进行编码后,就可以解决视频加载失败和速度慢的问题。

最新回复(0)