昨天晚上瞬间写出两个无刷新切页面的小程序,有点小开心。正在兴奋的时候,用Chrom测试页面毛都不显示,立时顿足。
最可恶的是jquery的其他内容正常运行,让我调错都不知道怎么调。
用尽各种方法,搞了2个多小时,终于…
Chrom下使用load()函数读取页面有个先决条件,就是要有个服务器环境,我把页面放在iis下面,就好了~
昨天晚上瞬间写出两个无刷新切页面的小程序,有点小开心。正在兴奋的时候,用Chrom测试页面毛都不显示,立时顿足。
最可恶的是jquery的其他内容正常运行,让我调错都不知道怎么调。
用尽各种方法,搞了2个多小时,终于…
Chrom下使用load()函数读取页面有个先决条件,就是要有个服务器环境,我把页面放在iis下面,就好了~
之前总能碰到一种问题,就是你定义好了一些东西的背景,但在IE6最后显示的时候背景不是你设置的那个,左看右看也发现不了这个离奇的现象,今天我终于找到了问题所在。
.button{style}
.button.active{style}
我们有的时候会定义这样的class来解决
<div class=”button active”></div>
这样的需要。
常用的浏览器都没有什么问题,单单这么写IE6也没事,但是你要这么写了
.button{style}
.input{style}
.button.active{style:background:url[1]}
.input.active{style:background:url[2]}
就来事了,IE6会任性地把.button.active的url[1]替换成url[2]。
然后,我就疯了!
.button{style}
.input{style}
.button .active{style:background:url[1]}
.input .active{style:background:url[2]}
这样的写法是不存在问题的。
.button{style}
.input{style}
.button.active{style:background:url[1]}
.input.activea{style:background:url[2]}
这样的写法也是不存在问题的。
然后,然后~我吃药去
在网站中通常要显示各种尺寸的图片,但图片的尺寸不一定符合显示的要求。如果直接指定img的width和height属性的话图片又很可能会被挤压的变形。下面这个代码可以把图片放进一个imgBox,并根据imgBox的大小来按比例缩放图片以适应他,同时图片会在imgBox中居中显示。来看代码:
首先是HTML:
1<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
2<html xmlns=”http://www.w3.org/1999/xhtml”>
3<head>
4<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
5<title>按比例自动缩放图片</title>
6
7<script type=”text/javascript” src=”js/jquery.js”></script>
8<script type=”text/javascript” src=”js/drawImg”></script>
9</head>
10
11<body>
12<div id=”imgBox” style=”width:500px; height:400px; background:#cccccc; overflow:hidden”>
13 <img id=”img1″ alt=”” src=”images/1.jpg” onload=”DrawImg(500,400);” />
14</div>
15</body>
16</html>
再是JavaScript:
1function DrawImg(boxWidth,boxHeight)
2{
3 var imgWidth=$(“#img1”).width();
4 var imgHeight=$(“#img1”).height();
5 //比较imgBox的长宽比与img的长宽比大小
6 if((boxWidth/boxHeight)>=(imgWidth/imgHeight))
7 {
8 //重新设置img的width和height
9 $(“#img1”).width((boxHeight*imgWidth)/imgHeight);
10 $(“#img1”).height(boxHeight);
11 //让图片居中显示
12 var margin=(boxWidth-$(“#img1”).width())/2;
13 $(“#img1”).css(“margin-left”,margin);
14 }
15 else
16 {
17 //重新设置img的width和height
18 $(“#img1”).width(boxWidth);
19 $(“#img1”).height((boxWidth*imgHeight)/imgWidth);
20 //让图片居中显示
21 var margin=(boxHeight-$(“#img1”).height())/2;
22 $(“#img1”).css(“margin-top”,margin);
23 }
24}
25
代码是转的。
用了之后发现,这个方法在FF下面是好用的,但是在chrome下是没有效果的。
个人经验,主要原因是图片没有加载是获取不到图片的width和height,也就是说chrome下面imgWidth和imgHeight都为0。
那我们可以在前面加上load()函数来解决这个问题。
然后呢…ie又不支持这么用load(),真是不和谐啊,之后就是做兼容了,我们都懂的。
转自:http://blog.csdn.net/aperson111/article/details/4485349
1,ie下面的背景图片滚动问题
假设textarea是200×60,于是我的背景图片就是200×60,但是当textarea的内容比较多,出现滚动条的时候,在ie下面就有了问题,就是下拉后,背景图片是在整个scrollheight的一部分,而不是铺满的,但是别的浏览器不是这样,于是上网搜索,发现有一个滤镜,也没考虑,就用上了:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,
src=myImg.png);
效果不错,反正就ie有问题,所以用了这个滤镜。
2,ie下disable滚动条问题
但是若干天后,因为我的textarea是disable掉,不让写,然后再js里面动态判断是否可以写,使disabled=false这样的,但是在ie下,disable的textarea是不能使用滚动条的,于是很无奈,将disable改为readonly,在js里面也改为:
document.getElementById(‘mytext’).readOnly = false;这样来动态改。
3,ie下用了滤镜滚动条问题
但是上面的解决方法引来下面的问题:就是滤镜导致了在readOnly = true的时候,ie下面的滚动条不能用鼠标点击滚动条,只能用中间的滚动轴,这样的问题就严峻了,因为用户可不管这个,于是继续无奈着
4,上网搜了一堆的资料
说什么的都有,比如100% fixed / background-attachment fixed之类的,效果都不好。因为需要多个浏览器支持
5,最终解决方法
在如此的无奈之下,只能首先放弃滤镜方式。其次,将textarea父节点的div或者td的背景用textarea希望显示的背景,然后textarea里面的属性用:background:transparent;终于可以解决了。
ie独有的hack的方式,让我感到人生都通透了。
ie8的hack方式是后面加数字9,看下面代码。
.hackTest{
color:#000000;
color:#0000FF9; /* 所有IE浏览器(ie6+)支持*/
[color:#000000;color:#00FF00; /* webkit支持 */
*color:#FFFF00; /* IE7支持 */
_color:#FF0000; /* IE6支持 */
}
目前用来清除“闭合(清除)浮动”的方法,主要是一下四种:
1. 额外标签法
这种方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这种方法浏览器兼容性好,没有什么问题,缺点就是需要额外的(而且通常是无语义的)标签。
我个人不喜欢这种方法,但是它确实是W3C推荐的方法
<div style=”clear:both;”></div>
或者使用
<br style=”clear:both;” />
2. 使用after伪类
这种方法就是对父容器使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”,因为它比较小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。
这种方法兼容性一般,但经过各种 hack 也可以应付不同浏览器了,同时又可以保证html 比较干净,所以用得还是比较多的。
以下为引用的内容:
#outer:after{
content:”.”;
height:0;
visibility:hidden;
display:block;
clear:both;
}
3. 设置overflow为hidden或者auto
这种做法就是将父容器的overflow设为hidden或auot就可以在标准兼容浏览器中闭合浮动元素.
不过使用overflow的时候,可能会对页面表现带来影响,而且这种影响是不确定的,你最好是能在多个浏览器上测试你的页面
4. 浮动外部元素,float-in-float
这种做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这种方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也很明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比较特殊的行为,有时布局不允许其浮动也很正常。
有不少人在Windows7下玩暗黑血统很头疼吧,安装了因为DX问题不能玩。DX问题解决了,却黑屏没菜单,没血条。
如何解决~
DX问题:
运行是会显示缺少d3dx9_42.dll xinput1_3.dll
上网搜索这两个DX文件(我在http://www.zhaodll.com下载的),下载后将dll文件放到%system%/system32目录下,
如果你系统在c盘就放到c:/windows/system32目录下,
然后游戏就可以运行了,
(也有可能你抱错的不是这个,但是没关系,照套路搜索就可以)
黑屏无菜单无血条问题:
其实也是DX问题,主要是因为游戏安装到最后的dx更新没有运行成功,或没有更新完,这个问题要连网解决,不联网的方法我还没找到,期待有更好的解决办法。
就是要下载一个dx的web更新器dxwebsetup.exe~
CSDN有下载http://download.csdn.net/source/1997913
其 实网上流行的硬盘版安装的时候会有这个文件,只是安装完成后自动删除了,会批处理或者会点代码的朋友你可以在安装前看一下SETUP.bat这个文件,找 里面的del dxwebsetup.exe 把这一行去掉他就不会删除了,这样你就可以在你网络状态好的时候把DX更新了,该问题就解决了。
前两天无攻略呕血通关
一、Flash 8 支持的HTML标签和用法
(1)Flash 8 支持的HTML标签
1、<a> 超链接标签
属性:
href—— 链接地址
target——目标窗口,可取值为_blank,_parent,_self,_top
例:
my_txt.htmlText=”<a href=http://hi.baidu.com/kmjy/creat/blog/’ target=’_blank’>开明教育</a>”
2、<b> 粗体标签
|例:
my_txt.htmlText=”<b>粗体</b>”
3、<br> 换行标签
例:
my_txt.htmlText=”第一行<br>第二行”
4、<font> 字体标签
属性:
color——字体颜色,格式#RRGGBB
face——字体,可以是单个字体或字体列表,字体名称
size——字体大小,单位像素,数字
例:
my_txt.htmlText=”<font color=’#ff0000′ face=’Arial’ size=’12′>用HTML字体标签的效果</font>”
5、<i> 斜体标签
例:
my_txt.htmlText=”<i>这里是斜体</i>”
6、<li> 列表项标签
例:
my_txt.htmlText=”Sports:<li>列表项一</li> <li>列表项二</li><li>列表项三</li>”
注意,文本属性要选中“多行”。
不支持<ol> 和<ul>标签
7、<p> 段落标记
属性:
align——对其方式,可取值left、right、center
class——应用一个css样式类
例:
my_txt.htmlText=”<p align=’right’ class=’title’>右对齐</p><p align=’left’ class=’body’>左对齐</p>”
注意,文本属性要选中“多行”。本例假设css类title和body已存在。
8、<span> 标签
说明:对位于该标签内所有文本应用css样式,只有在定义了css对象后有效。
属性:class——应用一个css样式类。
例:
my_txt.htmlText=”<span class=’body’>应用CSS样式类</span>
注意,本例假设css类body已存在。
9、<u> 下划线标签
例:
my_txt.htmlText=”<u>添加下划线</u>
两个特殊的标签:
10、<img> 图像标签
说明:这个标签的功能不仅仅是在文本框中插入图片,还可以插入SWF和MovieClip。
属性:
src—— 要加载的JPG或SWF的URL,或是MC的链接ID,这个属性是必要的,其他属性则可选。
注意:Flash不支持progressive格式的JPG。
id——指定嵌入了JPG,SWF或MovieClip的电影剪辑的名称。
width——图片/动画宽度。
height——图片/动画高度。
align——对其方式,可取值:left,right,默认为left。
hspace——文本环绕图时水平方向上与图片的空隙。
vspace——文本环绕图时垂直方向上与图片的空隙。
11、<textformat> 文本格式标签
说明:这个标签可以让你直接应用一些TextFormat对象的属性到文本中。
属性:
blcokIndent: 段落缩进大小,单位像素。
indent: 段落首行缩进大小,单位像素。
leading: 文本行间距,单位像素。
leftmargin: 文本左边距,单位像素。
rightmargin: 文本右边距,单位像素。
tabstops: 表格划分,单位像素。
注意:关于属性tabstops:它的值是一个数组,用来表示表格的列划分情况。
在文本中用转义字符\t将输出位置移动到下一个制表位。
例:
tabField=”<b>姓名\t性别\t年龄\t</b><br>”;
tabRecord1=”唐家齐\t男\t21\t<br>”;
tabRecord2=”张晓明\t女\t18\t<br>”;
txt=”<textformat tabstops=’[50,150,150]‘>” + tabField + tabRecord1 + tabRecord2 + “</textformat>”;
(2)在 Flash 8 如何使用HTML标签
第一步:新建 Flash 文档,在舞台上创建一个动态文本框,设定实例名称为my_txt 。
第二步:在第一帧加入AS代码:
my_txt.html = true; //指定该文本字段为HTML文本字段。
my_txt.htmlText= “<a href=’http://hi.baidu.com/kmjy/creat/blog/’ target=’_blank’>开明教育</a>”; //引用HTML的超链接标签。
Flash CS3里可用的HTML标签和注意事项
Adobe Flash播放器支持一组标准HTML标签, 例如<p>和<li>, 你可以把它们放在动态或输入框文本区内来格式化文字.
Flash播放器版本7和后续版本也支持<img>标签. 你可以在文本区嵌入图片(JPEG,GIF,PNG)和SWF文件.
Flash播放器自动把文字环绕在图片周围, 就像浏览器显示HTML页面时把文字环绕在图片周围那样.
Adobe Flash Player supports a subset of standard HTML tags such as <p> and <li>, which you can use to style text in any dynamic or input text field. Text fields in Flash Player 7 and later also support the <img> tag, which lets you embed image files (JPEG, GIF, PNG), SWF files, and movie clips in a text field. Flash Player automatically wraps text around images embedded in text fields in much the same way that a web browser wraps text around embedded images in an HTML page.
HTML tags supported by Adobe Flash CS3 Professional
The following HTML tags are supported by Adobe Flash CS3 Professional. Optional tag attributes appear in brackets.
引用内容 引用内容Anchor: <a href=”/support/flash/ts/documents/url”>
Bold: <b>
Font: < font [color=”#xxxxxx”] [face=”Type Face”] [size=”Type Size”]>
Italic: <I>
Paragraph: <p [align=”left”|”right”|”center”]>
Underline: <u>
Break: <br>
Image: <img src=”/images/flash/dogs.jpg”/> The <img> tag lets you embed external image files (JPEG, GIF, PNG), SWF files, and movie clips inside text fields and TextArea component instances.
List Item: <li>
ordered and unordered lists (<ol> and <ul> tags) are not recognized by Flash Player, so they do not modify how your list is rendered. All list items use bullets.
Span: The <span> tag is available only for use with CSS text styles.
TextFormat: The <textformat> tag lets you use a subset of paragraph formatting properties of the TextFormat class within HTML text fields, including line leading, indentation, margins, and tab stops. You can combine <textformat> tags with the built-in HTML tags.
引用内容 引用内容Additionally, Flash Player supports HTML entities:
< < (less than)
> > (greater than)
& & (ampersand)
” ” (double quotes)
' ‘ (apostrophe, single quote)
程序代码 程序代码
如何使用Flash MX 2004所支持的HTML标签:
第一步:新建一个FLASH文档,在舞台上插入一个动态文本框,并命名为 my_txt 。
第二步:在第一帧加入AS代码:
my_txt.html = true; //指定该文本字段为HTML文本字段。
my_txt.htmlText=”<a href=’http://www.flash8.net’ target=’_self’>闪吧</a>”;
//引用HTML的超链接标签。
Flash MX 2004所支持的HTML标签:
<a> 超链接标签
属性:href: 链接地址
target: 目标窗口 可取值为_blank,_parent,_self,_top。
例:
my_txt.htmlText=”<a href=’http://www.flash8.net’ target=’_self’>闪吧</a>”;
<b> 粗体标签
例:
my_txt.htmlText=”<b> 闪吧</b>”;
<br> 换行标签
例:
my_txt.htmlText=”闪吧<br>”;
<font> 字体标签
属性:color:字体颜色,格式#RRGGBB。
face:字体,可以是单个字体或字体列表。
size:字体大小,单位像素。
例:
my_txt.htmlText=”<font color=’#ff0000’ face=’Arial’ size=’12’>闪吧</font>”;
<i> 斜体标签
说明:
例:
my_txt.htmlText=”<i>闪吧</i>”;
<li> 列表项标签
例:
my_txt.htmlText=”Sports:<li>新手区</li> <li>教程区</li><li>资源区</li>”;
注意,文本框要选中“多行”。
<p> 段落标记
属性:align:对其方式,可取值left,right,center。
class:应用一个css样式类。
例:
my_txt.htmlText=”<p align=’right’ class=’title’>align right</p><p align=’left’ class=’body’>align left</p>”;
注意,文本框要选中“多行”。本例假设css类title和body已存在。
<span> 标签
说明:对位于该标签内所有文本应用css样式,只有在定义了css对象后有效。
属性:class:应用一个css样式类。
例:
my_txt.htmlText=”<span class=’body’>闪吧</span>”;
注意,本例假设css类body已存在。
<u> 下划线标签
例:
my_txt.htmlText=”<u> 闪吧</u>”;
<img> 图像标签
说明:这个标签的功能不仅仅是在文本框中插入图片,还可以插入SWF和MovieClip。
属性:src: 要加载的JPG或SWF的URL,或是MC的链接ID,这个属性是必要的,其他属性则可选。
注意:Flash不支持progressive格式的JPG。
id : 指定嵌入了JPG,SWF或MovieClip的电影剪辑的名称。
width: 图片/动画宽度。
height: 图片/动画高度。
align: 对其方式,可取值:left,right,默认为left。
hspace: 文本环绕图时水平方向上与图片的空隙。
vspace: 文本环绕图时垂直方向上与图片的空隙。
例:
my_txt.htmlText=”<src=’my.swf’ width=’100’ height=’80’ align=’left’>”;
<textformat> 文本格式标签
说明:这个标签可以让你直接应用一些TextFormat对象的属性到文本中。
属性:blcokIndent: 段落缩进大小,单位像素。
indent: 段落首行缩进大小,单位像素。
leading: 文本行间距,单位像素。
leftmargin: 文本左边距,单位像素。
rightmargin: 文本右边距,单位像素。
tabstops: 表格划分,单位像素。
注意:关于属性tabstops:它的值是一个数组,用来表示表格的列划分情况。
在文本中用转义字符 将输出位置移动到下一个制表位。
例:
tabField=”<b>name Sex Age </b><br>”;
tabRecord1=”rongsheng 20 Male <br>”;
tabRecord2=”zjq 21 Female <br>”;
txt=”<textformat tabstops=’[50,150,150]’>”+ tabField+tabRecord1+tabRecord2+”</textformat>”;
正常情况下,flash文本框显示的都近似于纯文本,比如你不能在一个动态文本框中显示不同的字号、字体和字色,更不用说在文本框中显示图片。改变这种单调面貌的一个办法就是使用flash的读取html格式文本的功能。
1、文本字段如何显示html文本
首先开启将文本呈现为 HTML功能:
文本框实例名
.html = true;
然后使用htmlText属性接收html文本:
文本框实例名.htmlText=”此处是带有html标签或属性的文本”
实例1:
舞台上放一个动态文本框,实例名mytxt,时间轴第一帧写代码:
mytxt.html=true;
mytxt.htmlText=”<font color=’#ff6600′>这里是演示用的文字,它将按照html要求显示。</font>”
测试可看到效果。
//帮助文档中说:html
Text 属性文本字段支持以下 HTML 标记:a
、b
、font color
、font face
、font size
、i
、p
和 u
。此外,支持下列 HTML 属性:leftmargin
、rightmargin
、align
、indent
和 leading
。 要应用这些属性,请使用 TextFormat 类或层叠样式表。有关详细信息,请参阅”学习 Flash 中的 ActionScript 2.0″中的以及”ActionScript 2.0 语言参考”中的”TextFormat 类”或”TextField.StyleSheet 类”。
2、通过loadvars对象读取外部html文档:
以下示例,我用TextArea组件代替动态文本框来显示读取到的html文档内容。
实例2:
var content_txt:mx.controls.TextArea;
//content_txt.multiline = true;
content_txt.wordWrap = true;
content_txt.html = true;
content_txt.hScrollPolicy = “on”;
var story:LoadVars = new LoadVars();
story.onData = function(s) {
if (s !== undefined) {
//使用文本组件的话,没有htmlText属性,使用text属性即可。
//使用动态文本框的话,必须使用htmlText属性。
content_txt.text = unescape(s);
} else {
content_txt.text = “载入错误。”;
}
};
story.load(“http://www.china.com.cn/news/txt/2009-06/17/content_17961878.htm“);
//以上例子载入了一个网络上的html页面,在flash内测试,即按下Ctrl+Enter键进行测试,效果如下图:
但是输出swf文件无法载入,上传空间也无法载入,看来和载入txt文本不同,载入html时会受flash的安全模型限制。
如果是html文档和swf文档在同一文件夹下,访问则没有任何问题,看下面实例:
实例3:
//————————————–flash脚本:————-
var content_txt:mx.controls.TextArea;
content_txt.wordWrap = true;
content_txt.html = true;
content_txt.hScrollPolicy = “on”;
var story:LoadVars = new LoadVars();
story.onData = function(s) {
if (s !== undefined) {
//使用文本组件的话,没有htmlText属性,使用text属性即可。
//使用动态文本框的话,必须使用htmlText属性。
content_txt.text = unescape(s);
} else {
content_txt.text = “载入错误。”;
}
};
story.load(“t.html”);
//——————–t.html文档保存在和swf在同一文件夹下,内容为:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html;charset=UTF-8″/>
<title> 律师称邓玉娇未决定是否上诉 法学家就此案答问_中国网</title>
<meta name=”keywords” content=” 邓玉娇 汉大赋 上诉 此案 答问 认定被告人 法学家 故意伤害罪 刑法 防卫行为” /><body><font color=”#ff6600″>巴东县人民法院认为,邓玉娇在遭受邓贵大、黄德智无理纠缠、拉扯推搡、言词侮辱等不法侵害的情况下,实施的反击行 为具有防卫性质,但超过了必要限度,属于防卫过当。被告人邓玉娇故意伤害致人死亡,其行为已构成故意伤害罪。案发后,邓玉娇主动向公安机关投案,如实供述 罪行,构成自首。经法医鉴定,邓玉娇为心境障碍(双相),属部分(限定)刑事责任能力。据此,依法判决对邓玉娇免予刑事处罚。</font>
</body>
</html>
//————————————-swf输出效果:—————————
3、使用外部css样式表的方法:
flash脚本:
//===================使用外部样式表========================================
var myStyle:TextField.StyleSheet = new TextField.StyleSheet();
myStyle.load(“ys.css”);
content_txt.styleSheet = myStyle;
//=============================================================
var content_txt:mx.controls.TextArea;
content_txt.wordWrap = true;
content_txt.html = true;
content_txt.hScrollPolicy = “on”;
var story:LoadVars = new LoadVars();
story.onData = function(s) {
if (s !== undefined) {
//使用文本组件的话,没有htmlText属性,使用text属性即可。
//使用动态文本框的话,必须使用htmlText属性。
content_txt.text = unescape(s);
} else {
content_txt.text = “载入错误。”;
}
};
story.load(“t.html”);
//==================================外部样式表文件ys.css:
body {
font-family: Arial,Helvetica,sans-serif;
font-size: 16px;
font-weight: bold;
display: block;
}
//=============自己还可以继续编辑更多的样式设置
4、将文本呈现为html的好处。
从上面的截图效果可以看出,开启了html功能后,文本显示出来的格式丰富了,可以给文本中的任一处文字随意改变颜色,字体等,还可以在文本内容中显示图片。这是纯文本格式所不能比的。
如果我们想使flash文本框中的内容格式丰富多彩,使用html格式是很好的办法。
我想可以在dw的设计视图下设置好一篇文章的格式,然后从代码视图下得到它的html格式文本,进而在flash中显示html,以使flash文本格式丰富多彩。
1. document.form.item 问题
问题:
代码中存在 document.formName.item(“itemName”) 这样的语句,不能在FF下运行
解决方法:
改用 document.formName.elements[“elementName”]
2. 集合类对象问题
问题:
代码中许多集合类对象取用时使用(),IE能接受,FF不能
解决方法:
改用 [] 作为下标运算,例:
document.getElementsByName(“inputName”)(1) 改为 document.getElementsByName(“inputName”)[1]
3. window.event
问题:
使用 window.event 无法在FF上运行
解决方法:
FF的 event 只能在事件发生的现场使用,此问题暂无法解决。可以把 event 传到函数里变通解决:
onMouseMove = “functionName(event)”
function functionName (e) {
e = e || window.event;
……
}
4. HTML对象的 id 作为对象名的问题
问题:
在IE中,HTML对象的 ID 可以作为 document 的下属对象变量名直接使用,在FF中不能
解决方法:
使用对象变量时全部用标准的 getElementById(“idName”)
5. 用 idName 字符串取得对象的问题
问题:
在IE中,利用 eval(“idName”) 可以取得 id 为 idName 的HTML对象,在FF中不能
解决方法:
用 getElementById(“idName”) 代替 eval(“idName”)
6. 变量名与某HTML对象 id 相同的问题
问题:
在FF中,因为对象 id 不作为HTML对象的名称,所以可以使用与HTML对象 id 相同的变量名,IE中不能
解决方法:
在声明变量时,一律加上 var ,以避免歧义,这样在IE中亦可正常运行
最好不要取与HTML对象 id 相同的变量名,以减少错误
7. event.x 与 event.y 问题
问题:
在IE中,event 对象有x,y属性,FF中没有
解决方法:
在FF中,与 event.x 等效的是 event.pageX ,但event.pageX IE中没有
故采用 event.clientX 代替 event.x ,在IE中也有这个变量
event.clientX 与 event.pageX 有微妙的差别,就是滚动条
要完全一样,可以这样:
mX = event.x ? event.x : event.pageX;
然后用 mX 代替 event.x
8. 关于frame
问题:
在IE中可以用 window.testFrame 取得该frame,FF中不行
解决方法:
window.top.document.getElementById(“testFrame”).src = ‘xx.htm’
window.top.frameName.location = ‘xx.htm’
9. 取得元素的属性
在FF中,自己定义的属性必须 getAttribute() 取得
10. 在FF中没有 parentElement,parement.children 而用 parentNode,parentNode.childNodes
问题:
childNodes 的下标的含义在IE和FF中不同,FF的 childNodes 中会插入空白文本节点
解决方法:
可以通过 node.getElementsByTagName() 来回避这个问题
问题:
当html中节点缺失时,IE和FF对 parentNode 的解释不同,例如:
<form>
<table>
<input/>
</table>
</form>
FF中 input.parentNode 的值为form,而IE中 input.parentNode 的值为空节点
问题:
FF中节点自己没有 removeNode 方法
解决方法:
必须使用如下方法 node.parentNode.removeChild(node)
11. const 问题
问题:
在IE中不能使用 const 关键字
解决方法:
以 var 代替
12. body 对象
FF的 body 在 body 标签没有被浏览器完全读入之前就存在,而IE则必须在 body 完全被读入之后才存在
这会产生在IE下,文档没有载入完时,在body上appendChild会出现空白页面的问题
解决方法:
一切在body上插入节点的动作,全部在onload后进行
13. url encoding
问题:
一般FF无法识别js中的&
解决方法:
在js中如果书写url就直接写&不要写&
14. nodeName 和 tagName 问题
问题:
在FF中,所有节点均有 nodeName 值,但 textNode 没有 tagName 值,在IE中,nodeName 的使用有问题
解决方法:
使用 tagName,但应检测其是否为空
15. 元素属性
IE下 input.type 属性为只读,但是FF下可以修改
16. document.getElementsByName() 和 document.all[name] 的问题
问题:
在IE中,getElementsByName()、document.all[name] 均不能用来取得 div 元素
是否还有其它不能取的元素还不知道(这个问题还有争议,还在研究中)
17. 调用子框架或者其它框架中的元素的问题
在IE中,可以用如下方法来取得子元素中的值
document.getElementById(“frameName”).(document.)elementName
window.frames[“frameName”].elementName
在FF中则需要改成如下形式来执行,与IE兼容:
window.frames[“frameName”].contentWindow.document.elementName
window.frames[“frameName”].document.elementName
18. 对象宽高赋值问题
问题:
FireFox中类似 obj.style.height = imgObj.height 的语句无效
解决方法:
统一使用 obj.style.height = imgObj.height + “px”;
19. innerText的问题
问题:
innerText 在IE中能正常工作,但是 innerText 在FireFox中却不行
解决方法:
在非IE浏览器中使用textContent代替innerText
20. event.srcElement和event.toElement问题
问题:
IE下,even对象有srcElement属性,但是没有target属性;Firefox下,even对象有target属性,但是没有srcElement属性
解决方法:
var source = e.target || e.srcElement;
var target = e.relatedTarget || e.toElement;
21. 禁止选取网页内容
问题:
FF需要用CSS禁止,IE用JS禁止
解决方法:
IE: obj.onselectstart = function() {return false;}
FF: -moz-user-select:none;
22. 捕获事件
问题:
FF没有setCapture()、releaseCapture()方法
解决方法:
IE:
obj.setCapture();
obj.releaseCapture();
FF:
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
if (!window.captureEvents) {
o.setCapture();
}else {
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
if (!window.captureEvents) {
o.releaseCapture();
}else {
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}