跨浏览器开发经验总结(三)   警惕“IE依赖综合症”


Posted in Javascript onMay 13, 2010

DHTML
DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比。但是所有的浏览器都认识这些语法吗?
document.all
document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(…)
element.outerText, element.innerText, element.outerHTML,element.innerHTML
element.outerText, element.innerText, element.outerHTML是属于IE特有的, 而element.innerHTML是通用的。
如果要在其他浏览器下使用不通用的属性,可以参考以下代码实现:

if(!isIE()){ 
HTMLElement.prototype.__defineGetter__("innerText", 
function(){ 
var anyString = ""; 
var childS = this.childNodes; 
for(var i=0; i<childS.length; i++){ 
if(childS[i].nodeType==1) 
anyString += childS[i].innerText; 
else if(childS[i].nodeType==3) 
anyString += ahildS[i].nodeValue; 
} 
return anyString; 
} 
); 
HTMLElement.prototype.__defineSetter__("innerText", 
function(sText){ 
this.textContent=sText; 
} 
); 
}

document.forms.actionForm.inputName.value
之前用document.all.title.value来获取名为actionForm的标单中名为title的input域值得地方,应该改为document.forms.actionForm.input.value,要这么使用,首先要保证HTML中form标签与其他标签结构上有完整的闭合关系。
Table操作
moveRow ( iSource , iTarget )方法
oRow = tableObject.moveRow ( iSource , iTarget ),这个方法可以很方便实现table中tr的动态顺序调整。但是这个方法是IE内核自己实现的,不是DOM标准方法,所以别的浏览器没有。在使用到了这些IE独有的方法的地方,要么换用标准的DOM节点操纵方式——insertBefore(currobj, beforeObj.nextSibling),要么先在HTMLDocument类的prototype上自己实现一个 moveRow方法:
function getTRArray(){ 
…… 
//将需要操纵的tr都放入数组作为该方法的返回值 
} function getTRByIndex(sourceELIndex){ 
var trArray = getTRArray(); 
var result = trArray[sourceELIndex]; 
return result; 
} 
if( !isIE && HTMLElement.moveRow == null ) 
{ 
//入参说明: 
//sourceELIndex :需要移动的tr在tbody中的第几行(>=1) 
//targetELIndex :需要移动到tbody中的第几行(>=1,<=行数) 
HTMLElement.prototype.moveRow = function(sourceELIndex,targetELIndex) 
{ 
var tbObject = document.getElementById("tbodyEL"); 
var resultEL; 
if(sourceELIndex>=targetELIndex) 
{//move up 
var s = sourceELIndex-1; 
var t = targetELIndex-1; 
}else{ 
var s = sourceELIndex-1; 
var t = targetELIndex; 
} 
var sourceEL = getTRByIndex(s); 
var targetEL = getTRByIndex(t); 
//alert("begin"+sourceELIndex+targetELIndex); 
//alert("begin"+s+t); 
tbObject.insertBefore(sourceEL,targetEL); 
resultEL = sourceEL; 
return resultEL; 
} 
}
Javascript 相关文章推荐
Using the TextRange Object
Oct 14 Javascript
用JavaScript脚本实现Web页面信息交互
Dec 21 Javascript
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
颜色选择器 Color Picker,IE,Firefox,Opera,Safar
Nov 25 Javascript
js实现简单div拖拽功能实例
May 12 Javascript
JS随机调用指定函数的方法
Jul 01 Javascript
Javascript 计算字符串在localStorage中所占字节数
Oct 21 Javascript
JavaScript组件开发之输入框加候选框
Mar 10 Javascript
基于Vue实例生命周期(全面解析)
Aug 16 Javascript
vue 过滤器filter实例详解
Mar 14 Javascript
如何解决.vue文件url引用文件的问题
Jan 18 Javascript
JS/jQuery实现简单的开关灯效果【案例】
Feb 19 jQuery
JavaScript prototype属性使用说明
May 13 #Javascript
js 实现复制到粘贴板的功能代码
May 13 #Javascript
js href的用法
May 13 #Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
May 13 #Javascript
Js 随机数产生6位数字
May 13 #Javascript
js实现兼容IE6与IE7的DIV高度
May 13 #Javascript
JS 文件传参及处理技巧分析
May 13 #Javascript
You might like
《OVERLORD》手游英文版即将上线 手机上也能扮演骨王
2020/04/09 日漫
php中通过虚代理实现延迟加载的实现代码
2011/06/10 PHP
php中time()和mktime()方法的区别
2013/09/28 PHP
php设计模式之组合模式实例详解【星际争霸游戏案例】
2020/03/27 PHP
event.srcElement+表格应用
2006/08/29 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
jQuery实现的导航动画效果(附demo源码)
2016/04/01 Javascript
深入理解jQuery之防止冒泡事件
2016/05/24 Javascript
jQuery实现产品对比功能附源码下载
2016/08/09 Javascript
JS Canvas定时器模拟动态加载动画
2016/09/17 Javascript
bootstrapfileinput实现文件自动上传
2016/11/08 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解jquery选择器的原理
2017/08/01 jQuery
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
图解javascript作用域链
2019/05/27 Javascript
Nodejs实现图片上传、压缩预览、定时删除功能
2019/10/25 NodeJs
Vue使用虚拟dom进行渲染view的方法
2019/12/26 Javascript
基于javascript处理二进制图片流过程详解
2020/06/08 Javascript
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python实现WebSocket服务端过程解析
2019/10/18 Python
CSS伪类与CSS伪元素的区别及由来具体说明
2012/12/07 HTML / CSS
BSTN意大利:德国街头和运动文化高品质商店
2020/12/22 全球购物
Kickers鞋英国官网:男士、女士和儿童鞋
2021/03/08 全球购物
房地产营销策划方案
2014/02/08 职场文书
县级文明单位申报材料
2014/05/23 职场文书
敬老院标语
2014/06/27 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
入伍通知书
2015/04/23 职场文书
严以修身专题学习研讨会发言材料
2015/11/09 职场文书
企业管理不到位检讨书
2019/06/27 职场文书
浅谈tf.train.Saver()与tf.train.import_meta_graph的要点
2021/05/26 Python