踩坑记录:关于低版本firefox43.0.1在控件中定义onclick="remove()",点击按钮,按钮会消失。

  第一次发博客,很紧张,也是今天遇到了一个问题,突然想在这里记录一下。

  言归正传,如题,今天测试人员给了一个别人的bug过来,这个bug的描述是这样的:

  1.在一个页面里点击删除按钮,删除按钮消失,报错,当前使用的是43.0.1版本的火狐浏览器,而在IE、chrome、sougou、高版本的firefox(这里高版本的指的是53.0和61.0)测试是不会出现这样的问题。

  看到这个问题,很多人第一反应是兼容性问题,没错,是兼容性问题。然而遇到这种疑难杂症,还是想要去了解,其中真正导致的缘由,第一步要做的是分析。

  首先,页面的其他按钮是没有出现这样的问题,那必然是当前的这个删除按钮写了某些特殊逻辑导致的,点开代码,发现那位开发人员写的一个代码大概是下面这样的。

<!--真实代码就不贴出来了,因为采用了公司的UI框架这里不好说明,但本质是这样-->

<button οnclick="remove()" class="...">删除</button> 
   而在对应的js里,写的是如下
function remove(){
  //...
}

  可以看出,问题应该就是出在这个οnclick="remove()"的写法上,首先使用这种敏感的关键字方法作为自定义的方法名其实是一种很危险的行为。

  那问题是出现在哪里呢? 是在触发了事件的方法里吗,于是注释掉了function remove里的所有方法,使用firefox43.0.1测试,问题依然存在,按钮还是消失了。

  排除法,js方法逻辑没有问题,问题出在html或者jsp上。

  会不会是class的问题,删除掉了样式,依然如此,所以还是onclick出的问题,大胆猜测,是否是remove名字问题,改了方法名字运行,一切正常了,没有错就是这个名字的问题。

  思考一下,其实在onclick的后执行的是remove()方法,而remove()这个方法对原生Js或者是Jquery选择出来的对象来讲,是用来移除元素的一个方法。(下面引用jquery文档的说法)

  定义和用法

     remove() 方法移除被选元素,包括所有文本和子节点。

     该方法不会把匹配的元素从 jQuery 对象中删除,因而可以在将来再使用这些匹配的元素。

     但除了这个元素本身得以保留之外,remove() 不会保留元素的 jQuery 数据。其他的比如绑定的事件、附加的数据等都会被移除。这一点与       detach() 不同。

  43.0.1版本的火狐在解析代码的时候,把onclick里的方法直接优先识别成了remove()元素的方法,而非我们自定义的remove()的方法,因此js里写的function直接就被无视了,造成了只执行了,删除按钮的操作,后续按钮事件里的操作完全没有执行到。

  火狐后来的版本应该也可能意识到了这个问题,所以过滤掉了类似remove()的这种关键字方法,直接查找的是我们js定义的方法,很容易测试出来。编写一个button, onclick属性依然写的是remove()方法,但不在js中定义remove方法,用高版本(61.0)的火狐点击按钮,F12检查,发现报错了,报的是找不到remove这个方法,也证明了我的推测。

  然而无法拿到火狐的源码,也就无法知道具体火狐如何改进了这个事件监听。

  浏览器兼容问题确实困扰着很多开发人员,我只是将我遇到的坑写出来,为了防止其他人也遇到这种麻烦问题,因为之前无论是baidu或者google都没有搜索到遇到同样问题的人来解答。

  在这里要说的是为了避免不必要的麻烦,方法名的定义还是要尽量避开关键字啊,还有浏览器还是新版本的好。


  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在代码直接设置网页全屏,而不需要通过按钮点击,你可以在页面加载完成后自动触发全屏操作。以下是一种常见的实现方法: HTML 代码: ```html <div id="fullscreen-element"></div> ``` JavaScript 代码: ```javascript document.addEventListener("DOMContentLoaded", () => { const fullscreenElement = document.getElementById("fullscreen-element"); if (fullscreenElement.requestFullscreen) { fullscreenElement.requestFullscreen(); } else if (fullscreenElement.mozRequestFullScreen) { // Firefox fullscreenElement.mozRequestFullScreen(); } else if (fullscreenElement.webkitRequestFullscreen) { // Chrome, Safari and Opera fullscreenElement.webkitRequestFullscreen(); } else if (fullscreenElement.msRequestFullscreen) { // IE/Edge fullscreenElement.msRequestFullscreen(); } }); ``` 在上述代码,我们使用 `document.addEventListener("DOMContentLoaded", ...)` 来监听页面的加载完成事件,确保在页面加载完成后执行全屏操作。 在事件处理函数,我们首先获取要全屏显示的元素,这里使用了一个 `<div>` 元素,并通过 `getElementById()` 方法获取到该元素。 然后,我们使用不同浏览器提供的全屏方法来请求进入全屏模式。根据不同的浏览器,我们可以使用 `requestFullscreen()`、`mozRequestFullScreen()`、`webkitRequestFullscreen()` 或 `msRequestFullscreen()` 方法。 当页面加载完成后,触发事件处理函数,并通过调用适当的全屏方法来请求进入全屏模式。 请注意,在某些浏览器,进入全屏模式可能需要用户的交互操作,例如在页面加载后,用户需要点击浏览器的全屏提示。此外,退出全屏模式可以使用 `document.exitFullscreen()`、`document.mozCancelFullScreen()`、`document.webkitExitFullscreen()` 或 `document.msExitFullscreen()` 方法。 需要注意的是,进入全屏模式具有浏览器兼容性问题,不同浏览器可能有不同的前缀和要求。因此,建议在实际开发使用现有的全屏模式库或框架,以确保在各种浏览器和设备上获得一致的体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值