3.Javascript的浏览器兼容性问题

3.1 集合类对象问题
说明:IE下,可以使用()或[]获取集合类对象; Safari及Chrome下,只能使用[]获取集合类对象.
解决方法:统一使用[]获取集合类对象.

3.2 获取对象方式
说明：HTML对象的 id和name 在IE使用getElementById都会找到，在Safari及Chrome中name是找不到的，必须严格使用getElementById和getElementsByName.
解决方法：id使用getElementById, name使用getElementsByName，并要注意大小写

3.3 模态和非模态窗口问题
说明:IE下,可以通过showModalDialog和showModelessDialog打开模态和非模态窗口; 在Chrome中是将其作为window.open方法处理，而且不能使用window.returnValue的方法返回值
解决方法:在Chrome中使用window.opener.returnValue=’value’的方法返回值， 打开窗体时用半透明DIV遮住页面主体，在其之上显示“对话框”内容。showModelessDialog 方可以使用 window.open 代替

例子：父窗体

<!DOCTYPE html>

<html>

<head>

<title></title>

<script type="text/javascript">

function openDialog() {

//for chrome

if (navigator.appName == "Netscape") {

　　　　　　　　window.document.getElementById("winCover").style.display="block";

}

var retValue = window.showModalDialog("dialog.html?temp=" + Math.random(), window, 　　　　　　　　'scroll=no;resizable=no;help=no;status=no;center=yes;dialogHeight=400px;dialogWidth=300px');

//for chrome

if (retValue == undefined) {

retValue =   window.returnValue;

}

if (navigator.appName == "Netscape") {

window.document.getElementById("winCover").style.display   = "none";

}

alert("return value: " + retValue);

}

</script>

</head>

<body style="height:100%">

<input type="button" onclick="javascript: openDialog();" value="Show Modal dialog"/>

<div id="winCover" style="z-index:100; left:0px; top:0px; width:100%; height:100%; position:fixed; background-color:#e0e0e0; filter:Alpha(Opacity=60); opacity:0.6; display:none"></div>

</body>

</html>

子窗体

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title></title>

<script type="text/javascript">

function rt(s) {

if (window.opener) {

//for chrome

window.opener.returnValue = s;

window.close();

}

else {

window.returnValue = s;

window.close();

}

}

</script>

</head>

<body>

<input type="button" value="close" onclick="javascript: rt('abc');" />

</body>

</html>

3.4 event问题

说明：在IE下，可以直接在event中调用function,但是在Chrome中这样是无效的

解决方法：在function前统一加上”javascript:”，包括在服务器代码中addAttribute

例子：这样写在Chrome中无效

<input type="button" value="close" onclick="rt('abc');" />

应改为：

<input type="button" value="close" onclick="javascript: rt('abc');" />

JS和CSS的多浏览器兼容(3)的更多相关文章

  1. JS和CSS的多浏览器兼容(2)

    2.Css的浏览器兼容性 方法一,根据不同的浏览器加载不同的css file <!DOCTYPE html>  <html> <head> <title> ...

  2. JS和CSS的多浏览器兼容(1)

    1.指定文件在IE浏览器中的兼容性模式 要为你的网页指定文件模式,需要在你的网页中使用meta元素放入X-UA-Compatible http-equiv 标头.以下是指定为Emulate IE7 m ...

  3. JS控制CSS3，添加浏览器兼容前缀

    不同浏览器对于有些css3属性名字定义的时候,会带上特有的前缀,所以在css编写的时候,经常会一个属性写多个不同的前缀进行兼容.比如: div { transform: rotate(30deg); ...

  4. 浅谈CSS hack（浏览器兼容）

    今天简单写一点关于浏览器兼容的处理方法,虽然百度上已经有很多,但是我还是要写! 先看一个图 这个图描述了2016年1月至8月网民们所使用的浏览器市场份额(来源:http://tongji.baidu. ...

  5. CSS在不同浏览器兼容问题,margin偏移/offset溢出等

    margin在垂直取值时取最大值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  6. 在不同的浏览器使用不同的css样式,解决浏览器兼容问题

    区别IE6与FF:       background:orange;       *background:blue; 区别IE6与IE7:       background:green !import ...

  7. 关于引用JS和CSS文件刷新浏览器缓存问题，部署服务器后客户端样式不刷新

    问题描述 对样式的css文件进行了修改,部署到服务器后访问发现页面展示不正常,但是刷新之后就会展示正常. 问题分析 研究之后发现可能的原因有 css文件过大,加载缓慢 本地缓存问题,虽然服务器修改了c ...

  8. JS中常遇到的浏览器兼容问题和解决方法

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

  9. JS中常遇到的浏览器兼容问题和解决方法【转】

    今天整理了一下浏览器对JS的兼容问题,希望能给你们带来帮助,我没想到的地方请留言给我,我再加上: 常遇到的关于浏览器的宽高问题: //以下均可console.log()实验 var winW=docu ...

随机推荐

  1. Javascript return false的作用（转）

    大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.return false 就相当于终止符,r ...

  2. Linux 进程间通信

    [转]unix进程间的通信方式 (1)管道(Pipe):管道可用于具有亲缘关系进程间的通信,允许一个进程和另一个与它有共同祖先的进程之间进行通信. (2)命名管道(named pipe):命名管道克服 ...

  3. 30天，O2O速成攻略【8.15济南站】

    活动概况 时间:2015年08月15日13:30-16:30 地点:山东大学凤岐茶社(山东大学中心校区北门18号楼东连廊一层) 主办:APICloud.蚁巡 网址:www.apicloud.com 费 ...

  4. SQLAlchemy 对象缓存和刷新

    SQLAlchemy 对象缓存和刷新 SQLAlchemy 带有对象缓存机制,在重复查询相同的对象时,直接先查询本地的缓存,而不需要从数据库加载数据. 在每个 model 对象的内部,SQLAlche ...

  5. JDK和Tomcat的安装与配置

    1       JDK的安装 2       JDK的配置 3       JDK安装成功的验证 4       Tomcat的安装 (1)     解压” apache-tomcat-6.0.35. ...

  6. 使用JavaScript闭包，以工厂模式实现定时器对象

    原始对象写法 一般工作中写Javascript代码,主要写全局函数,并组织函数之间的调用,确实比较低级, 于是想利用面向对象的思想应用到JS编码中. 在火狐浏览器开发者网站上,看到一个实例利用对象技术 ...

  7. redmine发送邮件

    vim /data/server/redmine/apps/redmine/htdocs/config/configuration.yml default: # Outgoing emails con ...

  8. 基于axis2框架的两种发布webservice的方法

    这次在中韩的产品定义平台的开发,有幸接触到了通过自己写webservice给其他系统调用的项目. 具体开发背景:这个平台做了几个查询接口都是,都是用servlet方式处理请求,而这边系统之间是通过we ...

  9. Java基础之访问文件与目录——测试文件或目录的路径（TryPath）

    控制台程序,测试文件或目录的路径. import java.nio.file.Path; import java.nio.file.Paths; import java.nio.file.FileSy ...

  10. leetcode 116- Populating Next Right Pointers in Each Node

    题目: Given a binary tree struct TreeLinkNode { TreeLinkNode *left; TreeLinkNode *right; TreeLinkNode ...