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. 智能硬件+App移动新生态【11.01深圳】

    活动概况 时间:2015年11月01日13:30-16:30 地点:深圳腾讯大厦(南山区科技园科技中一路)2楼多功能厅 主办:APICloud.庆科.信鸽 费用:免费 活动背景 智能电视.智能汽车.智 ...

  2. asp.net 项目在 IE 11 下出现 “__doPostBack”未定义 的解决办法

    最近项目在 IE 11 下<asp:LinkButton> 点击出现 “__doPostBack”未定义”,经过一番google,终于知道了原因:ASP.NET 可能无法辨识出一些浏览器的 ...

  3. 8月17日 Power-BI关于全国房地产开发投资情况分析 QQ群视频交流开课啦

    <ignore_js_op> 数读|中国的经济只剩下房地产了么? 引言: 近日一则标题为“房奴们又立功啦,7月份新增贷款几乎都来自房贷!”的报道吸引了大众的目光.该报道指出在央行8月13日 ...

  4. 【Origin】晨起忆梦

    昨夜有梦又还乡, 忆起少年儿郎样: 田畔有花不忍折, 岁岁年年观花放. -作于二零一五年八月四日

  5. SQL事物

    事务:保障流程的完整执行就像银行取钱,先在你账上扣钱,然后存入别人的账上:但是从你账上扣完钱了,突然网断了,对方没有收到钱,那么此时你的钱也没了,别人的钱也没加上,为了防止此类情况的出现,事务. be ...

  6. POJ 1811 Prime Test（Miller-Rabin & Pollard-rho素数测试）

    Description Given a big integer number, you are required to find out whether it's a prime number. In ...

  7. POJ 3243 Clever Y（离散对数-拓展小步大步算法）

    Description Little Y finds there is a very interesting formula in mathematics: XY mod Z = K Given X, ...

  8. Demo12SimpleAdapter

    /Users/alamps/AndroidStudioProjects/Demo12SimpleAdapter/Demo12SimpleAdapter/src/main/res/layout/data ...

  9. 前端构建工具gulp入门

    本文假设你之前没有用过任何任务脚本(task runner)和命令行工具,一步步教你上手Gulp.不要怕,它其实很简单,我会分为五步向你介绍gulp并帮助你完成一些惊人的事情.那就直接开始吧. 第一步 ...

  10. [Ubuntu] Ubuntu DNS服务器配置

    服务器IP:10.68.19.61 操作系统:Ubuntu 13.04 DNS程序:Bind9 测试域名:mycloud.com 目标IP:10.68.19.134 配置步骤 1.安装BIND9程序包 ...