写能运行在IE和Firefox上的脚本

最新推荐文章于 2021-02-25 06:07:05 发布
最新推荐文章于 2021-02-25 06:07:05 发布
阅读量742 收藏
点赞数
分类专栏： web2 文章标签： firefox ie xmlhttprequest object div function
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/metas_wzh/article/details/3033053
版权

  1.1.       HTML

1.1.1.          DOM structure

body

description

In IE, body object does exist after the body tag is parsed.

And In Firefox, the body object already exists before parsed.

IE example

<body>

</body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

Firefox example

<body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

</body>

 

Should-be

<body>

</body>

<script type="text/javascript">

document.body.onclick = function(evt){

 //todo

}

 

outerHTML

description

Sets or retrieves the object and its content in HTML.

In Firefox HTML element has no this property.

IE example

var htmlStr = obj.outerHTML;

Firefox example

 

Should-be

We should not use outerHTML.

 

 

document.formName.elements[]

description

Get an element from form object.

But “document.formName.item“ cannot work in Firefox.

IE example

1,document.formName.item("itemName")

2, document.formName.elements["elementName"];

Firefox example

document.formName.elements["elementName"];

Should-be

document.formName.elements["elementName"];

 

node.parentElement

description

Get the parent element of “node”

IE example

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentElement;

var pe2 = inp1.parentNode;

Firefox example

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentNode;

Should-be

<div id=’node’><input type=’text’ id=’inp1’></div>

var pe = inp1.parentNode;

 

node.children[]

description

Get one child of the parent element named of “node”

IE example

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch = node.children(0);

var ch2 = node.children[0];

var ch3 = node.childNodes[0];

Firefox example

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch3 = node.childNodes[0];

Should-be

<div id=’node’><input type=’text’ id=’inp1’></div>

var ch3 = node.childNodes[0];

 

window.location.href

description

Sets or retrieves the location of the window.

IE example

<iframe name=’frm1’ src=’http://www.skcc.com’/>

1,window.frm1.location.href=’http://www.sktelecom.com’;

2, window.frm1.location=’http://www.sktelecom.com’;

Firefox example

<iframe name=’frm1’ src=’http://www.skcc.com’/>

window.frm1.location =’http://www.sktelecom.com’;

Should-be

<iframe name=’frm1’ src=’http://www.skcc.com’/>

window.frm1.location =’http://www.sktelecom.com’;

 

element.innerText

description

Sets or retrieves the text between the start and end tags of the object.

It does not work in Firefox.

IE example

<div id=’div1’>abc</div>

var tx = div1.innerText;

Firefox example

<div id=’div1’>abc</div>

var tx = div1. textContent;

Should-be

<div id=’div1’>abc</div>

var tx = div1.innerText || div1. textContent;

 

 

 

inputObj.type

description

Retrieves the type of an input object.

In Firefox, it is a writable property.

IE example

<body>

<form name='form1'>

 <input name='in1' type='text' value='111'>

</form>

</body>

alert(form1.in1.type);

Firefox example

<body>

<form name='form1'>

 <input name='in1' type='text' value='111'>

</form>

</body>

form1.in1.type=’hidden’;

alert(form1.in1.type);

Should-be

We could use it readonly.

 

 

1.1.2.          Event

 

window.event

description

“window.event” can only work in IE but not Firefox, because  the event in Firefox can only work when the event occurs.

IE example

<input type=’button’ onclick = ‘doClick()’>

function doClick(){

  var obj =  window.event.srcElement;

var code = window.event.keyCode;

var pX = event.x;

var pY = event.y;

}

Firefox example

<input type=’button’ onclick = ‘doClick(event)’>

function doClick(event){

var obj =  event.target;

var code = event.which;

var pX = event.pageX;

var pY = event.pageY;

}

Should-be

<input type=’button’ onclick = ‘doClick(event)’>

function doClick(event){

  var obj =  event.srcElement? event.srcElement : event.target;

var code = event.keyCode? event.keyCode : event.which;

var pX = event.x?event.x : event.pageX;

var pY = event.y?event.y : event.pageY;

}

 

 

window.showModalDialog

&

window. showModelessDialog

description

showModalDialog : Creates a modal dialog box that displays the specified HTML document.

showModelessDialog : Creates a modeless dialog box that displays the specified HTML document.

They do not work in Firefox.

You should use open method to replace them.

IE example

function fnOpenModal(){

   var sFeatures=’dialogHeight:400px;dialogWidth:300px;’;

   window.showModalDialog("showModalDialog_target.htm", "",

      sFeatures)

}

