开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何处理Safari上未安装的自定义协议仍然触发onblur事件？

在Safari浏览器上，当未安装的自定义协议被触发时，会导致onblur事件被触发。为了处理这个问题，可以采取以下步骤：

检测浏览器类型：在页面加载时，可以使用JavaScript代码检测用户所使用的浏览器类型，如果是Safari浏览器，则执行下一步操作。
检测自定义协议是否安装：使用JavaScript代码检测自定义协议是否已安装。可以通过尝试打开自定义协议的URL，并检测是否成功打开。如果成功打开，则表示自定义协议已安装，可以继续执行其他操作；如果无法打开，则表示自定义协议未安装，需要进行处理。
阻止onblur事件的触发：在Safari浏览器上，当自定义协议未安装时，会触发onblur事件。为了阻止该事件的触发，可以在onblur事件处理函数中添加条件判断，如果自定义协议未安装，则不执行后续的操作。
提示用户安装自定义协议：可以在页面上显示一个提示信息，告知用户需要安装自定义协议才能继续操作。可以使用HTML和CSS来创建一个提示框，并使用JavaScript代码控制其显示和隐藏。

总结起来，处理Safari上未安装的自定义协议仍然触发onblur事件的方法包括检测浏览器类型、检测自定义协议是否安装、阻止onblur事件的触发，并提示用户安装自定义协议。这样可以提供更好的用户体验，并避免不必要的问题。

腾讯云相关产品和产品介绍链接地址：

腾讯云官网：https://cloud.tencent.com/
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
腾讯云智能视频分析（VOD）：https://cloud.tencent.com/product/vod
腾讯云物联网平台（IoT）：https://cloud.tencent.com/product/iotexplorer
腾讯云移动推送（TPNS）：https://cloud.tencent.com/product/tpns
腾讯云云函数（SCF）：https://cloud.tencent.com/product/scf

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

跨站脚本（XSS）备忘录-2019版

这是一份跨站脚本（XSS）备忘录，收集了大量的XSS攻击向量，包含了各种事件处理、通讯协议、特殊属性、限制字符、编码方式、沙箱逃逸等技巧，可以帮助渗透测试人员绕过WAF和过滤机制。...事件处理不需要用户交互的事件处理程序激活元素时触发(IE) 页面打印后触发（Chrome、Firefox、IE...、Safari）当元素失去焦点时触发（Chrome、IE、Safari）需要用户交互的事件处理程序右键单击或使用鼠标中键时触发...XSS IE中较旧版本的函数中支持的事件处理程序

6.3K1 0

浏览器事件

onerror: 当发生JavaScript运行时错误与资源加载失败时触发。 onabort: 发送到window的中止abort事件的事件处理程序，不适用于Firefox 2或Safari。...窗口相关 onblur: 窗口失去焦点时触发。 onfocus: 窗口获得焦点时触发。 onresize: 窗口大小发生改变时触发。 onscroll: 窗口发生滚动时触发。...应用相关 onappinstalled: 一旦将Web应用程序成功安装为渐进式Web应用程序，该事件就会被分派。...onbeforeinstallprompt: 当用户即将被提示安装web应用程序时，该处理程序将在设备上调度，其相关联的事件可以保存以供稍后用于在更适合的时间提示用户。...ontoggle: 该事件在用户打开或关闭元素时触发。表单事件相关 onblur: 元素失去焦点时触发。 onchange: 该事件在表单元素的内容改变时触发。

2.4K2 0

【AJAX】AJAX技术详细解析以及实例

: open(method,url,async) 规定请求的类型、URL 以及是否异步处理请求。...在等待服务器响应时执行其他脚本当响应就绪后对响应进行处理 Async = true 当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数...每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息。...事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。...在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

1K1 0

移动端Webapp中的那些Bug

