为了提高网页的加载速度,减少服务器的压力。我们会采用javascript动态来创建html页面元素。好处是有的,但坏处也会相对而行。我们在创建html元素会存在一些浏览器兼容性的问题。主要表现于ie7 及其以下版本。以下对此进行问题 分析和处理。
/*
动态创建页面素时会存在一些兼容性的问题(仅存在于ie7 及更低的版本)
已知的一些问题:
1.不能设置动态创建的<iframe> 元素的name属性
2.不能通过表单的reset()方法重设动态重建的<input>元素
3.动态创建的type特性值为reset的<button>元素重置不了表单
4.动态创建的一批name相同的单选/复选 按钮彼此毫无关系。name值相同的一组单选/复选 按钮本来应该用于表示同一选项的不同值,但动态创建的一批这种单选按钮之间却没有这种关系。
*/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
</body>
<script language="javascript" type="text/javascript">
//(一) 兼容 IE7以上或者其他浏览器
/* var box1= document.createElement("input");
box1.type="checkbox";
box1.name="age";
box1.value="20";
var box2= document.createElement("input");
box2.type="checkbox";
box2.name="age";
box2.value="20";
var box3= document.createElement("input");
box3.type="checkbox";
box3.name="all";
box3.value="20";
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].οnclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}*/
//(二) 兼容 IE7 及其以下的浏览器
/*var box1= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"21\" />");
var box2= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"22\" />");
var box3= document.createElement("<input type=\"checkbox\" name=\"all\" value=\"22\" />"); ;
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].οnclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
} */
//(三) 兼容各种浏览器的方法
var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
if(parseInt(Sys.ie)<=7){
var box1= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"21\" />");
var box2= document.createElement("<input type=\"checkbox\" name=\"age\" value=\"22\" />");
var box3= document.createElement("<input type=\"checkbox\" name=\"all\" value=\"22\" />"); ;
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].οnclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}
}else{
var box1= document.createElement("input");
box1.type="checkbox";
box1.name="age";
box1.value="20";
var box2= document.createElement("input");
box2.type="checkbox";
box2.name="age";
box2.value="20";
var box3= document.createElement("input");
box3.type="checkbox";
box3.name="all";
box3.value="20";
document.body.appendChild(box1);
document.body.appendChild(box2);
document.body.appendChild(box3);
document.getElementsByName('all')[0].οnclick=function(){
if(this.checked){
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=true;
}
}else{
var len= document.getElementsByName("age").length;
for(i=0;i<len;i++){
document.getElementsByName("age")[i].checked=false;
}
}
}
}
</script>
</html>
问题补充:
js动态创建页面时,对于搜索引擎不是那么的友好。为了促使友好体验,我们还需要去选择的去使用。如果我们做的是一个管理型的或者是产品型的项目,就不用去考虑搜索引擎了,反之其他的需要考虑。