function fnOpenModeless(){

   var sFeatures=’dialogHeight:400px;dialogWidth:300px;’;

   window.showModelessDialog("showModalDialog_target.htm", "",

      sFeatures)

}

 

In dialog window:
function doSubmit(){

window.returnValue=[];

window.returnValue[0] = value;

window.returnValue[1] = title;

window.top.close();

}

Firefox example

window.open("Sample.htm",null,    "height=200,width=400,status=yes,toolbar=no,menubar=no,location=no");

 

in opened window:

function doSubmit(){

var pWin = window.opener;

pWin.form1.title.value = ’title’;

pWin.form1.val.value = ’value’;

pWin.top.close();

}

Should-be

You should use open instead of showModalDialog method.

 

1.1.3.          CSS

!important

description

In Firefox, it considers it a higher priority CSS constrain while there are some other some definitions.

IE will ignore the CSS syntax while Firefox not.

IE example

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

The real width will be 120px because “!important” does not work.

Firefox example

<style>

.myWidth{

/*width:115px !important;*/

width:120px;padding:5px;

}

</style>

The real width will be 125px.

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

The real width will be 120px.

“!important” does work.

Should-be

Notice: The definition with “!important” must be placed before others.

<style>

.myWidth{

width:115px !important;

width:120px;padding:5px;

}

</style>

 

 

ul

description

“padding” ‘s default value is different in ul.

IE example

“padding-left” ‘s value is 0px.

Firefox example

“padding-left” ‘s value is 40px.

Should-be

Set “ul” to “ul{margin:0;padding:0;}” ;

 

ol

description

“padding” ‘s default value is different in ul.

IE example

“padding-left” ‘s value is 0px.

Firefox example

“padding-left” ‘s value is 40px.

Should-be

Set “ol” to “ol{margin:0;padding:0;}” ;

 

 

 

blank

description

Blank ‘s site is different .

IE example

Blank ‘s site is 8px.

Firefox example

Blank ‘s site is 4px.

Should-be

Use other format tag instead of blank.

 

 

margin

description

“margin” ‘s value is different  when “div ” is set “float”.

IE example

“margin” ‘s value is setting value ‘s 2 times .This is a bug.

Firefox example

“margin” ‘s value is right.

Should-be

Add “display:inline;” to div.

 

Div ‘s format

description

Div ‘s format is different .

IE example

It is center format when set “margin-left, margin-right” to “auto”.

Firefox example

It is center format when set “text-align:center”.

Should-be

set “margin-left, margin-right” to “auto” and set “text-align:center”.

 

 

 

 

Link’s back color

description

Setting link’s back color is different .

IE example

Set link’s back color directly.

Firefox example

Set link’s back color and modify other attribute.

Should-be

It must add “display: block”.

 

Link’s border

description

Setting link’s border is different .

IE example

Set link’s border directly.

Firefox example

Set link’s border and modify other attribute.

Should-be

It must add “display: block”.

 

Link’s format

description

Link’s format is different .

IE example

Link’s format doesn’t change line.

Firefox example

Link’s format may change line.

Should-be

It must add “float: left”.

 

 

 

BOX model

description

BOX Model ‘s site is different.

IE example

BOX Model ‘s site is 30px.

Firefox example

BOX Model ‘s site is 28px.

Should-be

Add “div{margin:30px!important;margin:28px;}”  to div

 

 

opacity

description

Set opacity for element.

IE example

filter:alpha(opacity=10); /* IE */

Firefox example

-moz-opacity:0.5;  /*Moz + FF */

Should-be

<style>

.trans{

filter:alpha(opacity=10); /* IE */

-moz-opacity:0.5;  /*Moz + FF */

opacity: 0.5;  /* CSS3 browser（FF 1.5 and above）*/  

}

</style>

 

 

radius

description

radius is different.

IE example

It can’t support radius.

Firefox example

It can support radius.

Should-be

Don’t use radius in css.

 

 

 

Line ‘s border

description

Line’s border is different when this line is double.

IE example

Its setting is “border:2px outset;”.

Firefox example

Its setting is “-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040 #808080;-”.

Should-be

Add “border:2px outset;” and “-moz-border-top-colors: #d4d0c8 white;-moz-border-left-colors:#d4d0c8white;-moz-border-right-colors:#404040 #808080;-”  to css.

 

 

cursor:hand

description

cursor:hande does not work in Firefox.

IE example

It can support hand .

Firefox example

It can’t support hand.

Should-be

Use pointer instead of hand.

 

CSS expression

description

IE will parse the expression written in CSS.

IE example

background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

Display different background color very hour.

Firefox example

It does not work.

Should-be

We should not use CSS expression.

 

1.2.       JS compatibility

