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

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;
}
}

赞 (0)

相关推荐

  • javascript 跨浏览器开发经验总结（五） js 事件

    简单事件模型和高级事件模型 简单事件模型和高级事件模型简单事件,就是事件与页面元素直观的绑定在一起的形式,如: 复制代码 代码如下: <div onclick="alert(this.innerHTML);"> element.onclick = function(){alert(this.innerHTML);} 只要不是用了个别浏览器独有的事件,一般的click,mouseover事件等在各浏览器中都可以这么使用. 但是当一个事件需要绑定多个监听,或者需要动态注册/移出

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

    DHTML DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比.但是所有的浏览器都认识这些语法吗? document.all document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(-) element.outerText, element.innerText, element.outerHTML,element.innerHTML element.outerTe

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

    DHTML DHTML是个好东西,大大方面了前端的交互实现,使得获取页面元素以及动态修改页面元素变的简单无比.但是所有的浏览器都认识这些语法吗? document.all document.all不是所有浏览器都能识别,要写出更通用的代码,最好还是通过id来得到,使用document.getElementById(-) element.outerText, element.innerText, element.outerHTML,element.innerHTML element.outerTe

  • 跨浏览器开发经验总结（四） 怎么写入剪贴板

    IE. Firefox可以支持JavaScript往剪贴板写入内容 IE可以很方便的支持剪贴板内容写入命令,可以使用execCommand(),也可以利用window.clipboardData. 使用execCommand,需要先从页面选中要复制到剪贴板的内容,如以下代码: 复制代码 代码如下: var doc = obj.createTextRange(); doc.select(); doc.execCommand('copy'); 使用window.clipboardData的方法如下,

  • 详细解读JavaScript的跨浏览器事件处理

    一.关于获取事件对象 FF有点倔强,只支持arguments[0],不支持window.event.这次真的不怪IE,虽然把event作为window的属性不合规范,但大家都已经默许这个小问题存在了,只有FF这么多年了还是特立独行.所以,跨浏览器的事件对象获取有以下两种方式: 带参的: getEvent : function(event){ return event ? event : window.event; //return event || window.event;//或者更简单的方式

  • 跨浏览器的设置innerHTML方法

    Ajax是个好东西,但使用起来却不是那么方便.问题总结如下: 在各种浏览器上的创建方式和使用方法不一致  各个浏览器对响应的缓存策略有所不同  浏览器存在跨域获取限制  前两个问题可以通过封装 XMLHTTPRequest 对象来解决,第三个问题的解决方法有很多中,兼容性和移植性比较好的就是在本域服务器上放置一个中转 proxy .Modello.ajax 就是提供这套解决方案的工具集. 安装 下载 Modello 和 Mdello.ajax  解压并将 modello.js, modello.

  • 跨浏览器通用、可重用的选项卡tab切换js代码

    由于近来学了点js,于是我装逼道...不太难吧...就切一下display属性?同学无视我..说要搞个通用的...什么还要跟ajax交互..???我愣是没有听懂...到底要搞什么...权当作练手,我自己胡弄了一个. 需求:同学口中的通用我不知道神马意思...那我就按自己的理解吧.. ①跨浏览器,IE6+,FF,Chrome,Safari,Opera ②同一个页面可以用同一个js设置不同的选项卡. 说太多没啥米用,来看代码吧. 一.html部分(其实这还没啥好看的,设置了三个,前两个是一样的,通过

  • 详解Python多线程Selenium跨浏览器测试

    详解Python多线程Selenium跨浏览器测试

    前言 在web测试中,不可避免的一个测试就是浏览器兼容性测试,在没有自动化测试前,我们总是苦逼的在一台或多台机器上安装N种浏览器,然后手工在不同的浏览器上验证主业务流程和关键功能模块功能,以检测不同浏览器或不同版本浏览器上,我们的web应用是否可以正常工作. 下面我们看看怎么利用python selenium进行自动化的跨浏览器测试. 什么是跨浏览器测试 跨浏览器测试是功能测试的一个分支,用以验证web应用能在不同的浏览器上正常工作. 为什么需要跨浏览器测试 通常情况下,我们都期望web类应用

  • js实现跨域访问的三种方法

    javascript跨域访问是web开发者经常遇到的问题,什么是跨域,一个域上加载的脚本获取或操作另一个域上的文档属性,下面将列出三种实现javascript跨域方法: 1.基于iframe实现跨域 基于iframe实现的跨域要求两个域具有aa.xx.com,bb.xx.com这种特点,也就是两个页面必须属于一个基础域(例如都是xxx.com,或是xxx.com.cn),使用同一协议(例如都是 http)和同一端口(例如都是80),这样在两个页面中同时添加document.domain,就可以实

  • css与javascript跨浏览器兼容性总结

    本文以大量实例形式总结了css与javascript跨浏览器的兼容性问题.分享给大家供大家参考.具体总结如下: 一.CSS样式兼容性 1. FLOAT闭合(clearing float) 网页在某些浏览器上显示错位很多时候都是因为使用了float浮动而没有真正闭合,这也是div无法自适应高度的一个原因.如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV.解决办法: 1) 给父DIV也设上float 2) 在

随机推荐