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. ionic环境搭建和安装

    1. 安装node环境 nodeJs环境的安装很简单,去官网下载最新版的NodeJs直接安装即可. Node官网: https://nodejs.org/ 安装完成后配置环境变量,计算机->属性 ...

  2. Dive into python 实例学python (2) —— 自省，apihelper

    apihelper.py def info(object, spacing=10, collapse=1): """Print methods and doc strin ...

  3. 源码搭建LNMP

      源码安装LNMP 作者:尹正杰   版权声明:原创作品,谢绝转载!否则将追究法律责任.       欢迎加入:高级运维工程师之路 598432640 前言:非常简单的一个平台LNMP,在生产实际环 ...

  4. table创建固定表头

    布局:两个div,上部内容将表头复制,高度固定,下部div内部将table设置为margin:-**px; 隐藏掉表头,下部div设置overflow,即可. 代码:

  5. hduoj 4706 Children&#39;s Day 2013 ACM/ICPC Asia Regional Online —— Warmup

    http://acm.hdu.edu.cn/showproblem.php?pid=4706 Children's Day Time Limit: 2000/1000 MS (Java/Others) ...

  6. HDU 4834 JZP Set（数论+递推）（2014年百度之星程序设计大赛 - 初赛（第二轮））

    Problem Description 一个{1, ..., n}的子集S被称为JZP集,当且仅当对于任意S中的两个数x,y,若(x+y)/2为整数,那么(x+y)/2也属于S.例如,n=3,S={1 ...

  7. hdu5354 Bipartite Graph

    分治+并查集.假设要求[L,mid]的答案,那么很明显,如果一条边的两个端点都>mid的话或者一个端点>mid一个端点<L,说明询问[L,mid]这个区间中任何一点时候,这一条边都是 ...

  8. Cocos2d-x游戏开发之计时器

    首先写一个计时器的头文件GameTimer.h: #ifndef _GAME_TIMER_H_ #define _GAME_TIMER_H_ #include "cocos2d.h" ...

  9. jni

    http://www.cnblogs.com/likwo/archive/2012/05/21/2512400.html

  10. Linux centOS7 下安装mysql5.7.10

    1:下载二进制安装包 http://cdn.mysql.com//Downloads/MySQL-5.7/mysql-5.7.10-linux-glibc2.5-x86_64.tar.gz 2:解压到 ...