colletction class object

description

At IE, can get collection class object by using “()” or “[]”. While at firefox, only “[]” works

IE example

document.forms("formName") or document.forms["formName"]

Firefox example

document.forms["formName"]

Should-be

document.forms["formName"]

 

Self-defined Attribute

description

At IE, can get self-defined attribute by using “.attributeName” or “getAttribute()”  method. While at firefox, only “getAttribute()” method works

IE example

formName.attributeName or formName.getAttribute()

Firefox example

 formName.getAttribute()

Should-be

 formName.getAtrribute()

 

eval(“idName”)

description

At IE, can get html object by using “eval(“idName”)” or “getElementById(“idName”)”, while at firefox, only “getElementById(“idName”)” works

IE example

eval(“idName”) or getElementById(“idName”)

Firefox example

 getElementById(“idName”)

Should-be

 getElementById(“idName”)

 

Variable name is identical to html object name

description

At IE, html object’s id can be used directly as variable name of document’s object, while firefox doesn’t support this.

At firefox, variable name can be identical to html object’s id, while at IE, it’s forbidden.

IE example

document.idName or document.getElementById("idName")

Firefox example

document.getElementById("idName")

Should-be

1)    Replace document.idName with document.getElementById("idName"),

2)    Do not use the same variable name as html object id

3)    When declare variable, add “var” before variable name.

 

 

 const

description

At firefox, can define constant with “const” or “var” keyword, while at IE, only “var” works

IE example

var constName

Firefox example

var constName or const constName

Should-be

 Var constName

 

Access frame object

description

At IE, can use both “window.frameId” and “window.frameName” to access frame object, while at firefox, only “window.frameName” works

IE example

 window.frameId, window.frameName

Firefox example

 window.frameName

Should-be

window.frameName

 

 

1.3.       Compatibility of ActiveX and etc

ActiveX Object

description

Browse Object  is  different  when  create  it.

IE example

Msxml2.XMLHTTP object:
var objRequest=new ActiveXObject("Msxml2.XMLHTTP");}

Firefox example

XMLHttpRequest:

var objRequest=new XMLHttpRequest();

Should-be

try
{//MS IE
objRequest=new ActiveXObject("Msxml2.XMLHTTP");}
catch(e)
{
  try
  {
    objRequest=new ActiveXObject("Microsoft.XMLHTTP");

} catch(oc){

objRequest=null;

}

}//other browsers
if(!objRequest&&typeof XMLHttpRequest!="undefined")
{

objRequest=new XMLHttpRequest();

}

 

 

 

