此文为本人在实际工作中遇到的情况做的记录,所以比较乱,主要用于自己日后查看。如果对大家有帮助,当然也更好。
最普遍的情况
当遇到功能不好使的情况,首先按f12看控制台有没有报错、
A如果有定位错误
常见错误:window.frames[“iframe_table”]
去定位到报错位置 然后改成
(
"
i
f
r
a
m
e
[
i
d
=
′
i
f
r
a
m
e
t
a
b
l
e
′
]
"
)
如
:
原
来
:
w
i
n
d
o
w
.
f
r
a
m
e
s
[
"
i
f
r
a
m
e
t
a
b
l
e
"
]
.
l
o
c
a
t
i
o
n
.
h
r
e
f
=
g
p
m
.
c
x
t
j
.
u
r
l
;
改
成
:
("iframe[id='iframe_table']") 如:原来:window.frames["iframe_table"].location.href = gpm.cxtj.url; 改成:
("iframe[id=′iframetable′]")如:原来:window.frames["iframetable"].location.href=gpm.cxtj.url;改成:(’#iframe_table iframe’).attr(‘src’, gpm.cxtj.url);
原来:window.frames[“iframe_table”].window.reloadGrid(gpm.gridConfig);
改成: $(“iframe[id=‘iframe_table’]”)[0].contentWindow.reloadGrid(gpm.gridConfig);
具体根据你要修改的业务模块逻辑来,可以去看common/js/topinit.js来参考。
B其他报错根据模块具体报错调整,如果是大面积公共错误可以和我说我来看。
如果不报错,bi报表刷不出来或者出错
A:刷不出来,看你引用的resulttable.js 找到全部的
obj_table.HeaderDataSource = “header”;
obj_table.DataSource = “table”;
改成:
obj_table.attributes.datasource.value = “table”;
obj_table.attributes.headerdatasource.value = “header”;
或者
obj_table.setAttribute(“HeaderDataSource”, “header”);
obj_table.setAttribute(“DataSource”, " table");
B:如果刷新的是个abc这种表格,去找引用的qc.js
obj_table.HeaderDataSource = “header”;
obj_table.DataSource = “table”;
改成:
obj_table.attributes.datasource.value = “table”;
obj_table.attributes.headerdatasource.value = “header”;
如果有样式和其他好使的模块不一致,查看自己引用的topinit.js common.css对照common文件下的改。
细项记录
主要在兼容减税降费和社保费审核过程中发现的一些问题,记录下来以备后患。
判断是否是IE的方法:
function isIE(){
debugger;
if (window.navigator.userAgent.indexOf("MSIE")>=1)
return true;
else
return false;
}
1.1 display:inline;
火狐会挤在一块,需要和float:left同时使用。
问题案例:
表样的单位报表期那行内容挤在一块了。
原因是,火狐用了display:inline;就会挤在一起,但是不用的话又会自动换行。
解决办法:加了个float:left后就好了。
1.2 父元素无具体宽度有text-align:center;子元素有具体宽度
火狐子元素在父元素中居左。
火狐子元素需要加上margin:auto;就可以了
问题案例:
发现表头合并单元格的内容不居中
原因:在火狐中父元素用了text-align:center,但是子元素有具体宽度的话,父元素的居中会失效。
尝试:
有人说火狐里面要用:text-align: -moz-center !important;才行,但是测试依然无效;
有人说火狐要在子元素上加margin:auto;我在在线编辑测试了是有效的,但是在BI中测试依然无效;然后我直接在F12的时候加上margin,居然也有效。那么问题就转换为我加的margin:auto不见了。
所以认为不是样式失效,而是样式没有成功赋值。
最终找到其最终样式是直接设在CSS中的,在CSS中添加margin:auto后就OK了。
1.3 对字符串中的标签大小写
IE大写,火狐小写
解决办法:换非标签的标识或者兼容大小写
问题案例:
右键下钻的面板打开失败
问题描述:点击金额列进行右键点击没反应
原因:在识别减税性质那一列的时候本来的条件是这样的:
问题就出在这个indexOf(‘DIV’);在IE中是大写的DIV,但是在火狐中是小写的div;所以在火狐中进不去这个条件。
解决办法:改为其他标识符来判断
1.4 Propertychange事件
火狐没有这个事件
问题案例:
问题1:更换日期控制往期数据对比的显隐失效。
分析思路:
1)因为在FH-1(另一个模块)也用到了这种内容改变监听,试了下fh-1在火狐下是可以的。所以参考下fh-1的事件。但是发现无效。
2)而且fh-1只有联想时才有用,日期控件就没用。再次猜测是不是日期控件的问题,所以用了户数控件测试,发现火狐依然不行。
3)再次猜测是不是只有可输入的输入框才能检测,所以又临时随便加了一个文本框测试,发现果然如此,火狐就能监控到了。
所以缩小范围为:火狐可以input propertychange事件监控到文本框的变化,但是监控不到下拉框的变化。
4)后来百度才反应过来,propertychange事件是IE独有的事件,之所以在chrome下也好使,不是因为propertychange事件可以用,而是因为bind(“input propertychange”)这是绑定了两个事件,生效的是input事件。
可是 我们要监控的是日期控件和下拉框控件,那怎么办呢?火狐又没有propertychange事件。
最终换了条思路:既然火狐没办法监控日期变化了,那么就换种方式达到同样的目的。也就是点击日期框的时候保存下来旧的值,选完日期后,点页面的任何位置就触发对比当前日期和保存的日期是否相同,不同则进入内容变化事件。
if(isIE()){
$("#datetimeq").bind("input propertychange", function () {
timeChange();
});
}else{
var oldValue="";
$("#datetimeq").bind("click",function () {
oldValue=$("#datetimeq").val();
$('body').on('click',function(){
var newValue=$("#datetimeq").val();
if(newValue!=oldValue){
timeChange();
}
})
});
1.5 ActiveXObject
火狐报错
问题案例:
ReferenceError: ActiveXObject is not defined
报错点:
原因:ActiveX是微软独有的,只有基于IE内核的浏览器才能使用。
解决办法:兼容代码
var xmlHttp ;
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
1.6 获取html标签自定义元素
IE: 可以通过对象点出来
火狐:不能通过对象点出来
兼容写法:document.getElementById(‘span1’).attributes[‘time’].nodeValue;
问题案例:
清册下钻获取不到参数
原因:火狐不能直接获取到html元素的自定义属性
有时候在html中自定义属性能够方便我们,
比如hello,
通常在ie中获取time的办法是:document.getElementById(‘span1’).time就行,
但是这个方法在firefox下不管用,兼容的做法是这样的:
document.getElementById(‘span1’).attributes[‘time’].nodeValue;
解决办法:框起来的是以前获取的方式
1.7 Fh-1清册导出问题
报错
导出没反应,原因是在下图处报错
原因:我的这个iframe里没有id,没有id的原因是加id是在下图的方法中加的,
但是我做了一个判断 isJump=ture的时候一顿操作之后就return了 下面那个就没跑:
就导致没有加上id.
解决办法:因为这个方法我确实也不用,所以我就将通过id定位改成了name定位
1.8 下拉树的层级显示不对
定位到显示树的地方,去添加了z-index
加上之后火狐好了,可是IE又出问题了。所以需要判断浏览器区分。
1.9 关闭按钮的层级显示不对
解决:在右键出来的面板上加上层级z-index:1999
1.10 火狐不支持cursor:hand;的写法
原因:在CSS中手型指针有cursor:hand和cursor:pointer两种写法,其中cursor:hand在FireFox中不支持,返回错误! 只要使用cursor:pointer即可解决问题,FF和IE都支持,且Google的浏览器也支持!cursor:pointer应该是符合W3C标准的。 cursor:hand :IE完全支持。但是在firefox是不支持的,没有效果。 cursor:pointer :是CSS2.0的标准。所以firefox是支持的,但是IE5.0既之前版本不支持。IE6开始支持。 IE5 IE6 IE7 Firefox cursor:pointer × √ √ √ cursor:hand √ √ √ × 看来以后用cursor:pointer 是最好的了
解决办法:改成pointer
1.11 渐变色的背景色需要做兼容
IE系列
filter:progid:DXImageTransform.Microsoft.Gradient(startColorStr=’#FF0000’,endColorStr=’#F9F900’,gradientType=’0’);
参数:startColorStr起始颜色 endColorStr结束颜色 gradientType为0时代表垂直,为1时代表水平
Firefox
background: -moz-linear-gradient(top, #FF0000, #F9F900);
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变
Opera
background: -o-linear-gradient(top,#FF0000, #F9F900);
参数:top、bottom垂直,left、right水平 例如:top时从顶部由#FF0000到#F9F900渐变,bottom时从底部由#FF0000到#F9F900渐变
webkit,如Chrome、Safari等
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FF0000), to(#F9F900));
1.12 火狐中在父元素有position: absolute;子元素未居中。(表头未居中)
子元素设置:margin:auto;
1.13 窗口表头放大缩小自适应添加
属于优化,加上下面代码后就可自适应表头了.
$(window).resize(function () {
debugger;
var result_width=$('#div-result').width();
var curId=PresentBtn+"#"+INIT_3.PresentSwjgDm+"#"+INIT_3.PresentBBNY+"D_tableHead";
if($("[id='"+curId+"']").length>0){
$("[id='"+curId+"']").width(result_width-17);
}
})
1.14 点击审核信息的放大 出来的是被截掉的页面
问题描述:发现在火狐中点击放大审核结果页面的时候,页面的结果不会全部展示,它只会放大之前的页面有什么就展示什么,但是手动拖动时,就可以展示全部。具体原因不知道,可能是火狐的BUG吧。
解决思路:由于拖动这种缓慢改变高度的行为可以展示完整的界面内容,所以就改变高度的样式设置的地方设置了动画,虽然是0秒,但是可以完整展示出来了。
解决办法:
1.15 发现火狐的点击对比出来的窗口高宽与预期不符
原因:虽然laryer打开的内容的高宽是正确的,但是外层的laryer的宽度不对;可能火狐不能自己填充,但是IE可以被内容撑起来。
解决办法:手动设置弹出层的宽度为100%
同时优化将弹出层的内容也设为了100%;这样放大缩小就可以自适应全屏了。
1.16 火狐disabled没置灰样式
在火狐中用了disabled虽然功能确实被禁用了,不能点了,但是样式没有置灰,需要手动置灰。