记录Ally项目的点点滴滴(二)-corlorbox and iframe

　　因为美国总部那边目前在放圣诞年假，所以这一个礼拜不是很忙，就把在Ally一期之中所遇到的问题和解决方案都整理了一下，因为有很多的js问题，在国内的网站上找不到相应的解决资料，我就代同行们整理一下，希望能给大家以后的开发中提供一些便利。

　　根据客户的要求，我们需要在IE7，IE8，火狐，google和Safari5种浏览器下进行测试，那么问题出现了。

　　1，项目中，我们使用了jquery.colorbox.js 来实现提示的窗体，在IE7下面，提示框的边框成了黑色。如下，

　　解决方案：

<script type="text/javascript" language="javascript"> $(document).ready(function() { var tipEffect; if ($.browser.msie) { tipEffect = "toggle" } else { tipEffect = "fade" } $("#hours a").tooltip({ effect: tipEffect, tip: "#hours-tip", position: "bottom center", offset: [-5, -80] }); }); </script>

　　2， 同上一个一样，在IE7下，图片的边框阴影无法显示；

　　解决方案：colorbox.css中修改，把它的src路径修改成相对于本项目的相对路径。

.cboxIE #cboxTopLeft { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderTopLeft.png, sizingMethod='scale'); } .cboxIE #cboxTopCenter { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderTopCenter.png, sizingMethod='scale'); } .cboxIE #cboxTopRight { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderTopRight.png, sizingMethod='scale'); } .cboxIE #cboxBottomLeft { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderBottomLeft.png, sizingMethod='scale'); } .cboxIE #cboxBottomCenter { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderBottomCenter.png, sizingMethod='scale'); } .cboxIE #cboxBottomRight { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderBottomRight.png, sizingMethod='scale'); } .cboxIE #cboxMiddleLeft { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderMiddleLeft.png, sizingMethod='scale'); } .cboxIE #cboxMiddleRight { background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=../source/images/internet_explorer/borderMiddleRight.png, sizingMethod='scale'); }

　　3，因为我们要创建PDF,但是在创建PDF之前，用户在输入信息的同时，其可以看到预览效果，因为是用IFrame实现的，我们要在IFrame页面上即填即显信息，所有，问题又来了。

之前因为没有考虑到Safari的兼容性，造成无法显示问题，最后修改JS函数为：

document.getElementsByName("frmTemplateImg")[0].contentWindow.document.getElementById(id).innerHTML = obj.value;

frmTemplateImg 是IFrame的ID，id是我们IFrame子页面的控件ID,obj是本页面的输入控件。

下面是最终的PDF效果。

OK，搞定