2.2 解决方案爬墙爬到这么一个issue，3楼eddiemonge老哥说到了，在IOS下除非用户手动触发了输入框的focus事件，才会触发键盘，至于设置定时器也是不管用的；但是，手动点击一个按钮，在按钮的操作中再来执行...顿时突然想到移动端点透事件貌似有个300ms延迟执行。虽然点透事件在移动端会被处理掉，然而我只是想验证一下我的猜想。...touchstart事件，在link上绑定click事件。...，但是仍然有瑕疵。...（不过以我的测试情况来看，在chrome和safari上滑动的时候输入框不再被激活，类似在PC端滑动的时候采用了蒙版或者points-event: none;的效果） var thisFocus; var

3K5 0

Window对象

customElements: 可用于注册新的custom elements，或者获取之前定义过的自定义元素的信息。...onabort: 发送到window的中止abort事件的事件处理程序，不适用于Firefox 2或Safari。窗口相关 onblur: 窗口失去焦点时触发。...onmouseout: 鼠标移出窗口时触发。 onmouseover: 鼠标移动到窗口时触发。 onauxclick: 指示在输入设备上按下非主按钮时触发，例如鼠标中键。...应用相关 onappinstalled: 一旦将Web应用程序成功安装为渐进式Web应用程序，该事件就会被分派。...onbeforeinstallprompt: 当用户即将被提示安装web应用程序时，该处理程序将在设备上调度，其相关联的事件可以保存以供稍后用于在更适合的时间提示用户。

2.4K2 0

通俗易懂的React事件系统工作原理

原生事件和合成事件是如何对应起来的？上面的代码看起来很简洁，实际上 React 事件系统工作机制比起上面要复杂的多，脏活累活全都在底层处理了，简直框架劳模。...其工作原理大体上分为两个阶段事件绑定事件触发下面就一起来看下这两个阶段究竟是如何工作的，这里主要从源码层分析，并以 16.13 源码中内容为基准。React实战视频讲解：进入学习1....React 是如何触发事件的?我们知道由于所有类型种类的事件都是绑定为React的 dispatchEvent 函数，所以就能在全局处理一些通用行为，下面就是整个行为过程。...事件只针对原生组件生效，自定义组件不会触发 onClick。3....从React 的事件系统中我们学到了什么React16 将原生事件都绑定在 document 上.这点很好理解，React的事件实际上都是在document上触发的。

1.5K0 0

APICloud AVM多端开发 | 手把手教外卖点餐App开发（下）

其中第一个交互相关逻辑类似于在开发商家主页的滚动 scroll-view 触发头部透明度的逻辑。所以同样地为右侧的 scroll-view 绑定上 @scroll="onScroll" 函数。...(跨端特性处理) 6.gif 右侧的菜品有一个 @click="openAdd(goods)" 事件，用于打开加购页面。.../goods_add/goods_add.stml', pageParam: {goods} }) } } 这个函数中展示了端差异上的处理。...如果在真实项目中其他已经打开的页面也需要监测用户状态变化，可以借助广播事件来处理详细的逻辑。...="onBlur" maxlength="30" id="remark"/> 通过失去焦点事件 onBlur="onBlur" 来动态获取数据。

1.4K2 0

从零实现的浏览器Web脚本

此外在很久之前我一直好奇在GreasyFork上是如何实现用户脚本的安装的，因为实际上我并没有在那个安装脚本的按钮之后发现什么特殊的事件处理，以及如何检测到当前已经安装脚本管理器并且实现通信的，之后简单研究了下发现实际上只要用户脚本是以....user.js结尾的文件，就会自动触发脚本管理器的脚本安装功能，并且能够自动记录脚本安装来源，以便在打开浏览器时检查脚本更新，同样的后期这些脚本管理器依然会遵循这套规范，既然我们了解到了脚本的安装原理...，我们的沙箱环境是完全隔离的，而用户脚本管理器的目标则是不同的，比如用户需要在window上挂载事件，那么我们就应该将这个事件处理函数挂载到原本的window对象上，那么我们就需要区分读或者写的属性是原本...onCopy事件很明显，我们在触发复制例如使用Ctrl + C或者右键复制的时候就会触发，在这里我们只要将其截获就可以做到阻止复制了，同样的onSelectStart事件也是，只要阻止其默认行为就可以阻止用户的文本选中...那么我们同样可以使用捕获阶段阻止事件执行的方式解决这个问题，分别将onFocus、onBlur事件处理掉即可，只不过这种方式可能会导致页面的焦点控制出现一些问题，所以在这里我们还有另一种方式，通过在document-start

