跨浏览器开发经验总结(三)警惕“IE依赖综合症”
2023-06-13 09:14:18 时间
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是通用的。
如果要在其他浏览器下使用不通用的属性,可以参考以下代码实现:
复制代码代码如下:
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(){
varanyString="";
varchildS=this.childNodes;
for(vari=0;i<childS.length;i++){
if(childS[i].nodeType==1)
anyString+=childS[i].innerText;
elseif(childS[i].nodeType==3)
anyString+=ahildS[i].nodeValue;
}
returnanyString;
}
);
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方法:
functiongetTRArray(){
……
//将需要操纵的tr都放入数组作为该方法的返回值
}
functiongetTRByIndex(sourceELIndex){
vartrArray=getTRArray();
varresult=trArray[sourceELIndex];
returnresult;
}
if(!isIE&&HTMLElement.moveRow==null)
{
//入参说明:
//sourceELIndex:需要移动的tr在tbody中的第几行(>=1)
//targetELIndex:需要移动到tbody中的第几行(>=1,<=行数)
HTMLElement.prototype.moveRow=function(sourceELIndex,targetELIndex)
{
vartbObject=document.getElementById("tbodyEL");
varresultEL;
if(sourceELIndex>=targetELIndex)
{//moveup
vars=sourceELIndex-1;
vart=targetELIndex-1;
}else{
vars=sourceELIndex-1;
vart=targetELIndex;
}
varsourceEL=getTRByIndex(s);
vartargetEL=getTRByIndex(t);
//alert("begin"+sourceELIndex+targetELIndex);
//alert("begin"+s+t);
tbObject.insertBefore(sourceEL,targetEL);
resultEL=sourceEL;
returnresultEL;
}
}
相关文章
- 前端学习笔记———浏览器篇
- chrome插件-Adblock Plus 屏蔽浏览器网页所有广告
- 阶段六:浏览器中的网络
- rtsp 获取视频流 java_浏览器无插件播放rtsp视频流 java后台 + js + html
- 爬虫使用浏览器渲染的一些最佳实践
- JS检测浏览器类型和版本号(非常详细)
- [下载] 谷歌浏览器稳定版通道更新至Google Chrome 89.0.4389.128版
- 浏览Linux世界:探索命令行浏览器(linux命令浏览器)
- 苹果 Safari 浏览器将全面封杀超过 13 个月的长效 HTTPS 证书
- 走在前沿 Edge 浏览器上打开 Oracle(edge打开oracle)
- 无间断滚动的新闻文章列表多浏览器兼容
- 不同浏览器javascript变量作用域的处理方法
- window.event快达到全浏览器支持了,以后使用就方便了
- js模拟点击以提交表单为例兼容主流浏览器
- javascript判断chrome浏览器的方法
- Javascript字符串浏览器兼容问题分析