记录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，搞定