7315 0

【Web APIs】JavaScript 操作元素 ⑧ ( DOM 操作元素案例 | 获取焦点 onfocus 事件 | 失去焦点 onblur 事件 | 获取设置 HTML 页面背景颜色 )

当 DOM 元素获得焦点时 , 该 DOM 元素上绑定的 onfocus 事件被触发 ; 绑定该 onfocus 事件的元素一般都是 input 表单元素 ; 如 : 当用户点击输入框或通过键盘切换到输入框时..., 该事件会被触发 ; 绑定 onfocus 事件的方法 : 设置 onfocus 属性 : 可以通过 DOM 操作 , 给元素添加 onfocus 属性 , 来指定当焦点集中在元素上时要执行的JavaScript...- onblur 事件在 JavaScript 中 , 当 DOM 元素失去焦点时 , 该 DOM 元素上绑定的 onblur 事件被触发 ; 如 : 用户从输入框移动到页面的其他部分或...按下 Tab 键移动焦点时 , 该事件会被触发 ; 绑定 onblur 事件的方法 : 设置 onblur 属性 : 可以通过 DOM 操作 , 给元素添加 onblur 属性 , 来指定当焦点集中在元素上时要执行的...方法来动态地为元素添加 onblur 事件的处理函数 ; // 使用 addEventListener document.getElementById("myInput").addEventListener

971 0

vue封装带提示框的单选多选文本框组件

对于多选，此时不应该关闭提示框，所有问题的关键在于如何实现点击提示选项而不隐藏提示框。 ?...**问题2：**阻止冒泡，如果组件的父容器已经阻止了冒泡，则无法触发在body上绑定的关闭方法，需要针对父容器单独处理。...let randId = Math.round(Math.random()*100000) this.className = `cs-select-${randId}` // 单独处理父容器，在父容器上绑定关闭事件...3.4 尝试方案4: onfocus + onblur + mousedown + 开关由于focus事件先于click事件执行，导致了上述方案1和方案2问题的产生，如果能够解决这两个事件的执行时序问题...="cond.value" ...> 而使用v-model方式，组件上的v-model默认会利用名为value的prop和名为input的事件，也可以设置model选项来自定义

7.8K3 0

Ajax详解

open(method,url,async) method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） send(string)...application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates"); 2 ：属性 readyState 0: 请求未初始化...1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪 State 200: "OK" 404: 未找到页面 responseText 获得字符串形式的响应数据。...window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } } //input失去焦点事件...function() { //匿名函数 if(xmlHttp.readyState == 4) { //Ajax引擎初始化成功 if (xmlHttp.status == 200) { //http协议成功

8549 0

被忽略的缓存 -bfcache

