JS开发中关于事件和接口调用的一些限制

在前端开发中,有着各式各样的坑,有的属于浏览器的规范,就是不让你这么干,而很多则是bug,各种浏览器兼容问题在这里就不一一列举了。

JS开发中关于事件和接口调用的一些限制

大家都知道浏览器提供了很多接口,那么有大部分接口,程序直接调用就可以工作;而有些则不行,必须由用户触发才可以正确执行,甚至有些更苛刻的条件。简单总结如下:

window.open:首先就是大名鼎鼎的window.open了,曾几何时,js coder们想方设法打破这个限制想自主的控制打开新窗口,可是被浏览器Say No,原因就是没有遵循click before, open after原则,对于方法的执行链,浏览器是可以明确知道的,对于不在用户click事件函数里的window.open,是要被拒绝的,除非用户手动设置为永久信任。

视频/音频播放:在Android端浏览器中,如果我们用HTML5 Audio或者Video创建了一个音频/视频,想在页面一打开就自动播放调用player.play(),抱歉这个是无法工作的,必须在用户的click事件函数里调用play方法才可以。而iPhone则表示毫无压力,支持直接播放。

location.href:假如我们由页面A:http://n1.xxx.com/index.htm,然后页面里有一个iframe,称为A1:http://n2.xxx.com/demo.htm,如果在A页面的一个按钮click事件函数里调用A1里面的一个方法F,然后F里去执行location.href="/demo2.htm",你会发现最后跳转的地址是:http://n1.xxx.com/demo2.htm,为什么会发生呢?
因为浏览器维护着一个方法的调用链,location.herf前缀URL补全默认是按照用户点击所在的域,而不是方法F所在的域,解决这个问题也很简单,将跳转的代码放到setTimeout里就可以了,也算是一个坑吧。

应该还有不少,这里只是抛砖引玉,大家踊跃补充哈。。。扩展阅读:关于CSS3的animation使用的一些坑,需要注意下!

相关阅读