tags: ‘IE9及以上’

categories: ‘IE9及以上’


引入的文件

让IE认识@media媒体查询，让低版本IE认识html5新增的标签

  1. <!-- 
  2.     1. html5shiv.min.js  让低版本IE认识html5新增的标签
  3.     2. respond.min.js    让IE认识@media 媒体查询
  4. -->
  5. <!--[if lt IE 9]>
  6.     <script src="../assets/common/js/html5shiv.min.js"></script>
  7.     <script src="../assets/common/js/respond.min.js"></script>
  8. <![endif]-->

JQuery使用1点几版本

(注！jquery-2.0以上版本不再支持IE 6/7/8) 并不是最新的版本就最好的，而是根据您项目需求所适合的版本！

ajax的使用

  1.     // IE 浏览器需要手动开启下面的，否则ajax不生效
  2.     jQuery.support.cors=true;

使用了自制图标库—icomoon

https://icomoon.io/app/#/select

input需要双击上传的原因

？？？？？？IE9下上传文件是否可以调用input的点击事件

  1. 需要将隐藏的input按钮的大小足够的大，因为如果点击在input输入框中的话，就需要点击两次
  3. input[type=file] {
  4.     font-size: 100px;
  5. }

让浏览器以什么模式渲染

  1. <meta http-equiv="X-UA-Compatible" content="IE=10">

动态引入JS

  1. // 动态引入js文件
  2. Utils.prototype.importJS = function (url, callback) {
  3.     var script = document.createElement("script");
  4.     script.type = "text/javascript";
  5.     script.src = url;
  6.     script.onload = function(){
  7.         typeof callback == 'function' ? callback() : '';
  8.     };
  9.     document.body.appendChild(script);
  10. }

兼容IE8的数组indexof方法的解决

  1. if (!Array.prototype.indexOf){
  2.     Array.prototype.indexOf = function(elt /*, from*/)
  3.     {
  4.         var len = this.length >>> 0;
  5.         var from = Number(arguments[1]) || 0;
  6.         from = (from < 0)
  7.             ? Math.ceil(from)
  8.             : Math.floor(from);
  9.         if (from < 0)
  10.             from += len;
  12.         for (; from < len; from++)
  13.         {
  14.             if (from in this &&
  15.                 this[from] === elt)
  16.                 return from;
  17.         }
  18.         return -1;
  19.     };
  20. }

解决IE9中console未定义的问题

  2. window.console = window.console || (function(){
  3.     var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile = c.clear = c.exception = c.trace = c.assert = function(){};
  4.     return c;
  5. })();

css预处理器可以使用

就是简化开发者代码的编写，利用工具生成浏览器能识别的CSS代码
例如：使用“scss”的CSS预处理器，使用koala这个工具来生成CSS代码，其实IDEA也能编译CSS代码

使用jsviews

jsRender/jsViews 引入外部模板引擎

例子

一：模板文件

模板文件 text.tmpl.html

  1. <p>名称：{^{:name}}</p>

