Javascript IE8与Chrome、Safari和IE9的兼容性问题
这可能是一个挑战 我非常精通AJAX和JavaScript,甚至编写OOP JS应用程序。所以你可以想象当我在IE7,8,Opera,FF4中构建一个完美工作的页面时我的沮丧。我的意思是,除非世界已经改变,IE和FF才是兼容性测试所需要的。。。。对吧 显然错了 正如我所说,我有一个复杂的js应用程序,工作得很好。但如果在Chrome和Safari中失败了。脚本加载了动态DOM创建和属性操作,我想我已经在一组脚本中隔离了这个问题。。。下面 你们这些天才们中有谁能识别出任何可能与Chrome和Safari有问题的JS吗?我想我已经确定了。样式调用认为CSS破坏了演示文稿。顺便说一句,当我用IE9测试的时候,它最终也是同样的问题。。。这可能是一个线索 我已经在网上搜索了很多地方,要么我没有找到正确的关键词,要么。。。无论如何:Javascript IE8与Chrome、Safari和IE9的兼容性问题,javascript,css,google-chrome,safari,cross-browser,Javascript,Css,Google Chrome,Safari,Cross Browser,这可能是一个挑战 我非常精通AJAX和JavaScript,甚至编写OOP JS应用程序。所以你可以想象当我在IE7,8,Opera,FF4中构建一个完美工作的页面时我的沮丧。我的意思是,除非世界已经改变,IE和FF才是兼容性测试所需要的。。。。对吧 显然错了 正如我所说,我有一个复杂的js应用程序,工作得很好。但如果在Chrome和Safari中失败了。脚本加载了动态DOM创建和属性操作,我想我已经在一组脚本中隔离了这个问题。。。下面 你们这些天才们中有谁能识别出任何可能与Chrome和Saf
for(var i=0;i<list.length;i++){
SupportContent.hrefArray[SupportContent.hrefArray.length] = list[i];
if(i == list.length-1)SupportContent.bookMarkListing();
ChangeDOM.addChildren({'elType':'div','id':'title~'+list[i]},this.displaySupport);
var thisTitle = document.getElementById('title~'+list[i]);
thisTitle.style.paddingTop = '15px';
thisTitle.onclick = function(){SupportContent.manageLineOpenClose('arrow~'+this.id.split('~',2)[1]+'~c')};
ChangeDOM.addChildren({'elType':'span','id':'arrowCont~'+list[i]},thisTitle);
var thisArrow = document.getElementById('arrowCont~'+list[i]);
thisArrow.style.float = 'left';
thisArrow.style.width = '30px';
ChangeDOM.addChildren({'elType':'img','id':'arrow~'+list[i]+'~c','src':'/images/support/arrowClose.jpg','border':'0'},thisArrow);
ChangeDOM.addChildren({'elType':'div', 'id':'tabs~'+list[i]},this.displaySupport);//tabs container
var tabContainer = document.getElementById('tabs~'+list[i]);
tabContainer.style.borderBottom = '5px #35383c solid';
tabContainer.style.paddingTop = '5px';
tabContainer.style.backgroundColor = '#151515';
tabContainer.style.marginTop = '10px';
ChangeDOM.addChildren({'elType':'div', 'id':'content~'+list[i]},this.displaySupport);//contentContainer
var contentContainer = document.getElementById('content~'+list[i]);
contentContainer.style.display = 'none';
contentContainer.style.overflow = 'hidden';
for(var j=1;j<5;j++){
this.buildTab(j,tabNames[j],list[i]);
this.setContent(j,list[i],contentContainer);
};
顺便说一句。。。ChangeDOM类是我创建的一个自定义类,用于操作DOM。此代码在下面
//custom utility to change the DOM
//adds children to given node
//"keys" format - {"['elType'] or [element attribute] or ['text']":"[element type] or [attribute property] or [actual text],"":""...}
function ChangeDOM(){}
ChangeDOM.prototype.addChildren = function(keys,parentNodeObject){
//alert(parentNodeObject.id);
var elName = '';
if (keys["elType"] == 'input'){
if (keys["type"] == 'radio'){
try{
elName = document.createElement('<input type="radio" name="fldID" />');
}catch(err){
elName = document.createElement('input');
}
try{elName.setAttribute('type','radio');}catch(err){elName.type = 'radio'};
elName.setAttribute('name','fldID');
}
}
if(elName == '')elName=document.createElement(keys["elType"]);
for(var key in keys){
if(key != "elType"){
switch(key){
case('type'): if (keys[key] == 'radio')break;
elName.type = keys[key];
break;
case('name'): elName.name = keys[key];
break;
case('value'): elName.value = keys[key];
break;
case('id'): elName.id = keys[key];
break;
case('href'): elName.href = keys[key];
break;
default: if(key !='text')elName.setAttribute(key,keys[key]);
break;
}
}
}
parentNodeObject.appendChild(elName);
if(keys['text']){
if(keys["elType"] == "input"){
this.addChildren({'text':keys['text']},parentNodeObject);
}else{
var txt=document.createTextNode(keys[key]);
elName.appendChild(txt);
}
}
return;
}
//clears all children from given node
ChangeDOM.prototype.clearChildren = function(parentNodeObject){
if(parentNodeObject.childNodes){
var nodechildren = new Array();
nodechildren = parentNodeObject.childNodes;
if(nodechildren.length>0)for(i=0;nodechildren.length;i++)parentNodeObject.removeChild(parentNodeObject.lastChild);
}
return;
}
//updates text for a given node
ChangeDOM.prototype.updateText = function(newText,parentNodeObject){
this.clearChildren(parentNodeObject);
this.addChildren({'text':newText},parentNodeObject);
}
我找到了解决办法。这不是tilde或bad.js。这就是我所想的。。。css。一旦我开始指定框的宽度,我的脚本就开始构建了。其他浏览器似乎也采用了宽度 谢谢大家的意见
另一方面,尽管我确实喜欢JQuery,并且经常使用它,但我更喜欢JS的原始功能。即使使用JQuery,我也必须指定宽度才能正确使用它。这就是人们使用框架的原因。让其他人担心如何在多个浏览器之间工作。您是否考虑过使用WebKit web inspector/调试器来查看发生了什么?…除非世界发生了变化,IE和FF才是您进行兼容性测试所需要的一切…-世界没有改变:事情从来没有这样过。当然,除非兼容性测试指的是与IE和FF的兼容性…谁告诉过你不需要测试Webkit IE、Chrome、Safari和其他东西???就像大卫说的。。。您应该使用像jQuery这样的框架来避免这样的问题。话虽如此,在JSFiddle.net中弹出一个演示,这样我们就可以在您真正陷入困境时进行调试。