Firefox 浏览器的DOM原型扩展

  我不想挑起IE与Firefox之间的争论,我只想说说Firefox浏览器有而IE里没有的一个功能,对DOM里的对象原型的扩展。
    在DOM里的window、document、element、event等这些对象在Firefox(或者说Mozilla核心的浏览器)里都有与之对应的原型:Window、HTMLDocument、HTMLElement、Event等,对于这些原型扩展之后,那些window、document等对象就“自动”拥有某些成员属性或者成员方法了。举个简单的例子,比如在IE里都有一个 outerHTML 属性,可以取得这些元素所有的细节信息,但是这个属性不是W3C标准属性,所以那些非IE的浏览器就不会拥有这种属性了。不过因为这个属性使用起来非常方便,我想在Firefox之类的浏览器里也使用这个属性那该怎么办呢?这里就要用到原型扩展了:
<script type="text/javascript">/*<![CDATA[*/
if(typeof(HTMLElement)!="undefined" && !window.opera)
{
  HTMLElement.prototype.__defineGetter__("outerHTML",function()
  {
    var a=this.attributes, str="<"+this.tagName, i=0;for(;i<a.length;i++)
    if(a[i].specified) str+=" "+a[i].name+‘="‘+a[i].value+‘"‘;
    if(!this.canHaveChildren) return str+" />";
    return str+">"+this.innerHTML+"</"+this.tagName+">";
  });
  HTMLElement.prototype.__defineSetter__("outerHTML",function(s)
  {
    var r = this.ownerDocument.createRange();
    r.setStartBefore(this);
    var df = r.createContextualFragment(s);
    this.parentNode.replaceChild(df, this);
    return s;
  });
  HTMLElement.prototype.__defineGetter__("canHaveChildren",function()
  {
    return !/^(area|base|basefont|col|frame|hr|img|br|input|isindex|link|meta|param)$/.test(this.tagName.toLowerCase());
  });
}
/*]]>*/</script>
    加了这么一段代码之后,在Firefox浏览器里再调用 document.getElementById("divId").outerHTML,(读取/赋值)一切正常,这一点优势是IE系列浏览器所不具有的。这一点算是 Firefox 浏览器(Mozilla核心的浏览器)的一个亮点吧!
    下面再写两个比较有用的扩展吧:
<script type="text/javascript">/*<![CDATA[*/
if(!window.attachEvent && window.addEventListener)
{
  Window.prototype.attachEvent = HTMLDocument.prototype.attachEvent=
  HTMLElement.prototype.attachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.addEventListener(en.toLowerCase().substr(2), func, cb);
  };
  Window.prototype.detachEvent = HTMLDocument.prototype.detachEvent=
  HTMLElement.prototype.detachEvent=function(en, func, cancelBubble)
  {
    var cb = cancelBubble ? true : false;
    this.removeEventListener(en.toLowerCase().substr(2), func, cb);
  };
}
if(typeof Event!="undefined" && !window.opera)
{
  var t=Event.prototype;
  t.__defineSetter__("returnValue", function(b){if(!b)this.preventDefault();  return b;});
  t.__defineSetter__("cancelBubble",function(b){if(b) this.stopPropagation(); return b;});
  t.__defineGetter__("offsetX", function(){return this.layerX;});
  t.__defineGetter__("offsetY", function(){return this.layerY;});
  t.__defineGetter__("srcElement", function(){var n=this.target; while (n.nodeType!=1)n=n.parentNode;return n;});
}
/*]]>*/</script>
以上的代码都是截取于我写的 jsframewrok 框架。 

Firefox 浏览器的DOM原型扩展

时间: 2024-10-11 01:14:10

Firefox 浏览器的DOM原型扩展的相关文章

【翻译】理念:无冲突的扩展本地DOM原型

菜鸟翻译,望大家多多指正哈 原文:http://lea.verou.me/2015/04/idea-extending-native-dom-prototypes-without-collisions/ 理念:无冲突的扩展本地DOM原型 正如我昨天在博文中指出,我不喜欢使用jQuery的原因之一是因为它的包装对象.对于jQuery来说,这是一个明智的决定:早在2006年它被第一次开发出来的时候,IE有一个非常讨厌的内存泄漏bug,当我们给一个元素添加属性时它便很容易被引发出来.哦,那时我们还没有