模板文件 nav.html

  1. {{for nav}}
  2.     <p>{^{:#data}}</p>
  3. {{/for}}

二、调用模板
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  7.     <script src="jsrender.min.js"></script>
  8.     <script src="template.js"></script>
  9. </head>
  10. <body>
  11.     <p>首页</p>
  13.     <text id="text"><text>
  15.     <div id="bbb"><div>
  16. </body>
  18. <script>
  19.     // 调用模板
  20.     // new TempRender({ src: './', name: 'text', selector: '#text', data: {name: 'www'} });
  22.     // 调用自定义模板文件名
  23.     new TempRender({ srcCustom: true, src: './nav.html', selector: '#bbb', data: { nav: ['www', 'abc', '123']} });
  24. </script>
  25. </html>

三、封装调用模板TempRender方法
  1. (function () {
  2.     var that = ''
  3.     var TempRender = function (options) {
  4.         // console.log(options);
  6.         that = this
  7.         this.path = options.srcCustom ? options.src : options.src + options.name + '.tmpl.html';  // 模板文件所在位置（包含文件名）【此路径根据调用文件的位置为起始位置】
  8.         this.selector = options.selector;   // 调用模板的标签 id class等，如 '#nav'
  9.         this.data = options.data;   // 数据
  11.         this.initRender(this);  // 此处传入this是为了防止that被污染而导致页面渲染错误
  12.     }
  14.     // 此处方法内不能使用that，如果出现多出调用，使用that会污染数据
  15.     TempRender.prototype.initRender = function (obj) {
  16.         $.when($.get(obj.path))
  17.          .done(function (tmplData) {
  18.             // tmplData     模板文件内容
  20.             $.templates({tmpl: tmplData});
  22.             console.log(obj.selector, $.render.tmpl(obj.data))
  24.             $(obj.selector).html($.render.tmpl(obj.data));
  25.         })
  26.     }
  28.     window.TempRender = TempRender
  29. })()

参数说明

  1. srcCustom     自定义模板文件名，不使用公共的后缀
  3. src         必传，模板文件所在位置（不包含文件名）【此路径根据调用文件的位置为起始位置】
  5. name         srcCustom不填时，必传name。模板文件的前缀，后缀默认 '.tmpl.html'， 可在template.js中修改。
  7. selector     必传，调用模板的标签 id class等，如 '#nav'
  9. data         数据

自定义jsrender标签

自定义标签的声明

  1. // 自定义jsrender标签
  2.     // a标签的自定义（没有子级的a标签）
  3.     function renderTagA1(url, name, isActive, show) {
  4.         if(show) {
  5.             if(isActive) {
  6.                 return '<li class="active"><a class="theme_style_slide_color theme_style_slide_color_h" href="' + url + '"> ' + name + ' </a></li>';
  7.             }else {
  8.                 return '<li><a class="theme_style_slide_color theme_style_slide_color_h" href="' + url + '"> ' + name + ' </a></li>';
  9.             }
  10.         }
  11.     }
  13.     // 加载自定义jsrender标签
  14.     $.views.tags("renderTagA1", renderTagA1);

自定义标签的使用

  1. <ul>
  2.     {^{for list}}
  3.         {{renderTagA1 url title isActive show /}}
  4.     {{/for}}
  5. </ul>

头部信息

  1.         <meta charset="utf-8">
  2.         <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  3.         <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

更改网址，但是不进行跳转

  1. window.history.pushState({}, 0, window.location.href + '?id='+ACKData.data.id);

CSS更改

解决获取焦点之后，输入框移动的问题

  1. input {
  2.       vertical-align: top;
  3. }

调整input中placeholder的样式

  1. input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  2.     color: #ccc;
  3. }
  4. input::-moz-placeholder { /* Firefox 19+ */
  5.     color: #ccc;
  6. }
  7. input:-ms-input-placeholder { /* IE 10+ */
  8.     color: #ccc;
  9. }
  10. input:-moz-placeholder { /* Firefox 18- */
  11.     color: #ccc;
  12. }

解决金额符号￥在IE上显示和谷歌上显示不一致的问题，解决方案：字体库改成微软雅黑

  1. html{
  2.     overflow-x: hidden;
  3.     font-family: 微软雅黑;
  4. }

清除IE下的右侧的叉

  1. input[type=text]::-ms-clear{display: none;}

rgba() ie兼容

  1. @mixin bg($bgColor, $color) {
  2.     background-color: $bgColor;
  3.      // 兼容IE8
  4.     filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=##{$color}, endColorstr=##{$color});
  5.     -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#438ACA,endColorstr=#438ACA) !important;
  6. }

background-size: cover; ie8兼容

  1. @mixin bgSize($bgUrl, $bgPath) {
  2.     background: url($bgUrl) no-repeat;
  3.     background-size: cover;
  5.     /*兼容ie8 路径要使用绝对路径*/
  6.     -ms-behavior: url('#{$bgPath}guarantee/src/assets/common/backgroundsize.min.htc');
  7.     behavior: url('#{$bgPath}guarantee/src/assets/common/backgroundsize.min.htc');
  8. }

定义input placeholer的样式

  1. /*input placeholder css*/
  2.     .placeholder_css:-webkit-input-placeholder {
  3.         color: #ccc !important;
  4.     }
  5.     .placeholder_css:-ms-input-placeholder {
  6.         color: #ccc !important;
  7.     }
  8.     .placeholder_css:-moz-placeholder {
  9.         color: #ccc !important;
  10.     }
  11.     .placeholder_css:placeholder {
  12.         color: #ccc !important;
  13.     }
  14.     .placeholder_css::placeholder {
  15.         color: #ccc !important;
  16.     }

定义滚动条样式

  1.     .scrollStyle2 {
  2.         scrollbar-base-color: #ccc;
  3.         //scrollbar-base-color: #134087;
  4.         scrollbar-3dlight-color:#ccc;
  5.         scrollbar-highlight-color: #ccc;
  6.         scrollbar-track-color: #e9e9e9;
  7.         scrollbar-arrow-color: #ccc;
  8.         scrollbar-shadow-color:#e9e9e9;
  9.         //scrollbar-dark-shadow-color: #011433;
  10.     }
  12.     .scrollStyle2::-webkit-scrollbar {
  13.         width: 6px;
  14.         height: 6px;
  15.         background-color: #e9e9e9;
  16.     }
  17.     /*定义滚动条轨道 内阴影+圆角*/
  18.     .scrollStyle2::-webkit-scrollbar-track  {
  19.         border-radius: 2px;
  20.         background-color: #e9e9e9;
  21.     }
  23.     /*定义滑块 内阴影+圆角*/
  24.     .scrollStyle2::-webkit-scrollbar-thumb  {
  25.         border-radius: 2px;
  26.         background-color: #CCCCCC;
  27.     }

项目使用

公告栏的滚动

  2. intervalNotice();
  4. function intervalNotice() {
  5.     clearInterval(noticeTimer);
  6.     noticeTimer = setInterval(function () {
  7.         $("div.notice ul").animate({
  8.             marginTop: '-35px'
  9.         }, 500, function () {
  10.             $(this).css({marginTop:"0"}).find(":first").appendTo(this);
  11.         })
  12.     }, 2000);
  13. }
  15. $("div.notice").mouseover(function () {
  16.     clearInterval(noticeTimer);
  17. }).mouseleave(function () {
  18.     intervalNotice();
  19. })

更改元素高度

  1. $(".calcuHeight").css("height", document.documentElement.clientHeight-224 + "px");

滚动到底部请求数据

  1. $(".search-result").scroll(function() {
  2.     // console.log("滚动条到顶部的垂直高度：" +  $(".search-result").scrollTop() );
  3.     // console.log("滚动条盒子高度：" +  $(".search-result").height() );
  4.     // console.log("页面的文档高度：" +  $(".search-result > ul").height() );
  6.     // 滚动到底部的计算
  7.     if($(this).scrollTop() + $(this).height() > $(".search-result > ul").height()) {
  8.         // ge.data.insureProjectInfo.status限制滚动到底部在上一次请求结束之前只请求一次
  9.         if (ge.data.insureProjectInfo.status) {
  10.             // 请求下一页的数据
  11.             ge.data.insureProjectInfo.status = false;
  12.             ge.data.insureProjectInfo.page++;
  13.             ge.queryProject();
  14.         }
  15.     }
  16. });

清除input type=’file’内容

  1. Utils.prototype.clearFile = function(waitClearFile) {
  2.     var $file = $("" + waitClearFile);
  3.     if ($file.length > 0) {
  4.         $file.after($file.clone().val(""));
  5.         $file.remove();
  6.     }
  7. }

PDF的展示的插件—-PDFjs—（兼容到IE8）

下载PDFjs案例

分页插件（兼容IE8）

下载分页插件

JS悬浮彩色气泡文字标签云动画特效（兼容IE9）

下载JS悬浮彩色气泡文字标签云动画特效

兼容IE7的复制

参考文献

clipboard.js！前端实现复制剪切功能，这个小插件仅仅支持到IE9+

IE的window对象提供了clipboardData对象用于实现复制功能

重新封装clipboard实现完美兼容

  1. var ClipBoard = function(obj){
  2.     this.handlerID = obj.handlerID || null;
  3.     this.textID = obj.textID || null;
  4.     this.type = obj.type || 'copy';
  5.     this.isAttr = obj.isAttr || false;
  6.     this.isPlugin = true;
  7.     this.isActive = false;
  9.     var ua = window.navigator.userAgent;
  10.     var is_IE = ua.match(/(rv:|msie )\d+/i);
  11.     var IE_Version = is_IE ? parseInt(is_IE[0].split(/:| /g)[1]) : 9;
  12.     if(IE_Version <= 8){
  13.         this.isPlugin = false;
  14.     }
  15.     var handlerObj = document.getElementById(obj.handlerID);
  16.     if(typeof this.type === 'string'){
  17.         handlerObj.setAttribute('data-clipboard-action',this.type)
  18.     }else{
  19.         throw error('type类型错误！');
  20.     }
  21.     if(!obj.isAttr && obj.textID){
  22.         handlerObj.setAttribute('data-clipboard-target','#'+obj.textID);
  23.     }
  24. }
  25. ClipBoard.prototype.attach = function(){
  26.     if(this.isActive){ // 对象已经被实例化
  27.         return;
  28.     }
  29.     var tip = '复制';
  30.     if(this.type === 'cut'){
  31.         tip = '剪切';
  32.     }
  33.     this.isActive = true;
  34.     if(this.isPlugin){
  35.         var clip = new Clipboard('#'+this.handlerID);
  36.         clip.on('success', function(e) {
  37.             alert(tip+'成功，可通过Ctrl+V进行粘贴！');
  38.         });
  39.         clip.on('error', function(e) {
  40.             alert(e.action+'操作失败！');
  41.         });
  42.     }else if(window.attachEvent){
  43.         var self = this;
  44.         var handlerObj = document.getElementById(this.handlerID);
  45.         handlerObj.attachEvent('onclick',function(){
  46.             var text = '';
  47.             if(self.isAttr){// 复制属性值
  48.                 text = handlerObj.getAttribute('data-clipboard-text');
  49.             }else{
  50.                 var textObj = document.getElementById(self.textID);
  51.                 text = textObj.value || textObj.innerHTML;
  52.             }
  53.             window.clipboardData.setData('Text',text);
  54.             alert(tip+'成功，可通过Ctrl+V进行粘贴！');
  55.         });
  56.     }else{
  57.             alert('浏览器版本过低，不支持该插件！')
  58.     }
  59. }

用法

首先引入clipboard.js以及上面那段代码，然后通过new的方式去实例化控件

  1. // html
  2. <p id="copy-p" class="a">将被复制的p文本</p>
  3. <button id="copy-btn">复制</button>
  4. <script src="/path/clipboard.js"></script>
  6. // js
  7. var c1 = new ClipBoard({
  8.     handlerID: 'copy-btn',
  9.     textID: 'copy-p',
  10.     isAttr: false,
  11.     type:'copy'
  12. });
  13. c1.attach(); // 触发复制/剪切功能

参数说明

handlerID：用于点击事件的控件，在html标签里面加上id这个属性；
textID：被复制文本所在的容器的id；
isAttr：用于说明复制的内容是否为控件中的属性值，默认为false（此时复制的内容是textID内的文本），如果设置为true，前提需要在控件这个标签上增添一个属性：data-clipboard-text，属性值就是你要复制的文本；eg: 复制
type：操作的类型，取值为copy/cut（复制/剪切），默认是copy

兼容IE9及以上 - 图1

日期控件的使用

dcalendar.picker

  1. // 日期控件的渲染---调用
  2. $('.mydatepicker').dcalendarpicker({
  3.     format:'yyyy-mm-dd'
  4. });
  5. $('#mycalendar').dcalendar();

兼容IE8的简单jQuery日期选择器插件

兼容IE9及以上 - 图2

参考网址

兼容IE8的图片上传,不需要转base64展示图片———好像不兼容IE10

案例代码

判断上传文件是否是图片类型—-未验证是否可以使用

  1. Base64 = function (imgFile, callback) {
  2.     var _this = this;
  3.     $(imgFile).change(function(){
  4.         // 定义方法
  5.         // console.log($(this));
  6.         console.dir($(this));
  7.         var pattern = /(\.*.jpg$)|(\.*.png$)|(\.*.jpeg$)|(\.*.gif$)|(\.*.bmp$)/;
  8.         if(!pattern.test($(this)[0].value)) {
  9.             alert("请上传jpg/jpeg/png/gif/bmp格式的照片！");
  10.             $(this).focus();
  11.         }else{
  12.             var base64value = "";
  13.             //判断浏览器类型
  14.             if(document.all){
  15.                 //兼容IE
  16.                 base64value = Base64.prototype.ieBase64($(this)[0].value, $(this),callback);
  17.             }else{
  18.                 //兼容主流浏览器
  19.                 base64value = Base64.prototype.mainBase64($(this)[0].files[0], $(this), callback);
  20.             }
  21.         }
  22.     });
  23. };
  25. Base64.prototype = {
  26.     ieBase64: function(file, ele, callback){
  27.         var realPath, xmlHttp, xml_dom, tmpNode, imgBase64Data;
  28.         realPath = file;//获取文件的真实本地路径.
  29.         // console.log("file", file)
  30.         xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
  31.         xmlHttp.open("POST",realPath, false);
  32.         xmlHttp.send("");
  33.         xml_dom = new ActiveXObject("MSXML2.DOMDocument");
  34.         tmpNode = xml_dom.createElement("tmpNode");
  35.         tmpNode.dataType = "bin.base64";
  36.         tmpNode.nodeTypedValue = xmlHttp.responseBody;
  37.         imgBase64Data = "data:image/bmp;base64," + tmpNode.text.replace(/\n/g,"");
  38.         callback(imgBase64Data, ele);
  39.         // console.log("IE 兼容");
  40.     },
  41.     mainBase64: function(file, ele, callback){
  42.         var fileReader, imgData;
  43.         fileReader = new FileReader();
  44.         fileReader.readAsDataURL(file);
  45.         fileReader.onload = function () {
  46.             imgData = this.result; //base64数据
  47.             // console.log(imgData);
  48.             // console.log(callback)
  49.             callback(imgData, ele);
  50.         }
  51.     },
  52. }
  1. /* 兼容IE8的图片上传,不需要转base64展示图片 */
  2.     Utils.prototype.previewImage = function (imgFile, ele) {
  3.         var filextension=imgFile.value.substring(imgFile.value.lastIndexOf("."),imgFile.value.length);
  4.         filextension=filextension.toLowerCase();
  5.         // console.log("imgFile",imgFile)
  6.         if(filextension == '.zip'){
  7.             ele.style.display = "block";
  8.             // console.log("执行zip");
  9.             // document.getElementsByClassName("img_show").innerHTML = "<img id='img1' width='120px' height='100px' src='"+path+"'/>";
  10.             ele.innerHTML = "<img id='img1' width='100%' height='100%' src='/assets/common/img/zip.png'/>";
  12.         }else if ((filextension!='.jpg')&&(filextension!='.gif')&&(filextension!='.jpeg')&&(filextension!='.png')&&(filextension!='.bmp'))
  13.         {
  14.             // console.log("pathtop,sorry")
  15.             alert("对不起，系统仅支持标准格式的照片，请您调整格式后重新上传，谢谢 !");
  16.             imgFile.focus();
  17.         }
  18.         else
  19.         {
  20.             // console.log("path")
  21.             var path;
  22.             if(document.all && document.addEventListener && window.atob)//IE
  23.             {
  24.                 path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
  25.                 ele.style.display = "block";
  26.                 ele.innerHTML = "<img width='100%' height='100%' src='"+path+"'/>";
  27.             }else if(document.all) {
  28.                 // console.log("IE")
  29.                 imgFile.select();
  30.                 // console.log(imgFile.select())
  31.                 path = document.selection.createRange().text;
  32.                 // console.log("path",document.selection.createRange())
  33.                 console.dir(document.selection.createRange(), document.selection)
  34.                 // console.log(path)
  35.                 ele.innerHTML="";
  36.                 ele.style.display = "block";
  37.                 ele.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";// 使用滤镜效果
  38.                 document.getElementsByClassName("img_show")[0].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src=\"" + path + "\")";// 使用滤镜效果
  39.             }else{
  40.                 path=window.URL.createObjectURL(imgFile.files[0]);// FF 7.0以上
  41.                 ele.style.display = "block";
  42.                 ele.innerHTML = "";
  43.                 ele.innerHTML = "<img width='100%' height='100%' src='"+path+"'/>";
  44.             }
  45.         }
  47.     }

文件上传

/todo 暂时需要在前面增加判断，判断是否是IE9以上的浏览器，如果是则判断文件的大小，如果大于文件的大小则不予上传/
IE9 不支持 files 属性

使用jquery.form.js的文件进行上传(兼容IE9)，废弃使用ajaxfileupload.js

动态更改元素高度

  1. $(".calcuHeight").css("height", document.documentElement.clientHeight-205 + "px");

文件下载

  1. window.open(data.guaranteeInfo.guaranteeUrl, '_blank');
  2. /*if (!!window.ActiveXObject || "ActiveXObject" in window) {
  3.     // console.log("下载保单")
  4.     var elemIF = document.createElement("iframe");
  5.     elemIF.src = data.guaranteeInfo.guaranteeUrl;
  6.     elemIF.style.display = "none";
  7.     document.body.appendChild(elemIF);
  8.     elemIF.click()
  9. } else {
  10.     var link = document.createElement('a');
  11.     link.setAttribute("download", "发票");
  12.     link.href =  data.guaranteeInfo.guaranteeUrl;
  13.     link.click();
  14. }*/

字体图标

可以使用字体图标

选择页面中iframe中的元素

  1. /*放大*/
  2. $("body").off("click", ".fangdaEvent").on("click", ".fangdaEvent", function () {
  3.     $("#iframeContent").contents().find("#zoomIn").click();
  4. })

打印

使用jQuery.print.min.js
使用print.min.js

  1. /*打印*/
  2. $("body").off("click", ".printEvent").on("click", ".printEvent", function () {
  3.     // jQuery.print.min.js --- 可能只兼容谷歌打印
  4.     /*$(".induranceInfo").print({
  5.         globalStyles:true,//是否包含父文档的样式，默认为true
  6.         mediaPrint:false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
  7.         stylesheet:null,//外部样式表的URL地址，默认为null
  8.         noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
  9.         iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
  10.         append:null,//将内容添加到打印内容的后面
  11.         prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
  12.         deferred: $.Deferred()//回调函数
  13.     })*/
  15.     // 使用print.min.js
  16.     // printJS('/assets/page/myGuaranteeDetail/img/fapiao.pdf');
  18.     $(".transfer_pay > .content").print({
  19.         globalStyles:true,//是否包含父文档的样式，默认为true
  20.         mediaPrint:false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
  21.         stylesheet:null,//外部样式表的URL地址，默认为null
  22.         noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
  23.         iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
  24.         append:null,//将内容添加到打印内容的后面
  25.         prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
  26.         deferred: $.Deferred()//回调函数
  27.     })
  29.     // printPage();  // 自己定义的方法
  30. })
  33. /*打印*/
  34.     function  printPage(obj){
  35.         var bdhtml=window.document.body.innerHTML; //获取当前页的html代码   
  36.         var sprnstr="<!--startprint-->"; //设置打印开始区域    
  37.         var eprnstr="<!--endprint-->"; //设置打印结束区域 
  38.         var prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+18); //从开始代码向后取html    
  39.         var prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr)); //从结束代码向前取html    
  40.         window.document.body.innerHTML = prnhtml;   //将html代码 放在页面上，方便打印
  41.         //打印之前设置IE打印时不打印页眉 、页脚
  42.         if (!!window.ActiveXObject || "ActiveXObject" in window) {
  43.             remove_ie_header_and_footer();
  44.         }
  45.         print.portrait = false;//横向打印
  46.         //打印
  47.         window.print();
  48.         // window.document.body.innerHTML=bdhtml;
  49.     }
  50.     //打印之前设置IE打印时不打印页眉 、页脚
  51.     function remove_ie_header_and_footer() {
  52.         var hkey_root, hkey_path, hkey_key;
  53.         hkey_path = "HKEY_CURRENT_USER\\Software\\Microsoft\\Internet Explorer\\PageSetup\\";
  54.         try {
  55.             var RegWsh = new ActiveXObject("WScript.Shell");
  56.             RegWsh.RegWrite(hkey_path + "header", "");          //设置页眉为空
  57.             RegWsh.RegWrite(hkey_path + "footer", ""); //设置页脚为空
  58.         } catch (e) {}
  59.     }