这意味着用户可以瞬间回到之前访问的页面，无需等待页面重新加载。它不是 HTTP 意义上的“缓存”，不是“磁盘缓存”意义上的“缓存”，而是将解码资源保存在内存中，以便在多个网页之间共享。...在触发 freeze 事件后，页面将被冻结，直到从 bfcache 中恢复页面，将不会触发任何事件。如果在此期间与页面的文档关联的任务或 Promise 准备就绪，则它们将在页面从缓存中恢复后执行。...) 具体流程如下：随之而来的疑问： 1、我在离开页面时，页面 Javascript 任务没有完成，会如何处理？...排除其他可能影响的因素，单纯通过http-server启动本地的 html 文件来验证下问题，因为页面要进入 bfcache，首要的前提是以 http/https 协议访问首先安装： npm install...bfcache 中，因为这可能会破坏任何试图访问它的页面，尽可能使用rel="noopener"` 去打开 4、命中 bfcache 的同时如何更新数据监听 pageshow/pagehide 事件

7823 0

再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

IE6、7、8下 submit事件不冒泡。 IE6、7、8下 change事件要等到blur时才触发。...万恶的滚轮事件滚轮事件的支持可谓是乱七八糟，规律如下： IE6-11 chrome mousewheel wheelDetla 下 -120 上 120 firefox DOMMouseScroll...问题一：Firefox，Chrome、Safari和IE9都是通过非标准事件的pageX和pageY属性来获取web页面的鼠标位置的。...onchange触发事件必须满足两个条件：当前对象属性改变，并且是由键盘或鼠标事件激发的（脚本触发无效）当前对象失去焦点(onblur)； onpropertychange的话，只要当前对象属性发生改变...，都会触发事件，但是它是IE专属的； oninput是onpropertychange的非IE浏览器版本，支持firefox和opera等浏览器，但有一点不同，它绑定于对象时，并非该对象所有属性改变都能触发事件

9594 0

vue封装带提示框的单选多选文本框组件

对于多选，此时不应该关闭提示框，所有问题的关键在于如何实现点击提示选项而不隐藏提示框。...问题2：阻止冒泡，如果组件的父容器已经阻止了冒泡，则无法触发在body上绑定的关闭方法，需要针对父容器单独处理。...let randId = Math.round(Math.random()*100000) this.className = `cs-select-${randId}` // 单独处理父容器，在父容器上绑定关闭事件...3.4 尝试方案4: onfocus + onblur + mousedown + 开关由于focus事件先于click事件执行，导致了上述方案1和方案2问题的产生，如果能够解决这两个事件的执行时序问题...="cond.value" ...> 而使用v-model方式，组件上的v-model默认会利用名为value的prop和名为input的事件，也可以设置model选项来自定义

5.3K40 3

图形编辑器开发：实现自定义规则输入框组件

不同类型的输入框有着各自的规则，今天我们来看看怎么去实现这么一个 自定义规则输入框 React 组件。需求我们需要做一个自定义规则输入框。...它需要支持的核心功能是，失焦时：尝试对输入的内容进行校验和补正，将得到的合法值去更新数据源；上述操作后，如果无法得出合法值，恢复上一次的合法输入；一些次要的功能：按下回车时自动失焦；点在输入框时...我之前的一篇文章讲述过一个场景，即用户输入 hex 格式的颜色值时，应该如何实现 hex 的校验补正算法，去拿到一个合法的值。当时只说了校验补正算法。...这篇文章是它的一个补充，即去实现这么一个自定义规则组件，这个组件可以装配不同格式对应的校验补正算法。组件实现首先是 props 的设计。...该组件接受的 props： value：数据源。如果你有需求，这里可以做一层单位转换，比如角度转弧度； min：最小值，如果小于 min，会修正为 min； onBlur：数据改变相应事件。

2342 1

前端-如何精确统计页面停留时长

如下图，计算页面停留时长既如何监控这三个动作，然后在对应触发的事件中记录时间戳，比如要统计活跃停留时长就把 active 区间相加即可，要统计总时长既 tn -t0 。 ?...通过 popstate 事件能解决一半问题，因为 popstate 只会在浏览器前进后退的时候触发，当调用 history.pushState() or history.replaceState() 的时候并不会触发...可以通过 Page Visibility API 以及在 window 上声明 onblur/onfocus 事件来处理。.../onfocus 可以通过 Page Visibility API 以及在 window 上声明 onblur/onfocus 事件来处理。...3.设计 3.1 UML类关系图 Tracer 核心类，用来实例化一个监控，对原生事件和自定义事件的封装，监听 enter activechange exit 事件来操作当前 Page 实例。

9.7K2 0

小程序-云开发-如何对敏感词进行过滤即内容安全的检测(下)

小程序端进行文本内容的弱校验,减少API的请求如何将涉及违规的文本内容用*号代替,进行过滤处理云函数调用方式的优点(推荐使用) 本文重点在于学会如何在小程序云开发中的云函数后端进行配置,实现文本内容的校验...如果您之前有动手实践过的话,您依然发现,这个过程仍然很复杂,分别要请求两个接口,还要拼接字段,还要手动的去查找APPID,以及APPSECRET秘钥在如今的云开发中,提供了文本内容检测的接口,只需要简单的配置一下就可以了的...对于一些常规敏感词,在小程序端是可以手动的进行自定义校验的,一种处理方式就是但凡违规内容,可以强制用户不能输入,发布,或者评论等,还有一种处理方式就是,针对敏感词汇,用*号进行替代,如下所示 ?...事件的触发应该是在失去焦点的时候,就进行常规自定义文文本内容校验的 /** * * 您也是可以单独将自定义的违规词汇放到一个utils文件,单独js文件当中,通过export的方式导出来,在想要使用的地方引入进去也是可以的...,对内容进行检测,若内容合规,就插入数据库,不合规,就不让走下一步的对于违规词的手动收集,其实也是可以单独的弄一个接口的,在小程序端哪里需要检验的,哪里触发事件,就在哪里发起请求就可以的对于涉及到复杂的页面

3K1 0

JavaScript——DOM重点核心

我们获取过来的DOM元素是一个对象（object）,所以称为文档对象模型。关于DOM操作，我们主要针对元素的操作有创建、增、删、改、查、属性操作、事件操作。...：父（parentNode）、子（children）、兄（previousElementSibling、nextElementSibling）提倡使用属性操作主要针对于自定义属性 setAttribute...：设置dom的属性值 getAttribute：得到dom的属性值 removeAttribute：移除属性事件操作给元素注册事件，采取事件源.事件类型 = 事件处理程序鼠标事件触发条件 onclick...鼠标点击左键触发 onmouseover 鼠标经过触发 onmouseout 鼠标离开触发 onfocus 获得鼠标焦点触发 onblur 失去鼠标焦点触发 onmousemove 鼠标移动触发 onmouseup...鼠标弹起触发 onmousedown 鼠标按下触发

3501 0

h5的Notification 、web Push介绍

这是目前谷歌和苹果在 Chrome 和 Safari 上都力推的一种全新推送服务，Firefox最近也加入了这个阵营。...三、 Web Push 让站点为主，APP 为辅的网站可以摆脱 APP 安装量少的困扰，访问你站点的人，只有一小部分会安装你的 APP，而Web Push 不需要安装任何 APP 在电脑上，只要用户点击一次...第三步，浏览器端接收消息推送，触发push事件并展示 ? 浏览器在接收到推送服务器发来的推送后，将其解码并触发一个push事件。...Service Worker由于它可以在浏览器页面未打开，浏览器未打开时执行，因此一般选择它完成web push的最后一步，即响应push事件完成展示通知等业务逻辑。...如果不处理未正常执行的promise，部分浏览器如chrome会展示默认消息框： ?

4.5K2 0

做好内容安全检测，和风险说「再见」！（下）

小程序端进行文本内容的弱校验,减少API的请求。如何将涉及违规的文本内容用*号代替,进行过滤处理。云函数调用方式的优点解析(推荐使用)。...如果您之前有动手实践过的话,您依然发现,这个过程仍然很复杂,分别要请求两个接口,还要拼接字段,还要手动的去查找小程序的APPID,以及APPSECRET秘钥。...02.在小程序端对文本内容进行校验频繁的请求云函数接口,一定程度上会有损用户体验,造成小程序的卡顿等之类的情况，对于一些常规敏感词,在小程序端是可以手动地进行自定义校验的,有如下两种处理方式：违规内容...违规内容强制用户不能输入,发布,或者评论等针对敏感词汇,用*号进行替代 (针对敏感词汇,用***号进行替代) 那这个究竟是怎么实现的呢事件的触发应该是在失去焦点的时候,就进行常规自定义文本内容校验...对于违规词的手动收集,也是可以单独的弄一个接口的,在小程序端哪里需要检验的,哪里触发事件,就在哪里发起请求就可以的。

1.2K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