一文解决 IE8兼容性

Rein_Lyon

已于 2023-03-14 16:41:39 修改

阅读量329

点赞数

文章标签：前端 jquery javascript Powered by 金山文档

于 2023-03-03 21:51:37 首次发布

本文链接：https://blog.csdn.net/lhl_19950105/article/details/129327885

版权

html设置

<!-- content: 优先在位置靠后的浏览器模式下运行 此处为 有edge则运行在edge环境下 否则为IE10、IE8 -->
<meta http-equiv="X-UA-Compatible" content="IE=8;IE=10;IE=edge" />

h5c3兼容

[PIE.js] 解决IE8无法使用border-radius、box-shadow、background: linear-gradient()

  <!-- 按版本引入 -->
  <!--[if lt IE 10]>
    <script type="text/javascript" src="PIE-1.0.0/PIE.js"></script>
  <![endif]-->
  <style>
    div {
      position: relative; 
      z-index: 1; // 引入后若元素消失 极大可能是层级降低的原因,提高即可
      border-radius: 10px;
      -pie-background: linear-gradient(180deg, #000000 0%, #aaaaaa 100%);
      behavior: url(PIE.htc);
    }
  </style>
  <!-- 只需要[PIE.js+PIE.htc]，将[PIE.htc]文件放在html所在目录（我放在根目录） -->
  <!-- 公共的css文件中,若dom是js动态创建的,则只有[PIE.htc]文件同级的页面([index.html])有效 -->
  <!-- 
    IE特有的渐变背景属性(无法与PIE条件下的圆角共存,父级overflow:hidden;也没用)
    filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr='#000000',endColorStr='#aaaaaa',gradientType='0');
   -->

[html5shim.js+respond.js] 支持html5和css3的媒体查询

<!-- 引入就行  -->
<!--[if lt IE 9]>
  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

jQuery 1.x

注册事件

  $('div').on()

公共组件

// 比较直观，方便修改、拓展
function initForm () {
  var elNode = {
    'form': $('<form id="myForm" name="myForm" class="my-form"></form>')
        .append($('<div class="my-form-item"></div>').append(
          '<span class="my-form-item--label">姓名</span>',
          '<input name="username" id="username" class="my-form-input" placeholder="请输入用户"/>'
        ))
        .append($('<div class="my-form-item"></div>')
          .append(
            '<span class="my-form-item--label">联系方式</span>',
            '<input name="tel" id="tel" class="my-form-input" placeholder="请输入联系方式"/>'
          ))
  }
  $('body').append(elNode['form'])
}

*ajax-GET跨域

IE10以下发ajax-GET请求会报'no transport'，复制下面一坨或者自己去下[jquery.xdomainrequest.js]

