【交流帖】WebKit中JS脚本的兼容处理
本帖最后由 cgft 于 2015-3-29 19:27 编辑用上了OA双核精灵后，逐渐发现含JavaScript 脚本的自编的工作流表单和自行二次开发的OA功能模块，出现一些兼容问题，原来在IE内核中正常运行的，现在在WebKit 内核中运行出现了一些问题。
本帖中，将陆续介绍笔者在工作实际中遇到的WebKit 内核对 JavaScript 脚本的兼容问题及解决方案，借此抛砖引玉，与同仁共享。各位版主及网友若有好的解决之道，恳请不吝赐教。
1. 表单加载事件onload的处理
工作流中的表单内，添加了一段在表单加载时运行的js代码，形如：
<script language="JavaScript" for="window" event="onload">
// 表单加载后自动运行的JS代码 ……
//……
</script>
在IE内核中运行正常，但发现在WebKit内核中未执行。
若换成：
<script>
(function($){
$(document).ready(function(){
// 表单加载后自动运行的JS代码 ……
//……
});
})(jQuery);
</script>
则IE，WebKit内核都可正常运行。
本帖最后由 cgft 于 2015-3-30 09:24 编辑
2. JS回退操作命令history.go()的处理
WebKit 内核中，不支持JS回退操作命令history.go()。形如：
<input type="button" value="返 回" class="BigButton" onclick="javascript:history.go(-1);" title="返回至上一步。">在IE内核中运行正常，但在WebKit内核中却运行异常。
处理方法，实现历史记录回退的方法尚未找到。
在本例中，将按钮改写成上一步页面的URL：
<input type="button" value="返 回" class="BigButton" onClick="location='purchase_app.php'" title="返回至上一步。">以为权宜之计。IE，WebKit内核都可正常运行。
------------------------------------------------------------------------------
（2015-3-30添加）
7楼的网友sany217提供了完善的解决方法：
<input type="button" value="返回" onClick="javascript:self.location=document.referrer;">
在此致谢！
本帖最后由 cgft 于 2014-9-3 11:51 编辑
3. WebKit 内核，无法直接读取AJAX生成的控件的值
例句
下面2句，代码为：
var FTDZYH_DEPOSITORY= document.form1.FTDZYH_DEPOSITORY.value == -1 ? '' : "&FTDZYH_DEPOSITORY="+document.form1.FTDZYH_DEPOSITORY.value;
var FTDZYH_PROTYPE= document.form1.FTDZYH_PROTYPE.value == -1 ? '' : "&FTDZYH_PROTYPE="+document.form1.FTDZYH_PROTYPE.value; 在IE内核中运行正常，但在WebKit内核中却运行，第二句出现Uncaught TypeError: Cannot read property 'value' of undefined异常。
【原因分析】第一句中的FTDZYH_DEPOSITORY和第二句中的FTDZYH_PROTYPE，都是select下拉选择框控件。不同的是，第一个控件FTDZYH_DEPOSITORY的值列表是静态生成的，而第二个控件FTDZYH_PROTYPE的值列表却是在第一个控件被选定某个值后，通过jQuery的AJAX方法进行动态查询而生成的。
对于第二个控件FTDZYH_PROTYPE，在IE内核中运行时，document.form1.FTDZYH_PROTYPE.value命令可正常读取FTDZYH_PROTYPE控件中选定的值；在WebKit内核中运行时，document.form1.FTDZYH_PROTYPE.value命令读取失败，提示“Uncaught TypeError: Cannot read property 'value' of undefined”错误。
【处理方法】将控件的读值命令由document.form1.FTDZYH_PROTYPE.value 改写为document.getElementById("FTDZYH_PROTYPE").value 。即：
var FTDZYH_DEPOSITORY= document.form1.FTDZYH_DEPOSITORY.value == -1 ? '' : "&FTDZYH_DEPOSITORY="+document.form1.FTDZYH_DEPOSITORY.value;
var FTDZYH_PROTYPE= document.getElementById("FTDZYH_PROTYPE").value == -1 ? '' : "&FTDZYH_PROTYPE="+document.getElementById("FTDZYH_PROTYPE").value;IE，WebKit内核都可正常运行。
WebKit 内核对getElementById()方法的支持，还是没问题的。 厉害，学习了 cgft 发表于 2014-8-29 15:00 static/image/common/back.gif
2. JS回退操作命令history.go()的处理
WebKit 内核中，不支持JS回退操作命令history.go()。形如：
javascript:self.location=document.referrer; javascript:self.location=document.referrer;
试了一下，这种写法在IE、WEBKIT和精灵里，都运行正常。
十分感谢！期望今后多交流、指教。:handshake
4、弹出窗体的尺寸控制
本帖最后由 cgft 于 2015-3-29 19:23 编辑如需要在页面中需要弹出一个宽w，高h的小窗体，则可用JS语句实现。
控制显示窗体的尺寸，对于IE内核，可用window.showModelessDialog方法；对于其他浏览器内核，则可用window.open方法。
但在OA精灵里，以上两种方法都无法控制所弹出的窗体的尺寸，其结果就是弹出的窗体的尺寸与精灵的父窗体大小相同，使用极不方便。
如果大家想看一下典型的例子，不妨就试验在OA精灵里发布一个公告通知。如果是在IE内核的状态下，按角色选择公告通知的发布范围，选择窗体的尺寸大小就显示准确；如果是在WEBKIT内核的状态下，按角色选择公告通知的发布范围，选择窗体的尺寸大小就出现显示问题，角色窗体完全遮盖了父窗体。这个Bug在这里可能不影响正常使用，只不过是界面变得难看些罢了，但在其他的一些应用中，就可能因遮盖了父窗体的显示信息而影响到实际的操作。本人曾报告过这个Bug的。
解决办法，在弹出的窗体里，加入如下JS语句：
<script type="text/javascript">
if(window.external && typeof window.external.OA_SMS!='undefined')
window.external.OA_SMS(w, h, "SET_SIZE");
</script>
以上语句，使得OA精灵弹出的窗体的尺寸能得到正确控制，以上语句最好放到JS其他编码的前面，以上语句对各类内核浏览器的WEB状态的显示无任何影响。
cgft 发表于 2014-11-7 15:31 static/image/common/back.gif
试了一下，这种写法在IE、WEBKIT和精灵里，都运行正常。
十分感谢！期望今后多交流、指教。...
指教谈不上，我应该向你学习。我是菜鸟，凑巧以前做WEB兼容的时候遇到过这样的问题罢了。
5、对frameset标签属性的动态操纵
本帖最后由 cgft 于 2015-3-29 19:22 编辑frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。frameset 的cols和rows 属性规定了在框架集中各子框架所占的宽度或高度。
在某个子框架中，用JS代码动态修改框架集frameset的cols（或rows）值，例如将左窗口设置为全宽的20%，以前是用如下语句：
parent.frames['ProMagFrmset'].cols='20%,*';
在IE中运行正常，但如果要兼容WebKit内核，实现同样功能的语句必须改写为如下形式：
window.parent.document.getElementsByTagName("frameset").cols="20%,*";
页:
[1]
2