Firefox中Iframe的blur与focus事件问题

2024-01-16 15:58

本文主要是介绍Firefox中Iframe的blur与focus事件问题,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近在做一个网站的HTML文章发布功能,用到了HTML编辑器,这个是以Iframe为基础的编辑器(貌似网上大多的都是用iframe的)。却 发现一个问题,IE下运行得好好的,在Firefox里却始终不能提交更新后的数据到服务器上,找了半天原因才发现原来是在iframe的onblur事 件里面调了更新数据内容的方法,但firefox下却没有执行。

  于是立马开始google了一把,发现遇到问题的不是我一个人,大量的人都是在问怎么解决firefox中触发blur和focus事件的问题。答案到是给了一大堆,却没一个靠谱的。有一种答案说是放到setInterval里去执行。

1     < iframe  src ="about:blank"  onfocus ="alert('onfocus');"  onblur ="alert('onblur');"  id ="AA" >  
2               </ iframe >
3  
4               < script >
5              window.setTimeout(  function (){alert( 1 ); document.getElementById( " AA " ).focus(); },  0 );
6               </ script >

看了半天也没明白这到底是怎么回事,调试了一把发现在是在第一次运行的时候在setTimeout触发了后,确实触发了blur事件和focus 事 件,可是之后再通过鼠标点击想触发这两个事件也不行,看样子这两个事件是有机会触发的,也许是采用一般的方式不能吧。不过用setTimeout这种方式 太鸡肋了,总不至于每次去调用setTimeout去触发吧,我要是知道什么时候去调setTimeout了还不如直接去调用事件处理函数更好点。这种方 法也是被毙了。

  再次深度GOOGLE,发现了一个老外写的如下代码:

 1   < script >
 2   function  setit(){
 3   if (document.all){
 4   document.getElementById( " myframe " ).attachEvent( " onblur " ,dothis);
 5   } else {
 6   document.getElementById( " myframe " ).contentWindow.addEventListener( " blur " ,dothis, false );
 7   }
 8   }
 9  
10   function  dothis(){
11   alert( " blurred " );
12   }
13   </ script >
14  
15   < body  onload ="setit()" >
16   < iframe   width ="155"  height ="144"  id ="myframe" ></ iframe >
17   < input  />
18   </ body >

 

 试了一下果真可以直接触发,效果跟在IE下的一样。回过头去分析了一下代码,发现firefox中原来iframe上的事件挂到了iframe中 的contentWindow中去了,与真接在html元素里面写事件属性相比,IE可能把iframe上的事件关联到了contentWindow上 了,可firefox却不是这样的,还是各是各的。这样带来的问题是firefox想要给iframe加事件只能够用脚本去加了。

  本来以为IE和firefox中对iframe的事件这部分定义不一样,回头去再去看看了HTML4.0中关于iframe的定义,果真是 iframe上面就没有任何事件的定义,看来是IE顺手给加上的。firefox号称最符合html标准,那么写在iframe上的“事件”没有任何响 应,自然也是合情合理的。DHTML手册上有一句话,由于没有“window”元素,body 元素将作为下列 window 对象事件的宿主:onblur, onbeforeunload, onfocus, onload 和 onunload。可HTML4.0里面body是有这两个事件的,所以也就不难解释为什么用脚本给iframe的contentWindow挂上事件就 可以触发了,实际上这个事件是来自于contentWindow里面的body元素。

这篇关于Firefox中Iframe的blur与focus事件问题的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/613117

相关文章

好题——hdu2522(小数问题:求1/n的第一个循环节)

好喜欢这题,第一次做小数问题,一开始真心没思路,然后参考了网上的一些资料。 知识点***********************************无限不循环小数即无理数,不能写作两整数之比*****************************(一开始没想到,小学没学好) 此题1/n肯定是一个有限循环小数,了解这些后就能做此题了。 按照除法的机制,用一个函数表示出来就可以了,代码如下

hdu1043(八数码问题,广搜 + hash(实现状态压缩) )

利用康拓展开将一个排列映射成一个自然数,然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件,把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new

购买磨轮平衡机时应该注意什么问题和技巧

在购买磨轮平衡机时,您应该注意以下几个关键点: 平衡精度 平衡精度是衡量平衡机性能的核心指标,直接影响到不平衡量的检测与校准的准确性,从而决定磨轮的振动和噪声水平。高精度的平衡机能显著减少振动和噪声,提高磨削加工的精度。 转速范围 宽广的转速范围意味着平衡机能够处理更多种类的磨轮,适应不同的工作条件和规格要求。 振动监测能力 振动监测能力是评估平衡机性能的重要因素。通过传感器实时监

缓存雪崩问题

缓存雪崩是缓存中大量key失效后当高并发到来时导致大量请求到数据库,瞬间耗尽数据库资源,导致数据库无法使用。 解决方案: 1、使用锁进行控制 2、对同一类型信息的key设置不同的过期时间 3、缓存预热 1. 什么是缓存雪崩 缓存雪崩是指在短时间内,大量缓存数据同时失效,导致所有请求直接涌向数据库,瞬间增加数据库的负载压力,可能导致数据库性能下降甚至崩溃。这种情况往往发生在缓存中大量 k

6.1.数据结构-c/c++堆详解下篇(堆排序,TopK问题)

上篇:6.1.数据结构-c/c++模拟实现堆上篇(向下,上调整算法,建堆,增删数据)-CSDN博客 本章重点 1.使用堆来完成堆排序 2.使用堆解决TopK问题 目录 一.堆排序 1.1 思路 1.2 代码 1.3 简单测试 二.TopK问题 2.1 思路(求最小): 2.2 C语言代码(手写堆) 2.3 C++代码(使用优先级队列 priority_queue)

【VUE】跨域问题的概念,以及解决方法。

目录 1.跨域概念 2.解决方法 2.1 配置网络请求代理 2.2 使用@CrossOrigin 注解 2.3 通过配置文件实现跨域 2.4 添加 CorsWebFilter 来解决跨域问题 1.跨域概念 跨域问题是由于浏览器实施了同源策略,该策略要求请求的域名、协议和端口必须与提供资源的服务相同。如果不相同,则需要服务器显式地允许这种跨域请求。一般在springbo

题目1254:N皇后问题

题目1254:N皇后问题 时间限制:1 秒 内存限制:128 兆 特殊判题:否 题目描述: N皇后问题,即在N*N的方格棋盘内放置了N个皇后,使得它们不相互攻击(即任意2个皇后不允许处在同一排,同一列,也不允许处在同一斜线上。因为皇后可以直走,横走和斜走如下图)。 你的任务是,对于给定的N,求出有多少种合法的放置方法。输出N皇后问题所有不同的摆放情况个数。 输入

vscode中文乱码问题,注释,终端,调试乱码一劳永逸版

忘记咋回事突然出现了乱码问题,很多方法都试了,注释乱码解决了,终端又乱码,调试窗口也乱码,最后经过本人不懈努力,终于全部解决了,现在分享给大家我的方法。 乱码的原因是各个地方用的编码格式不统一,所以把他们设成统一的utf8. 1.电脑的编码格式 开始-设置-时间和语言-语言和区域 管理语言设置-更改系统区域设置-勾选Bata版:使用utf8-确定-然后按指示重启 2.vscode

Android Environment 获取的路径问题

1. 以获取 /System 路径为例 /*** Return root of the "system" partition holding the core Android OS.* Always present and mounted read-only.*/public static @NonNull File getRootDirectory() {return DIR_ANDR