JavaScript代码在IE和Firefox间的区别

1. HTML 对象的 id 作为对象名的问题

  IE:HTML 对象的 ID 可以作为 document 的下属对象变量名直接使用

  FF:不支持

  解决方法:使用document.getElementById替代document.all

  2. 如果控件只有name,没有id, 用getElementById时:

  IE:可以找到对象

  FF:返回NULL

  解决方法:所有控件必须设置ID属性

  3. Evel:

  IE:支持,利用 eval(idName) 可以取得 id 为 idName 的 HTML 对象

  FF:不支持。

  解决方法:统一使用getElementById(idName) 代替 eval(idName)。

  4. Event:

  IE:用全局对象window.event

  FF:event只能在事件发生的现场使用,在调用函数时传入event对象

  解决方法:使用之前做一下浏览器类型判断,各用各的。

  5. 对象名称中美元符号‘$’改为使用下划线‘_’

  6. 集合类对象问题

  IE:可以使用()或[]获取集合类对象

  FF:只能使用[]获取集合类对象

  现有代码中存在许多,不能在 FF 下运行

  解决方法:统一使用[]获取集合类对象。document.form.item(“itemName”) 这样的语句改为document.form.elements[“elementName”]

  7. 变量名与某 HTML 对象 id 相同的问题

  IE:不能使用与 HTML 对象 id 相同的变量名

  FF:可以使用

  解决方法:在声明变量时,一律加上 var ,以避免歧义,这样在 IE 中亦可正常运行。

  此外,最好不要取与 HTML 对象 id 相同的变量名,以减少错误。

  8. Event定位问题

  IE:支持event.x 和event.y

  FF:支持event.pageX和event.pageY

  解决方法,统一使用event.clientX和event.clientY,但是在FF中event.clientX 与 event.pageX 有微妙的差别(当整个页面有滚动条的时候),不过大多数时候是等效的。如果要完全一样,可以判断浏览器类型后对应使用。

  9. 父结点的问题

  IE:parentElement parentElement.children

  FF:parentNode parentNode.childNodes

  childNodes的下标的含义在IE和FF中不同,FF使用DOM规范,childNodes中会插入空白文本节点。一般可以通过node.getElementsByTagName()来回避这个问题。

  当html中节点缺失时,IE和FF对parentNode的解释不同,例如

 


 <form> 
<table
  <input/> 
</table> 
</form>

 

  IE:input.parentNode的值为空节点

  FF:input.parentNode的值为form

  FF中节点没有removeNode方法,必须使用如下方法 node.parentNode.removeChild(node)

  10. const 问题

  现有问题:

  IE:不支持 const 关键字。如 const constVar = 32; 在IE中这是语法错误。

  FF:支持

  解决方法:不使用 const ,以 var 代替。

  11. body 对象

  IE:在body标签完全被读入之后才存在

  FF:在body标签没有被浏览器完全读入之前就存在

  12. 自定义属性问题

  IE:可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性

  FF:只能使用getAttribute()获取自定义属性.

  解决方法:统一通过getAttribute()获取自定义属性

  13. event.srcElement问题

  IE:even.srcElement

  FF:even.target

  解决方法:使用时判断浏览器类型,各用各的。

  14. 模态和非模态窗口

  IE:支持模态和非模态窗口

  FF:不支持

  解决方法:直接使用window.open(pageURL,name,parameters)方式打开新窗口。如果需要将子窗口中的参数传递回父窗口,可以在子窗口中使用window.opener来访问父窗口。

  15. innerText

  IE:innerText

  FF:textContent

  16. 类似 obj.style.height = imgObj.height 的语句

  IE:有效

  FF:无效

  解决方法:统一使用obj.style.height = imgObj.height + ‘px’;

 

SomearrangementonDOM

I have seen a good introducing article about Dom(Document Object Model):

The purpose of this assignment was to learn how to use
JavaScript with the DOM(Document Object Model),
and about some of the properties
available through the DOM’s window object.

The description and my solution of the
DOM Properties-assignment can be viewed
at the bottom of this page.

What is DOM

The DOM is an API for HTML and XML documents.