metas_wzh
关注
专栏目录
Selenium常见报错信息
sunnygao的博客
03-09 2396
自动化测试 以分层模型开展 驱动进行 浏览器执行 驱动各大浏览器厂商开发 json wire protocol协议驱动 预备知识和技能 软件测试理论 HTML CSS Xpath JavaIO\Apache poi \ JDBC 和硬件结合的就不大适合UI设置 UI测试基于图形、基于（HTML）DOM Selenium环境搭建 可以打开百度了那搜索知乎呢？ ####2.2前端工具介绍 2.3环境搭建 版本号，版本错了 geckodriver、要选择ff相对应的版本，看release 注意 浏
javascript firefox兼容ie的dom方法脚本
10-30
这些兼容性代码的使用，可以确保同一套JavaScript代码能够在IE和Firefox浏览器上正常运行，极大地方便了前端开发人员的工作。 需要注意的是，尽管这些兼容性代码可以解决许多常见的浏览器差异问题，但仍有一些特定...
Android开发——打包apk遇到The destination folder does not exist or is not writeable
裕博的博客
12-29 2万+
前言 在日常的Android开发当中，我们肯定要打包apk。但是今天我打包的时候遇到一个很奇怪的问题Android The destination folder does not exist or is not writeable，大意是目标文件夹不存在或不可写。 出现问题的原因以及解决办法 上面有说报错的中文大意是：目标文件夹不存在或不可写。其实问题就在我们的打包界面当中 图中标红的Desti...
webdriver java a标签_java-使用Selenium WebDriver运行TOR浏览器
weixin_31293841的博客
02-25 168
我目前正在尝试使用Selenium WebDriver(JAVA)2.53和Firefox 43.0执行TOR 6.0.4.我已经按照这篇文章Using Selenium WebDriver with Tor的说明进行操作,但是将TOR的profilePath加载到Firefox Binary时出现错误.我已经看到可以通过将TOR profile.default存档加载到firefox binat...
tomcat6\webapps\manager does not exist or is not a readable directory
debushiwo的专栏
11-04 1162
重: Error in resourceStart() 2011-9-19 11:36:28 org.apache.catalina.core.StandardContext start 严重: Error getConfigured 2011-9-19 11:36:28 org.apache.catalina.core.StandardContext start 严重: Context
添加到收藏夹的Javascript脚本 for ie,firefox
12-11
1. 浏览器兼容性问题：文件中提到的脚本在IE（Internet Explorer）和FF（Mozilla Firefox）下测试通过，但在TE（可能指的是Opera浏览器，因为 Opera 的代号为 "Carakan"，有时候人们会用缩写字母TE）无效。...
IE浏览器兼容Firefox的JS脚本的代码
10-30
了解并掌握这些兼容性技巧，可以帮助开发者编写出能够在IE和Firefox上运行一致的JavaScript代码，从而提升用户体验。在实际项目中，还可以考虑使用库或框架，如jQuery，它已经处理了许多浏览器兼容性问题，使开发...
Javascript在IE和FireFox中的不同表现简析
10-27
总之，为了确保Javascript代码在IE和Firefox浏览器中能够正常运行，开发者需要对浏览器之间的差异有深入的理解，并采用兼容性更好的编码实践。以上总结的知识点能够帮助开发者在实际工作中更好地解决跨浏览器兼容性...
设置IE和FireFox的主页-僵小鱼.rar_firefox_ie 浏览器_主页
09-23
如果`removejunk.bat`是用于自动修改Firefox主页的脚本，那么运行它可能需要一定的计算机知识，包括理解批处理脚本的工作原理和潜在风险。用户在使用此类工具时应谨慎，确保来源可靠，避免潜在的安全问题。
在Eclipse中运行C++程序出现"Launch failed. Binary not foud"和"Program file not Specified"的问题
reille的笔记
09-01 1万+
在办公室电脑XP下用eclipse建立一个test工程，本想使其可以在XP下的eclipse下运行起来！ 但在装了MinGW后，却不能像家里的eclipse环境一样，可以顺利run起来。 不管怎么设置，要么出现"Launch failed. Binary not foud"问
React Native ios 常见错误和解决方法
chuchur
04-13 8715
常规错误问题 CFBundleIdentifier", Does Not Exist 这个问题不存在的, 说什么包不完整都是扯. 直接在xcode 里面运行调试. 找错误.一步一步解决,其他错误解决了. 这个问题也就不存在了 warning: directory not found for option 目录文件缺失, npm install , pod install , react-nativ...
使用火狐拓展插件以及运行脚本的超详细方法
qq_43766438的博客
01-22 2万+
1.首先我们需要下载火狐浏览器 火狐浏览器官网：火狐浏览器 打开后默认页面： 2.如图所示点击右上角打开菜单，然后点击附加组件： 3.进入该页面后在搜索框输入 ： tampermonkey （油猴插件） 4.接下来安装插件： 选择第一个： 点击添加到Firefox： 弹出跳窗，点击添加： 安装完成后，右上角菜单栏显示已安装插件； 5.插件安装完成，接下来开始安装脚本： 脚本网址：Gr...
selenium使用中遇到的问题
热门推荐
funi16的专栏
06-06 8万+
1、Exception in thread "main" org.openqa.selenium.WebDriverException: Cannot find firefox binary in PATH. Make sure firefox is installed. OS appears to be: XP Build info: version: '2.16.1', revision:
Cannot find firefox binary in PATH. Make sure firefox is installed.
weixin_32418175的博客
09-04 2355
使用selenium报找不到浏览器安装路径错误 解决办法如下： 1.重新安装firefox在默认路径下；  OS Expected Location of Firefox Linux firefox (found using "which") Mac /Applications/Firefox.app/Contents/MacOS/firefox Windows...
The destination folder does not exist or is not writeable
小牧在一直在学习,在前进的道路上大家一起学习，进步。
01-16 2335
  打包发布的时候这样的结果， 解决方法 是自己的路径删除了，没有路径就报错了。重新选择一个路径即可打包。
在firefox浏览器下搭建自动化测试环境出错，WebDriverException:Cannot find firefox binary in PATH
urnothd的学习小记
07-20 468
selenium版本：3.5.3，firefox浏览器版本：61，geckodriver版本：v0.21.0   解决方案：除了加入火狐驱动文件外，还需要配置firefox的路径
解决JavaScript在IE与Firefox浏览器的不兼容问题
"这篇文章主要探讨了JavaScript在Internet Explorer（IE）和Firefox浏览器中存在的一些不兼容问题，并提供了解决这些问题的方法。" JavaScript是一种广泛应用于Web开发的脚本语言，它在不同的浏览器上可能存在不同...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值