`
highfly-s
  • 浏览: 97126 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

创建html 元素的兼容性 
阅读更多

为了提高网页的加载速度，减少服务器的压力。我们会采用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].onclick=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].onclick=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].onclick=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].onclick=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动态创建页面时，对于搜索引擎不是那么的友好。为了促使友好体验，我们还需要去选择的去使用。如果我们做的是一个管理型的或者是产品型的项目，就不用去考虑搜索引擎了，反之其他的需要考虑。

 

 

分享到：
| css网页布局，三列浮动中间列宽度自适应cs ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 动态生成css代码的两种方法

    有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。但有些兼容性问题我们需要解决。首先在符合w3c...

    JavaScript详解(第2版)

    1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　JavaScript及其在Web开发中承担的角色　7 1.8　JavaScript和事件　9 1.9　标准化JavaScript和W3C　11 1.9.1　...

    源文件程序天下JAVASCRIPT实例自学手册

    1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过[removed]与[removed]标记对引入 1.4.2 通过...

    JavaScript内核系列

    后来 出现的JSP，ASP等服务器端语言可以为页面提供动态的内容，但是如果没有JavaScript则无法在服务器返回之后动态的在前端修改页面，也无法有 诸如鼠标移上某页面元素则高亮该元素之类的效果，因此JavaScript的出现...

    JavaScript王者归来part.1 总数2

    　6.5.1 动态创建函数--一个利用Function实现Lambda算子的例子　 　6.5.2 模式--函数工厂及其实例　 　6.6 总结　 　第7章 对象 　7.1 什么是对象　 　7.2 对象的属性和方法　 　7.2.1 对象的内置属性　 　7.2.2 为...

    JavaScript基础和实例代码

    1.2.4 动态页面 1.2.5 数值计算 1.3 JavaScript编程起步 1.3.1 “Hello World！”程序 1.3.2 选择JavaScript脚本编辑器 1.4 如何引入JavaScript脚本代码 1.4.1 通过与标记对引入 1.4.2 通过标记的src属性引入 1.4.3 ...

    使用javascript插入样式

    有时候我们需要利用js来动态生成页面上style标签中的css代码，方法很直接，就是直接创建一个style元素，然后设置style元素里面的css代码，最后把它插入到head元素中。 但有些兼容性问题我们需要解决。首先在符合w3c...

    精通JavaScript

    • 11.10.htm 动态修改表单元素内容 第12章（\第12章） • 12.1.htm Document树的简单例子 • 12.2.htm getElementById()方法 • 12.3.htm DOM结点属性 • 12.4.htm 文档...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    （3）针对页面自适应问题，本文结合渐进增强以及拥抱流式布局的思想，同时研究利用了移动设备的视口特性，实现跨分辨率、跨设备的页面自适应。 （4）针对系统的功能实现问题，通过结合利用原生态框架与HTML5的跨平台...

    大名鼎鼎SWFUpload- Flash+JS 上传

    由于Flash Player 10的升级，SWFUpload V2.2.0版本前的程序会出现不兼容问题。详细见Flash Player 10升级导致SWFUpload程序异常，SWFUpload V2.2.0的文档已更新，该V2.1.0帮助文档不再维护！。 TOC SWFUpload ...

    ASP.NET4高级程序设计第4版 带目录PDF 分卷压缩包 part1

    3.3.3　动态控件的创建 3.4　Page类 3.4.1　Session、Application和Cache 3.4.2　Request 3.4.3　Response 3.4.4　Server 3.4.5　User 3.4.6　Trace 3.4.7　访问其他类中的HTTP上下文 3.5　总结 第4章　...

    jQuery权威指南-源代码

    3.3　创建节点元素/58 3.4　插入节点/60 3.4.1　内部插入节点方法/60 3.4.2　外部插入节点方法/64 3.5　复制节点/66 3.6　替换节点/68 3.7　包裹节点/69 3.8　遍历元素/71 3.9　删除元素/73 3.10　综合案例分析—...

    精通AngularJS part1

    它是一套JavaScript前端框架，用于开发当下流行的数据驱动的单页面Web应用。其核心特性是：MVC、模块化、自动双向数据绑定、语义化标签、依赖注入等。 作者简介 Pawel Kozlowski有15年以上的Web开发经验，接触过...

    ASP.NET4高级程序设计(第4版) 3/3

    3.3.3　动态控件的创建　82 3.4　Page类　84 3.4.1　Session、Application和Cache　84 3.4.2　Request　85 3.4.3　Response　86 3.4.4　Server　88 3.4.5　User　90 3.4.6　Trace　91 3.4.7　访问其他类中的HTTP上...

    PHP入门到精通

    22.5动态创建XML文档 PHP与LDAP技术（教学录像：25分27秒） 23.1LDAP简介 23.2LDAP服务器的安装与配置 23.3PHP与LDAP PHP与Ajax技术（教学录像：32分47秒） 24.1了解AJAX 24.2AJAX使用的技术 24.3Ajax开发需要注意的...

    PHP入门到精通02

    22.5动态创建XML文档 PHP与LDAP技术（教学录像：25分27秒） 23.1LDAP简介 23.2LDAP服务器的安装与配置 23.3PHP与LDAP PHP与Ajax技术（教学录像：32分47秒） 24.1了解AJAX 24.2AJAX使用的技术 24.3Ajax开发需要注意的...

    jquery插件使用方法大全

    它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX...

    DotNetTextBox所见即所得编辑器控件 v3.3.1

    4) 使用帮助.CHM里的常见问题增加对应用全局样式后不能使用功能页面的解决方法。 5) 优化了控件部分户端代码。 6) 更新了部分多语言的翻译文字。 &lt;br&gt;2007/8/10 Version 3.2.8 Free &lt;br&gt;Updates:...

    Tcl_TK编程权威指南pdf

    使用cgi创建动态页面 guestbook．cgi脚本程序 定义表单以及处理表单数据 cgi．tcl软件包 接下去的几步 第4章　tcl中的字符串处理 string命令 append命令 format命令 scan命令 binary命令 相关章节 第5章...

Magicbox
Global site tag (gtag.js) - Google Analytics