firefox浏览器不能使用window.close的解决方案

javascript中window.close()函数用来关闭窗体,而且IE.google.firefox浏览均支持,但由于firefox浏览器dom.allow_scripts_to_close_windows参数默认值为false,故close不启作用. 首先在firefox地址栏中输入about:config然后找到dom.allow_scripts_to_close_windows参数设置为true即可,如下图所示: 附 IE.google.firefox通用关闭窗口方法 functio

Chrome和Firefox浏览器执行new Date() 函数传参数得到不同结果的陷阱

某日,同事问到关于new Date() 函数传参数,在火狐浏览器和谷歌浏览器控制台运行,会得到不同的结果,刚开始觉得不可能,后来实际操作才发现此陷阱 var date = new Date('2014-07-25T23:00:00'); alert(date); 在火狐浏览器返回的是: Date {Fri Jul 25 2014 23:00:00 GMT+0800} 火狐浏览器版本(通过navigator.userAgent输出):"Mozilla/5.0 (Windows NT 6.1; WO

firefox浏览器中silverlight无法输入问题

今天用firefox浏览silverlight网页,想在文本框中输入内容,却没想到silverlight插件意外崩溃了.google一下,发现这是firefox的设置问题,解决方法如下: 1.在Firefox浏览器地址栏输入 about:config 2.点击“我保证会小心” 3.查找项目dom.ipc.plugins.enabled.npccbnetsigncom.dll,把它由 false 改成 true 4.关闭Firefox浏览器,再启动,OK

firefox浏览器播放音频

之前做的系统,在firefox浏览器下有更好的使用体验.因此要求客户统一使用firefox浏览器,前段时间客户要求在系统中加入音频效果. 在网上查了下,主要用到的标签有<bgsound>, <embd>, <audio>等等.其中<audio>标签是html5中新加入的对声音定义的标签.<bgsound>是IE的专用标签,只适用于IE浏览器.<embd>标签在firefox下,会要求你安装相关的插件.还好目前的新版本firefox浏览

CentOS 6.0升级firefox浏览器

越来越喜欢Linux系统,这里面的软件也喜欢按照自己喜好来摆置.原谅我词汇量少. 来记录下这次操作吧,以后就不用老跑人家博客按部就班了. CentOS系统里的firefox 无法升级到最新版,这怎么能受得了! 看来只能自力更生,奋发图强--- 1.从官网下载最新版firefox浏览器,www.firefox.com.cn.下载这个 2.将这个压缩包解压到/usr/local目录下,解压命令:tar -jxvf Firefox-latest.tar.bz2 -C /usr/local 也可直接在图

RedHat 7.0 Firefox浏览器 安装与更新

步骤:1. 下载: 2. 解压后即可使用,也可替换旧版本firefox 1. https://www.mozilla.org/en_US/firefox/new http://ftp.mozilla.org/pub/firefox/releases/50.1.0/linux-x86_64/en-US/firefox-50.1.0.tar.bz2 2. tar -jxf firefox-50.1.0.tar.bz2  (非root用户) cd firefox/ ./firefox 也可双击fire

FireFox浏览器的下载和安装、借助RamDisk让你的FireFox飞起来

想说的是,为什么我要写此博文,算是纪念我对FireFox浏览器的一个入门.最近,开始接触了它,看到了很多IT牛人极力推荐使用 “ FireFox浏览器 ”作为开发. 深得大牛指导! 下载 安装 这是,会将我们之前的浏览器里的一些信息,同步到FireFox浏览器对应位置. 需要一段时间!在此,需要关闭正在打开的浏览器.如,我这里,是正在使用谷歌浏览器. 设置百度为主页. 关闭之后,重启之后,可以看到效果. 进一步学习,感谢链主! 借助RamDisk让你的FireFox飞起来

基于内置类的原型扩展方法

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>基于内置类的原型扩展方法</title></head><body><script type="text/javascript"> var ary = [12, 23, 34, 12, 23, 34, 12, 23, 34, 12, 23, 34,