It defines the structure of documents and the way to access that structure in favor for manipulating how the document will be presented, what the document’s content will be and how the document will be structured.

With this model programmers can create documents, navigate the document, add, change or delete elements and content.

A very common script language using DOM as a model is JavaScript. However, the model itself has noting to do with JavaScript, it is simply a model that can be used by any programming language or scripting language.

Care must be taken when using the DOM since many browsing software offer extensions not following the W3C standard.

What is the DOM Window Object 

The window object represents the window itself. It is created automatically with every instance of a <body> or <frameset> tag. The window object contains the document as a child and provides – among others objects – access to the useful window.navigator and window.screen objects. These two objects are often used for manipulating the browsing environment itself, and provides many special properties for accessing objects futher down the tree structure.

Assignment Description

Create a Web page with functionality for displaying the different properties of the window, window.screen, window.navigator window.location, window.history and window.document objects.

Original Address: http://www.webpelican.com/internet-programming-3/dom-properties/

dom Structure see: http://www.howtocreate.co.uk/tutorials/javascript/domstructure

Basic object model for all modern browsers:

window

|

————————————————————————–

| | | | |

navigator screen document history location

About typeof:

typeof
returns one of the following strings
:

  • number
  • string
  • boolean
  • object
  • function
  • undefined (= null )
typeof(typeof(x))
is always string
, no matter what x actually is.
IE seems to think that some functions are objects rather than functions: typeof(document.getElementById)
returns object.
I have done a testing code about all the objects in DOM, it concerns all the properties of all the objects.
Here is the code:

JavaScript中<table>中<tbody>

浏览器总是在table和tr之间创建tbody标签。因此

<table>
    <tr>
        <td></td>
    </tr>
</table>

 

<table>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

 
在浏览器中够造的DOM树完全相同。

以上两个代码片段分别用IE DOM Inspector和firebug查看结果如下:

没有<tbody>时

     

                         IE DOM Inspecto                                                            firebug

 

增加<tbody>标签时,节点仍然没有变化

   
                          IE DOM Inspecto                                                            firebug

 

 
 

 
  

  • 大小: 21.9 KB
  • 大小: 16.5 KB
  • 大小: 19.4 KB
  • 大小: 16.3 KB

如何在window.unload中延时或是等待一个操作结束后关闭。

有一个oa系统,在网页上通过dsoframer打开了一个word文档。

需要在用户关闭ie时,自动保存一次word。

但是shi-t的是word的save方法没有返回值,貌似直接返回了,与ie窗口的关闭是异步的。

ie窗口关闭时,注销所有内部资源,word也被关掉了,保存不上。

由于这个原因,这里写settimeout之类的也是白搭。

一个解决方法是调用save后提示下用户(confirm或alert),这里能够起一个延时的作用,word可以保存,但是客户觉得多余,最好能去掉。

也试过beforeunload和return false(会提示一个离开页面的dialog,更糟糕)。

不知道有没有什么方式可以延时下。让可怜的save方法有足够的0.1s时候来保存完毕。

网页技巧总结:快捷键提交表单方法

 

 经常看到许多网站论坛上面快捷键提交表单的方法,比较好奇,经研究写出来了方法

JS CTRL+ENTER 提交

<script language=javascript>
ie = (document.all)  true:false
if (ie){
function ctlent(eventobject){if(event.ctrlKey && window.event.keyCode==13){this.document.form1.submit();}}
}
</script>

<form action="http://www.webjx.com/index.html" method=POST name=form1>
<textarea cols=95 name=Content rows=12 wrap=virtual onkeydown=ctlent()>
Ctrl+Enter提交内容信息
</textarea>
<input type=Submit value="Submit" name=Submit>
</form>


 accesskey 提交

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>

<body>
<form action="http://www.webjx.com/index.html" method=POST name=form1>
<textarea ></textarea>
<br><input type=submit accessKey="S" value=提交(Alt+s)>
</form> 

 
对于快捷键的使用IE:ALT+快捷键

javascript关闭窗口(兼容firefox,IE)

javascript关闭窗口,可以用下面简单的代码:

<a href="javascript:self.close()">关闭窗口</a>  

我在IE7下测试通过,但是firefox3.0却不行。

难道firefox不支持在href中直接写JavaScript?于是改成下面的样子:

<a href="javascript:alert('Hello World')">弹出窗口</a>  

这次IE7和firefox下测试都通过。那就不是href中直接写JavaScript的原因了。

继续测试firefox怎么关闭自身窗口

改成了如下代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<script type="text/javascript">  
<!--   
function windowClose(){   
//self.close();   
window.close();   
}   
//-->  
</script>  
<title>js测试</title>  
</head>  
<a href="javascript:self.close()">关闭窗口</a><br />  
<a href="javascript:alert('Hello World')">弹出窗口</a><br />    
<a href="#" onclick="windowClose()">js函数关闭窗口</a>  
<body>  
</body>  
</html>  

还是不能关闭窗口。难道firefox不支持window的close属性?

那window对象的close方法能不能关闭open方法打开的窗口呢?

写下面两个html文件放在同一个文件夹下

<script type="text/javascript">   
<!--   
function openWindow(){   
window.open("new.html","newWindow","width=200,height=100,toolbar=no");   
}   
//-->   
</script>   
<a href="#" onclick="openWindow()">open函数打开新窗口</a><br />   
<a href="new.html" target="_blank">超级链接在新窗口中打开新页面</a><br />   
<a href="new.html" target="_parent">超级链接在父窗口中打开新页面</a>  
<a href="javascript:window.close()">关闭窗口</a>   
<a href="javascript:self.close()">关闭窗口</a> 

用open方法和在”_blank”打开的可以在新窗口中关闭,而在”_parent”中打开的在firefox中还是关闭不

因此在firefox里用window的close方法时要注意他和IE不同的地方:在父窗口打开的页面是不能用close

方法关闭的。

然后去google搜了一下:之所以window.close在firefox不能使用,是因为firefox默认不能关闭用户打

开的网页,我们可以这样设置firefox:

打开firefox,在地址栏输入about:config

找到dom.allow_scripts_to_close_windows这项并改为true。

现在知道为什么了吧。那篇文章还有一段不错的内容,摘录如下:

众所周知,在javascript中window.close()是用来关闭窗口的,而且ie和firefox都是支持的。为了实现

用户对浏览器的绝对控制,ie中用close关闭非open打开的窗口时会弹出一个对话框询问用户。有时候我

们不希望再这样哆嗦,但是怎么去掉这个框呢,用下面的代码就可以了

<script language="javascript" type="text/javascript">    
  
function closeWindow() {    
  
window.open('','_parent','');    
  
window.close();    
  
}    
  
</script>    
<a href="javascript:closeWindow();">Close Window</a>  

Javascript实现web编辑器-兼容FF和IE


背景: CREAT需要进行文本分析,主要的任务就是从一大段原始需求文本中,通过人工或者自动的手段,识别出有用的元素,并打上标记。 由于自然文本的任意性,用自动的方法无法完全精确地得出文本的处理结果,即使是人工处理,也往往需要进行几轮迭代式的分析处理。 Web编辑器即使设计来支持人工处理的这一过程的。 

实现说明: 

IFrame作为编辑器主体。 

设置一下iframe的属性,iframe即可作为编辑器了。

<iframe frameborder=”0″ id=”WebEditor” style=”border: 1px dashed black;
height: 320px; width: 760px”
></iframe>
<script language=”javascript”>
Editor 
= document.getElementById(WebEditor).contentWindow;
Editor.document.designMode 
= on;//使document处于可编辑状态
Editor.document.open();
//For FF, 打开新的document以便编辑新内容
//Editor.document.write(“”);//可以设置header信息等, Iframe可以看成一个独立的html页面
Editor.document.close();//关闭document,强制发送数据显示
</script>

 

Javascript处理文本格式 

调用execCommand函数处理文本,可以实现粗斜下划、对齐方式、超链接、字体(大小、颜色等功能) execCommand函数的语法:

bSuccess = object . execCommand ( sCommand ,bUserInterface , vValue )

    document.execCommand() 解析

function format(what, opt)
{
    Editor.focus();
    Editor.document.execCommand(what, 
false, opt);
}

 

识别选择的文本,操纵DOM 

这里有几个FF和IE不同的地方,一个是回车,IE下是<p>,比FF的<br/>空了很多,解决方法是重载编辑器document的回车事件:

Editor.document.onkeypress = fnKeypress;
function fnKeypress(){
    
if(document.all){
        
var ev = Editor.event;
        
if(ev.keyCode==13 && !ev.shiftKey){//判断回车键
            var s = Editor.document.selection;
            
if (s!=null){
                
var r = s.createRange();
                
if (r!=null{
                    r.pasteHTML(
<BR/>);
                    r.select();
//将光标移动到新行
                }

            }

            
return false;
        }

    }

}

处理选择的文本:

function message()
{
    
if(document.all)//如果是 IE. (虽然,FF也可以用document.all)
    alert(Editor.document.selection.createRange().text);
    
else{
        
//alert(Editor.document.getSelection());
        alert(Editor.getSelection());
        
var selection = Editor.getSelection().getRangeAt(0);
        
var linkElement = Editor.document.createElement(a); //创建一个新的<A>节点
        linkElement.href = http://asers.blog.sohu.com;//设置<A>节点的href属性
        selection.surroundContents(linkElement);//加入超链接
    }

}

 

插入html代码:

 

function insert(html)
{
    
debugger;
    
if(window.event)
    Editor.document.selection.createRange().pasteHTML(html);
    
else
    format(
insertHTML, html);
}

CSS工具列表

用户界面

 

易用性检查

整理和优化

字体

表单

布局

酷站

帮助向导 / Hacks / 学习资源

  • SelectOracle
    Explains the structure of CSS- and HTML-documents. Enter semi-colon separated selectors or just paste in your existing rulesets into the “Direct Input area, or provide the URL of a stylesheet or an HTML document with an embedded stylesheet in the “URL Input area. English, Spanish, German and Bulgarian versions are available.
  • Tom Lee has a tutorial on Max-width in IE Using a CSS Expression. Word of caution: I hear using this method can be rather hairy, in some cases crashing the browser.
  • Future-proof your CSS with Conditional Comments from Bruce Lawson is a great comprehensive collection of CSS’s that, when combined, addresses most of CSS issues with different browsers.
  • IE Word Wrap Doppelganger Bug
    这个站点展示了标题(heading)元素在IE6中换行时会留个小尾巴的bug。
  • Images, Tables, and Mysterious Gaps seems like something I should’ve known already about the behavior of inline elements in strict mode. But of course it took me an hour of agony before finally realizing the ultimate truth: I’m not that smart.
  • Easy CSS hacks for IE7IE7下可以用的CSS Hacks。
  • 针对IE7, Firefox 1.5和Opera 8.5的Web浏览器CSS支持 一览表。
  • snook.ca on the “+ CSS hack which you can use to target IE6 and IE7 only.
  • On having layout
    提供了很多信息围绕IE其特有的“渲染概念:hasLayout — one of the major causes for headache when it comes to how IE decides to pain the boundaries of certain HTML elements: 

     

    • “Internet Explorer 中有很多奇怪的渲染问题可以通过赋予其“layout得到解决。John Gallant 和 Holly Bergevin 把这些问题归类为“尺寸bug(dimensional bugs),意思是这些 bug 可以通过赋予相应元素某个宽度或高度解决。这便引出关于“layout的一个问题:为什么它会改变元素的渲染特性,为什么它会影响到元素之间的关系?这个问题问得很好,但却很难回答。在这篇文章中,我们专注于这个复杂问题会有那些方面的表现,某一方面的具体讨论和范例请参考文中给出的相关链接。

    这篇文章的中文翻译参见承志的SharkUI:On having layout

  • Negative text-indent and underline — No matter how far on the left the real text is, the underline will be stretched all the way to the right in some PC browsers, namely the Firefox.
  • IE6 Multi Class Bug — Again, something that could’ve brought to my attention last week!

    • …Internet Explorer fails to render backgrounds for elements that have both an ID and a class defined. For instance, #photos.background1 will display the corresponding background in IE6 for Windows, but once that has been defined, #photos.background2, #photos.background3, etc. will not be displayed.
  • Ten more CSS tricks you may not know
    包括少量的IE bug修复手段
  • The “Holly Hack — 著名的taming IE/Win CSS display bug by assigning a dimensional value such as height:1%;
  • CSS tests
    很不错的一系列CSS测试页面
  • max-width in IE
    用IE的expression来模拟max-width
  • http://imfo.ru/csstest/css_hacks/import.php
    用@import来针对不同的浏览器隐藏CSS的一系列方法。
  • Essentials of CSS Hacking For Internet Explorer
    助你对付IE的一系列建议。
  • Web 浏览器标准支持
    用图表来比较IE 6, Firefox 1.0, 和Opera 8.
  • The perils of using XHTML properly
    正确使用XML申明和MIME类型。
  • IE Double Float Margin Bug.

小贴士

JS打印和报表输出

JS打印和报表输出2008-07-15 22:16一打印:

转自:http://hi.baidu.com/afei0211/blog/item/20523955ca8bebc2b745ae98.html

(1) 在实际应用中!特别是一些公司需要报表输出和打印!这个时候我们就会用到JS的打印和报表输出功能!当然打印很简单就是window.print();你也可以在按钮的onclick事件中写上return print()可以实现打印效果!这个时候打印你会发现打印出来的是整个页面,包裹着网站的logo和一些其他不需要的按钮!这个时候我们可以使用div控制一下。把不需要打印的东西用<div class=”noPrint”>不 打印的内容 </div> 然后

<style type=”text/css” media=”print”>

    .noprint{display:none;}

    </style>

这个时候就可以实现打印时不打印其他信息的效果!

说明:

1.除去页眉页脚:通过浏览器的”页面设置”选项把其中的”页眉”和”页脚”的内容清空即可.

2.打印出背景色:通过浏览器的”工具”-“internet选项”-“高级”-“打印”-“打印背景色和图像”选中即可.

(2) 同时可以使用使用WebBrowser打印.(ie内置组件无需安装,可实现打印预览等功能)

使用方法在页面中放置如下代码:<object id=”WebBrowser” classid=CLSID:8856F961-340A-11D0-A96B-00C04FD705A2 height=”0″ width=”0″>

</object>

在按钮中调用OnClick=”return userPrint()”

function userPrint()

{

    document.WebBrowser.Execwb(7,1);//打印预览

    return false;

}

调用WebBrowser进行打印等操作(参数列表)

WebBrowser.ExecWB(1,1) 打开

WebBrowser.ExecWB(2,1) 关闭现在所有的IE窗口,并打开一个新窗口

WebBrowser.ExecWB(4,1) 保存网页

WebBrowser.ExecWB(6,1) 打印

WebBrowser.ExecWB(7,1) 打印预览

WebBrowser.ExecWB(8,1) 打印页面设置

WebBrowser.ExecWB(10,1) 查看页面属性

WebBrowser.ExecWB(15,1) 好像是撤销,有待确认

WebBrowser.ExecWB(17,1) 全选

WebBrowser.ExecWB(22,1) 刷新

WebBrowser.ExecWB(45,1) 关闭窗体无提示

效果图:

如果要一个页面显示2个表格,打印时让2个分页的话可以使用div隔开2个表格在他们中间加:<div class=”PageNext”></div> 样式:<style media=”print” type=”text/css”>

.PageNext{page-break-after: always;}

</style>

二:输出到Word或Excel中(转自《灰灰虫的家》)

实现思路,用JavaScript创建word或Excel对象,然后复制页面中需要输出的内容,粘贴在Word或Excel对象的文档中去.

//输出到Word中

function Button2_onclick() {

//创建Word应用程序对象

var oWD = new ActiveXObject(“Word.Application”);

//向Word应用程序对象中添加一个文档对象,并取出其中的Range(0)

var oRange =oWD.documents.add().Range(0,0);

//根据HTML页面创建TextRange对象,以便定位到要打印的元素中

var sel = document.body.createTextRange();

//定位到TextRage对象中要打印的元素上,GridView1是要打印的元素的ID

sel.moveToElementText(GridView1);

//选中GridView1元素的所有HTML内容

sel.select();

//将选中的内容复制到剪切板上

sel.execCommand(“Copy”);

//粘贴到Word文档对象中去

oRange.Paste();

//显示Word程序和文档内容

oWD.Application.Visible = true;

//调用Word的打印程序

//oWD.application.printout();

//关闭word文档对象,参数0代表不保存文档

//oWD.application.activedocument.close(0);

//退出word程序

//oWD.application.quit();

}

//输出到Excel中

function Button3_onclick() {

var oXL = new ActiveXObject(“Excel.Application”);

var oWB = oXL.Workbooks.Add();

var oSheet = oWB.ActiveSheet;

var sel=document.body.createTextRange();

sel.moveToElementText(GridView1);

sel.select();

sel.execCommand(“Copy”);

oSheet.Paste();

oXL.Visible = true;

}

总结:这种方式可以快速地将页面的内容转换到Word或Excel中,其功能是在客户端实现,减轻了服务器的压力.

这里在使用的时候浏览器会提示”是否允许对剪切板的访问”,可以在IE的Internet选项中的”安全”中进行设置.

这种方式只适合在Windows平台上的转换.

三.根据己有的word或excel文件样式输出报表(转自《灰灰虫的家》)

实现思路:在服务器端建立一个Word或Excel文档,文档中加入书签,然后把要添写的内容写入标签中.

(1)创建一个Word文档,在该文档中设计好要打印的会议记录的格式,并将其保存到实例根目录下,名称为student.doc。

(2)在创建好的Word文档中的指定位置插入书签。插入书签首先选中需要替换的文本,然后选择“插入”→“书签”选项,在打开的对话框中输入书签名,并单击“添加”按钮即可。

(3)编写自定义JavaScript函数,用于将表单收集的数据导出到Word中,并进行自动打印,代码如下:

服务器端

   protected void Page_Load(object sender, EventArgs e)

    {

        string str = Request.Url.ToString();

        string s = str.Substring(0, str.LastIndexOf(“/”));

        //将当前页面的父路径存入Hidden中

        this.Hidden1.Value = s + “/”;

    }

客户端

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

<head runat=”server”>

     <title>无标题页</title>

<script language=”javascript” type=”text/javascript”>

function Button1_onclick() {

//取出Hidden中的内容

var ss = document.form1.Hidden1.value;

//创建word应用程序对象

var wordapp = new ActiveXObject(“word.application”);

//显示word应用程序窗口

wordapp.visible=true;

//设置word文件模板的路径

var s = ss+”student.doc”;

//打开要填写的模板

var worddoc = wordapp.application.documents.open(s);

var range;

//取出word中相应的书签,并把页面文本框中的内容替换进去

range = wordapp.activedocument.Bookmarks(“sname”).Range;

range.text = document.form1.txtName.value;

range = wordapp.activedocument.bookmarks(“sage”).range;

range.text = document.form1.txtAge.value;

range = wordapp.activedocument.bookmarks(“sschool”).range;

range.text = document.form1.txtSchool.value;

//wordapp.activedocument.printout();

//关闭word文档

wordapp.activedocument.close(0);

//关闭word应用程序

wordapp.quit();

}

</script>

</head>

<body>

     <form id=”form1″ runat=”server”>

     <div>

    

         姓名:<asp:TextBox ID=”txtName” runat=”server”></asp:TextBox>

         <br />

         年龄:<asp:TextBox ID=”txtAge” runat=”server”></asp:TextBox>

         <br />

         学校:<asp:TextBox ID=”txtSchool” runat=”server”></asp:TextBox>

         <br />

         <input id=”Button1″ type=”button” value=”ToBookMark” onclick=”return Button1_onclick()” /><input runat=server id=”Hidden1″ name=”Hidden1″ type=”hidden” /></div>

     </form>

</body>

</html>