javascript 动态创建页面元素兼容问题

最新推荐文章于 2023-01-02 23:44:46 发布

孤长风

最新推荐文章于 2023-01-02 23:44:46 发布

阅读量233

点赞数

分类专栏： WEB前端 javascript 文章标签：创建html 元素的兼容性

本文链接：https://blog.csdn.net/highflys/article/details/84414476

版权

WEB前端同时被 2 个专栏收录

53 篇文章 0 订阅

订阅专栏

javascript

27 篇文章 0 订阅

订阅专栏

为了提高网页的加载速度，减少服务器的压力。我们会采用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>

//（一）兼容 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动态创建页面时，对于搜索引擎不是那么的友好。为了促使友好体验，我们还需要去选择的去使用。如果我们做的是一个管理型的或者是产品型的项目，就不用去考虑搜索引擎了，反之其他的需要考虑。

孤长风

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 动态创建页面元素兼容问题

为了提高网页的加载速度，减少服务器的压力。我们会采用javascript动态来创建html页面元素。好处是有的，但坏处也会相对而行。我们在创建html元素会存在一些浏览器兼容性的问题。主要表现于ie7 及其以下版本。以下对此进行问题分析和处理。 /*动态创建页面素时会存在一些兼容性的问题（仅存在于ie7 及更低的版本）已知的一些问题：1.不能设置动态创建的&lt;iframe&gt; ...
复制链接

扫一扫