// jquery.xdomainrequest.min.js 引入html即可
(function (a) { if (typeof define === 'function' && define.amd) { define(['jquery'], a) } else if (typeof exports === 'object') { module.exports = a(require('jquery')) } else { a(jQuery) } }(function ($) { if ($.support.cors || !$.ajaxTransport || !window.XDomainRequest) { return $ } var n = /^(https?:)?\/\//i; var o = /^get|post$/i; var p = new RegExp('^(\/\/|' + location.protocol + ')', 'i'); $.ajaxTransport('* text html xml json', function (j, k, l) { if (!j.crossDomain || !j.async || !o.test(j.type) || !n.test(j.url) || !p.test(j.url)) { return } var m = null; return { send: function (f, g) { var h = ''; var i = (k.dataType || '').toLowerCase(); m = new XDomainRequest(); if (/^\d+$/.test(k.timeout)) { m.timeout = k.timeout } m.ontimeout = function () { g(500, 'timeout') }; m.onload = function () { var a = 'Content-Length: ' + m.responseText.length + '\r\nContent-Type: ' + m.contentType; var b = { code: 200, message: 'success' }; var c = { text: m.responseText }; try { if (i === 'html' || /text\/html/i.test(m.contentType)) { c.html = m.responseText } else if (i === 'json' || (i !== 'text' && /\/json/i.test(m.contentType))) { try { c.json = $.parseJSON(m.responseText) } catch (e) { b.code = 500; b.message = 'parseerror' } } else if (i === 'xml' || (i !== 'text' && /\/xml/i.test(m.contentType))) { var d = new ActiveXObject('Microsoft.XMLDOM'); d.async = false; try { d.loadXML(m.responseText) } catch (e) { d = undefined } if (!d || !d.documentElement || d.getElementsByTagName('parsererror').length) { b.code = 500; b.message = 'parseerror'; throw 'Invalid XML: ' + m.responseText; } c.xml = d } } catch (parseMessage) { throw parseMessage; } finally { g(b.code, b.message, c, a) } }; m.onprogress = function () { }; m.onerror = function () { g(500, 'error', { text: m.responseText }) }; if (k.data) { h = ($.type(k.data) === 'string') ? k.data : $.param(k.data) } m.open(j.type, j.url); m.send(h) }, abort: function () { if (m) { m.abort() } } } }); return $ }));

IE版本判断

/* ie版本判断 */
var browserAppName = navigator.appName
var trim_Version = navigator.appVersion.split(";")[1].replace(/[ ]/g, "");
var ie_version = 11
if (browserAppName == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
  ie_version = 8
}
else if (browserAppName == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
  ie_version = 9
}

base64转码

// base64.js 
// var base64 = new Base64(str)
function Base64() { 
 // private property 
 _keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/="; 
 // public method for encoding 
 this.encode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3, enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = _utf8_encode(input); 
  while (i < input.length) { 
   chr1 = input.charCodeAt(i++); 
   chr2 = input.charCodeAt(i++); 
   chr3 = input.charCodeAt(i++); 
   enc1 = chr1 >> 2; 
   enc2 = ((chr1 & 3) << 4) | (chr2 >> 4); 
   enc3 = ((chr2 & 15) << 2) | (chr3 >> 6); 
   enc4 = chr3 & 63; 
   if (isNaN(chr2)) { 
    enc3 = enc4 = 64; 
   } else if (isNaN(chr3)) { 
    enc4 = 64; 
   } 
   output = output + 
   _keyStr.charAt(enc1) + _keyStr.charAt(enc2) + 
   _keyStr.charAt(enc3) + _keyStr.charAt(enc4); 
  } 
  return output; 
 } 
 // public method for decoding 
 this.decode = function (input) { 
  var output = ""; 
  var chr1, chr2, chr3; 
  var enc1, enc2, enc3, enc4; 
  var i = 0; 
  input = input.replace(/[^A-Za-z0-9\+\/\=]/g, ""); 
  while (i < input.length) { 
   enc1 = _keyStr.indexOf(input.charAt(i++)); 
   enc2 = _keyStr.indexOf(input.charAt(i++)); 
   enc3 = _keyStr.indexOf(input.charAt(i++)); 
   enc4 = _keyStr.indexOf(input.charAt(i++)); 
   chr1 = (enc1 << 2) | (enc2 >> 4); 
   chr2 = ((enc2 & 15) << 4) | (enc3 >> 2); 
   chr3 = ((enc3 & 3) << 6) | enc4; 
   output = output + String.fromCharCode(chr1); 
   if (enc3 != 64) { 
    output = output + String.fromCharCode(chr2); 
   } 
   if (enc4 != 64) { 
    output = output + String.fromCharCode(chr3); 
   } 
  } 
  output = _utf8_decode(output); 
  return output; 
 } 
 // private method for UTF-8 encoding 
 _utf8_encode = function (string) { 
  string = string.replace(/\r\n/g,"\n"); 
  var utftext = ""; 
  for (var n = 0; n < string.length; n++) { 
   var c = string.charCodeAt(n); 
   if (c < 128) { 
    utftext += String.fromCharCode(c); 
   } else if((c > 127) && (c < 2048)) { 
    utftext += String.fromCharCode((c >> 6) | 192); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } else { 
    utftext += String.fromCharCode((c >> 12) | 224); 
    utftext += String.fromCharCode(((c >> 6) & 63) | 128); 
    utftext += String.fromCharCode((c & 63) | 128); 
   } 
 
  } 
  return utftext; 
 } 
 // private method for UTF-8 decoding 
 _utf8_decode = function (utftext) { 
  var string = ""; 
  var i = 0; 
  var c = c1 = c2 = 0; 
  while ( i < utftext.length ) { 
   c = utftext.charCodeAt(i); 
   if (c < 128) { 
    string += String.fromCharCode(c); 
    i++; 
   } else if((c > 191) && (c < 224)) { 
    c2 = utftext.charCodeAt(i+1); 
    string += String.fromCharCode(((c & 31) << 6) | (c2 & 63)); 
    i += 2; 
   } else { 
    c2 = utftext.charCodeAt(i+1); 
    c3 = utftext.charCodeAt(i+2); 
    string += String.fromCharCode(((c & 15) << 12) | ((c2 & 63) << 6) | (c3 & 63)); 
    i += 3; 
   } 
  } 
  return string; 
 } 
}