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. Android如何使用so文件和Android studio中导入so

    Android中使用so文件: 做一个PDF阅读的功能,找到一个开源的库,mupdf.下载的是网上编译好的so库,导入到自己项目中的时候一直报错Java.lang.UnsatisfiedLinkErr ...

  2. androidSDK配置环境变量

    android的开发人员来说,首先要做的就是环境变量的配置.java是需要配置环境变量的.当然,安卓的环境变量需要我们配置adb的使用,将开发平台的两个工具包配置到环境变量里. 工具/原料   and ...

  3. Java多线程实现

    1.继承Thread类,由于Java单继承特性,此方法并不推荐. 2.实现Runnable接口,代码如下 class MyThread implements Runnable { private St ...

  4. 使用RMAN对控制文件进行restore

    控制文件的默认备份格式是: c-IIIIIIIIII-YYYYMMDD-QQ 其中: c:表示控制文件 IIIIIIIIII:表示DBID YYYYMMDD:备份的时间戳 QQ:16进制的序列号,从0 ...

  5. 布置theano（Ubuntu14.04 LTS）

    引言 由于研究生阶段将会从事自然语言处理方向的研究,目前要用到机器学习和深度学习相关的框架,那应老师的要求,将要使用theano,由于theano官方文档中关于ubuntu下配置的问题并没有给出很好的 ...

  6. [翻译] java NIO 教程－－－介绍

    原文地址:http://tutorials.jenkov.com/java-nio/index.html Java NIO(new IO)是从java1.4之后的对IO API的另一种选择,即对标准j ...

  7. 《数据结构与算法分析:C语言描述_原书第二版》CH2算法分析_课后习题_部分解答

    对于一个初学者来说,作者的Solutions Manual把太多的细节留给了读者,这里尽自己的努力给出部分习题的详解: 不当之处,欢迎指正. 1.  按增长率排列下列函数:N,√2,N1.5,N2,N ...

  8. nyist 673 悟空的难题

    http://acm.nyist.net/JudgeOnline/problem.php?pid=673 悟空的难题 时间限制:1000 ms  |  内存限制:65535 KB 难度:2   描述 ...

  9. [转]Java中的多线程你只要看这一篇就够了

    如果对什么是线程.什么是进程仍存有疑惑,请先Google之,因为这两个概念不在本文的范围之内. 用多线程只有一个目的,那就是更好的利用cpu的资源,因为所有的多线程代码都可以用单线程来实现.说这个话其 ...

  10. [原创]java WEB学习笔记48：其他的Servlet 监听器：域对象中属性的变更的事件监听器 （3 个），感知 Session 绑定的事件监听器（2个）

    本博客为原创:综合 尚硅谷(http://www.atguigu.com)的系统教程(深表感谢)和 网络上的现有资源(博客,文档,图书等),资源的出处我会标明 本博客的目的:①总结自己的学习过程,相当 ...