【交流帖】WebKit中JS脚本的兼容处理

cgft

用上了OA双核精灵后，逐渐发现含JavaScript 脚本的自编的工作流表单和自行二次开发的OA功能模块，出现一些兼容问题，原来在IE内核中正常运行的，现在在WebKit 内核中运行出现了一些问题。
本帖中，将陆续介绍笔者在工作实际中遇到的WebKit 内核对 JavaScript 脚本的兼容问题及解决方案，借此抛砖引玉，与同仁共享。各位版主及网友若有好的解决之道，恳请不吝赐教。

cgft

1. 表单加载事件onload的处理

工作流中的表单内，添加了一段在表单加载时运行的js代码，形如：

1. <script language="JavaScript" for="window" event="onload">
   
2.     // 表单加载后自动运行的JS代码 ……
   
3.     //  ……
   
4. </script>
   

复制代码

在IE内核中运行正常，但发现在WebKit内核中未执行。

若换成：

1. <script>
   
2. (function($){
   
3.    $(document).ready(function(){
   
4.      // 表单加载后自动运行的JS代码 ……
   
5.      //  ……
   
6.    });
   
7. })(jQuery);
   
8. </script>
   

复制代码

则IE，WebKit内核都可正常运行。

cgft

2. JS回退操作命令history.go()的处理

WebKit 内核中，不支持JS回退操作命令history.go()。形如：

1. <input type="button" value="返 回" class="BigButton" onclick="javascript:history.go(-1);" title="返回至上一步。">

复制代码

在IE内核中运行正常，但在WebKit内核中却运行异常。

处理方法，实现历史记录回退的方法尚未找到。
在本例中，将按钮改写成上一步页面的URL：

1. <input type="button" value="返 回" class="BigButton" onClick="location='purchase_app.php'" title="返回至上一步。">

复制代码

以为权宜之计。IE，WebKit内核都可正常运行。


------------------------------------------------------------------------------
（2015-3-30  添加）

7楼的网友sany217提供了完善的解决方法：

1. <input type="button" value="返回" onClick="javascript:self.location=document.referrer;">
   

复制代码

在此致谢！

cgft

3. WebKit 内核，无法直接读取AJAX生成的控件的值

例句
下面2句，代码为：

1. var FTDZYH_DEPOSITORY= document.form1.FTDZYH_DEPOSITORY.value == -1 ? '' : "&FTDZYH_DEPOSITORY="+document.form1.FTDZYH_DEPOSITORY.value;
   
2. 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 。即：

1. var FTDZYH_DEPOSITORY= document.form1.FTDZYH_DEPOSITORY.value == -1 ? '' : "&FTDZYH_DEPOSITORY="+document.form1.FTDZYH_DEPOSITORY.value;
   
2. var FTDZYH_PROTYPE= document.getElementById("FTDZYH_PROTYPE").value == -1 ? '' : "&FTDZYH_PROTYPE="+document.getElementById("FTDZYH_PROTYPE").value;

复制代码

IE，WebKit内核都可正常运行。
WebKit 内核对getElementById()方法的支持，还是没问题的。

放下

厉害，学习了

sany217

cgft 发表于 2014-8-29 15:00
2. JS回退操作命令history.go()的处理

WebKit 内核中，不支持JS回退操作命令history.go()。形如：

javascript:self.location=document.referrer;

cgft

javascript:self.location=document.referrer;

试了一下，这种写法在IE、WEBKIT和精灵里，都运行正常。
十分感谢！期望今后多交流、指教。:handshake

cgft

如需要在页面中需要弹出一个宽w，高h的小窗体，则可用JS语句实现。
控制显示窗体的尺寸，对于IE内核，可用window.showModelessDialog方法；对于其他浏览器内核，则可用window.open方法。
但在OA精灵里，以上两种方法都无法控制所弹出的窗体的尺寸，其结果就是弹出的窗体的尺寸与精灵的父窗体大小相同，使用极不方便。
如果大家想看一下典型的例子，不妨就试验在OA精灵里发布一个公告通知。如果是在IE内核的状态下，按角色选择公告通知的发布范围，选择窗体的尺寸大小就显示准确；如果是在WEBKIT内核的状态下，按角色选择公告通知的发布范围，选择窗体的尺寸大小就出现显示问题，角色窗体完全遮盖了父窗体。这个Bug在这里可能不影响正常使用，只不过是界面变得难看些罢了，但在其他的一些应用中，就可能因遮盖了父窗体的显示信息而影响到实际的操作。本人曾报告过这个Bug的。
解决办法，在弹出的窗体里，加入如下JS语句：

1. <script type="text/javascript">
   
2. if(window.external && typeof window.external.OA_SMS!='undefined')
   
3.   window.external.OA_SMS(w, h, "SET_SIZE");  
   
4. </script>

复制代码

以上语句，使得OA精灵弹出的窗体的尺寸能得到正确控制，以上语句最好放到JS其他编码的前面，以上语句对各类内核浏览器的WEB状态的显示无任何影响。

sany217

cgft 发表于 2014-11-7 15:31
试了一下，这种写法在IE、WEBKIT和精灵里，都运行正常。
十分感谢！期望今后多交流、指教。  ...

指教谈不上，我应该向你学习。我是菜鸟，凑巧以前做WEB兼容的时候遇到过这样的问题罢了。

cgft

frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。frameset 的cols和rows 属性规定了在框架集中各子框架所占的宽度或高度。

在某个子框架中，用JS代码动态修改框架集frameset的cols（或rows）值，例如将左窗口设置为全宽的20%，以前是用如下语句：

1. parent.frames['ProMagFrmset'].cols='20%,*';
   

复制代码

在IE中运行正常，但如果要兼容WebKit内核，实现同样功能的语句必须改写为如下形式：

1. window.parent.document.getElementsByTagName("frameset")[0].cols="20%,*";

复制代码