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

     
  • 相关阅读:
    Centos R安装
    python 排序函数L.sort()和sorted()
    系统评测指标:准确率(Accuracy)、精确率(Precision)、召回率(Recall)、F-Score
    linux exec使用小结
    linux 日志文件
    数据结构中的八大排序算法
    Boyer-Moore(BM)算法,文本查找,字符串匹配问题
    内存为程序分配空间的四种分配方式
    内部碎片、外部碎片
    函数调用过程栈帧变化详解
  • 原文地址:https://www.cnblogs.com/zhangpan1244/p/1913418.html
Copyright © 2020-2023  润新知