展示的富文本插件

quill.core.css

封装的提示框

  1. /** 提示框
  2.     * 使用： 引入 base.js
  4.     * 参数 options
  5.     type        类型 success 成功 || info || warning 警告 || error 错误
  6.     msg         提示信息
  7.     hideTime    提示框消失时间
  8.     top         最终展示位置
  10.     * 调用
  11.     Utils.funWebTip({
  12.     type: 'warning',
  13.     msg: "aa"
  14. })
  15.     */
  16. Utils.prototype.funWebTip = function (options){
  17.     var option = {
  18.         type: "success",  // success || info || warning || error
  19.         name: "alert" + new Date().getTime(),
  20.         top: '26.5%',
  21.         hideTime: 3000
  22.     }
  24.     $.extend(option, options);
  26.     var html =  '<section class="webTipBg alert-' + option.type + " " + option.name + '">' +
  27.         '<div class="webTip">' +
  28.         '<i></i>' +
  29.         '<div class="tip-message">' + option.msg + '</div>' +
  30.         '</div>' +
  31.         '</section>'
  33.     $("body").append(html);
  35.     var dom = $("." + option.name);
  37.     dom.animate({
  38.         top: option.top,
  39.         opacity: 1
  40.     }, 500);
  42.     setTimeout(function (){
  43.         dom.fadeOut().remove();
  44.     }, option.hideTime)
  45. }
  1. /*提示框*/
  2. /********************************************************************************/
  3. .webTipBg {
  4.   /*display: none;*/
  5.   opacity: 0;
  6.   max-width: 80%;
  7.   position: fixed;
  8.   top: 50%;
  9.   left: 50%;
  10.   -webkit-transform: translate(-50%, -50%);
  11.   -moz-transform: translate(-50%, -50%);
  12.   -ms-transform: translate(-50%, -50%);
  13.   -o-transform: translate(-50%, -50%);
  14.   transform: translate(-50%, -50%);
  15.   z-index: 9999;
  16.   font-size: 14px;
  17.   border-radius: 4px;
  18.   padding: 8px 25px;
  19.   display: flex;
  20.   justify-content: space-between; }
  22. .webTipBg.alert-success {
  23.   background-color: #f0f9eb;
  24.   color: #67c23a; }
  26. .webTipBg.alert-info {
  27.   background-color: #E5F1FF;
  28.   color: #B9CAFF; }
  30. .webTipBg.alert-warning {
  31.   background-color: #fdf6ec;
  32.   color: #e6a23c; }
  34. .webTipBg.alert-error {
  35.   background-color: #fef0f0;
  36.   color: #f56c6c; }
  38. .webTipBg div.webTip {
  39.   display: flex;
  40.   justify-content: flex-start;
  41.   align-items: center; }
  43. .webTipBg div.webTip i {
  44.   border-radius: 50%;
  45.   width: 16px;
  46.   height: 16px;
  47.   margin-right: 8px;
  48.   display: inline-block;
  49.   vertical-align: middle; }
  51. .webTipBg div.webTip .tip-message {
  52.   display: inline-block;
  53.   vertical-align: middle; }
  55. .webTipBg.alert-success .webTip i {
  56.   background: url(/assets/common/img/big_icon_success.png) no-repeat center center;
  57.   background-size: cover; }
  59. .webTipBg.alert-info .webTip i {
  60.   background: url(/assets/common/img/big_icon_jijingshi@2x.png) no-repeat center center;
  61.   background-size: cover; }
  63. .webTipBg.alert-warning .webTip i {
  64.   background: url(/assets/common/img/big_icon_jingshib@2x.png) no-repeat center center;
  65.   background-size: cover; }
  67. .webTipBg.alert-error .webTip i {
  68.   background: url(/assets/common/img/big_icon_cuowu@2x.png) no-repeat center center;
  69.   background-size: cover; }
  71. /*图标公共样式*/
  72. .del-small-public {
  73.   position: absolute;
  74.   border-radius: 50%;
  75.   background-color: #ccc;
  76.   top: -6px;
  77.   right: -8px;
  78.   z-index: 1;
  79.   text-align: center;
  80.   line-height: 12px;
  81.   color: #fff; }

提示图片的压缩文件

搜索内容在IE下搜索时乱码问题

使用encodeURIComponent的方法来解决

iframe可以使用什么遮盖Object

  1. <iframe id="iframe1" src="about:blank" frameBorder="0" marginHeight="0" marginWidth="0" style="position:relative; visibility:inherit; top:0px;left:0px;height:100%;width:100%; z-Index:-1;opacity: 0; filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);" allowTransparency="true"></iframe>

解决IE中new Date()转换出来的不是日期格式的问题

IE下不能将带有-的日期格式转换成其他的日期格式

  1. var date = new Date(projectInfo.dueTime.replace(/-/g,'/'));

解决IE的缓存问题

还是在请求后面添加时间戳

gulp打包

  1. 打包的版本号可以是动态的更改