Vue2.x 和 jQuery2.x 适配兼容 IE9+总结

 

目录

一、jQuery2.x

01、placeholder不生效

02、部分第三方包不兼容 IE 浏览器

二、Vue2.x

01、placeholder不生效

02、get 请求缓存问题

03、解决IE低版本浏览器不支持location对象的origin属性

---

1、Vue2.x 最多支持 IE9+ ，不支持 IE9 以下
2、Vue3.x 目前不支持 IE浏览器
3、IE浏览器不支持：flex布局、 ES6及高级语法

一、jQuery2.x

01、placeholder不生效

在 index.html 引入第三方包：【注意该包中不能含有ES6语法】

<script src="https://cdn.bootcdn.net/ajax/libs/jquery-placeholder/2.3.1/jquery.placeholder.min.js"></script>

jquery-placeholder (v2.3.1) - A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yet | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务A jQuery plugin that enables HTML5 placeholder behavior for browsers that aren’t trying hard enough yethttps://www.bootcdn.cn/jquery-placeholder/并编写以下代码：

    <script>
        $(function () {
            $('input').placeholder({
                customClass: 'my-placeholder'
            })
        });
    </script>

.my-placeholder {
  color: #919eab;
}

02、部分第三方包不兼容 IE 浏览器

本地引入 polyfill.js 

/*! http://mths.be/codepointat v0.1.0 by @mathias */
if (!String.prototype.codePointAt) {
    (function() {
      'use strict'; // 严格模式，needed to support `apply`/`call` with `undefined`/`null`
      var codePointAt = function(position) {
        if (this == null) {
          throw TypeError();
        }
        var string = String(this);
        var size = string.length;
        // 变成整数
        var index = position ? Number(position) : 0;
        if (index != index) { // better `isNaN`
          index = 0;
        }
        // 边界
        if (index < 0 || index >= size) {
          return undefined;
        }
        // 第一个编码单元
        var first = string.charCodeAt(index);
        var second;
        if ( // 检查是否开始 surrogate pair
          first >= 0xD800 && first <= 0xDBFF && // high surrogate
          size > index + 1 // 下一个编码单元
        ) {
          second = string.charCodeAt(index + 1);
          if (second >= 0xDC00 && second <= 0xDFFF) { // low surrogate
            // http://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae
            return (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
          }
        }
        return first;
      };
      if (Object.defineProperty) {
        Object.defineProperty(String.prototype, 'codePointAt', {
          'value': codePointAt,
          'configurable': true,
          'writable': true
        });
      } else {
        String.prototype.codePointAt = codePointAt;
      }
    }());
  }

二、Vue2.x

01、placeholder不生效

自定义全局指令：

Vue.directive('placeholder', {
  inserted: function(el, binding, vnode) {
    // 如果兼容placeholder则终止
    if (('placeholder' in document.createElement('input'))) {
      return
    }
    // select暂时不支持(input为只读状态时)
    var isReadOnly = el.getAttribute('readOnly')
    if (isReadOnly) return

    // 由于第三方input组件都包了一个外层
    var input = el.querySelector('input')
    var placeholder = input.getAttribute('placeholder')
    var span = document.createElement('span')

    // .ie-placeholder 可根据类名自定义样式
    span.className = 'ie-placeholder'
    span.innerText = placeholder
    // 位置设置
    span.style.position = 'absolute'
    // span.style.left = input.offsetLeft + '4' + 'px'
    span.style.left = '14' + 'px'
    input.parentNode.style.position = 'relative'
    input.parentNode.appendChild(span)
    el.addEventListener('click', function(event) {
      if (event.target.nodeName === 'SPAN') {
        // span.style.display = "none";
        input.focus()
      }
    })
    span.addEventListener('click', function(event) {
      // span.style.display = "none";
      input.focus()
    })
    input.onblur = function(event) {
      if (!event.target.value) {
        span.style.display = 'inline'
      }
    }
    input.oninput = function(event) {
      if (event.target.value) {
        span.style.display = 'none'
      } else {
        span.style.display = 'inline'
      }
    }
  },

  // 开始更新
  unbind: function(el) {
    var input = el.querySelector('input')
    input.onfocus = input.onblur = input.oninput = null
  }
})

并编写以下代码：

.ie-placeholder {
  font-size: 16px;
  color: #9c9c9c;
}

使用实例：

<div v-placeholder class="form-item-input">
   <input v-model="account" type="text" placeholder="请输入账号/手机号码/证件号码" :readonly="isReadOnly">
</div>

02、get 请求缓存问题

在请求拦截之中设置：

// request拦截器
service.interceptors.request.use(
  config => {
    let headers = 'application/json'
    // 设置 headers 传参类型
    if (config.opts) {
      if (config.opts.ContentType) {
        headers = config.opts.ContentType
      }
    }
    // 设置请求格式
    config.headers['Content-Type'] = headers
    config.headers['Token'] = localStorage.getItem('Token')

    // 处理 ie浏览器之中 请求缓存问题
    if (config.method === 'post' || config.method === 'POST') {
      config.data = {
        ...config.data,
        _t: Date.parse(new Date()) / 1000
      }
    } else if (config.method === 'get' || config.method === 'GET') {
      config.params = {
        _t: Date.parse(new Date()) / 1000,
        ...config.params
      }
    }

    return config
  },
  err => {
    return Promise.reject(err)
  }
)

03、解决IE低版本浏览器不支持location对象的origin属性

低版本的IE浏览器是不支持window.location.origin，但是支持window.location

因此可以通过window.location对象进行拼凑实现对window.location.origin的兼容。

/**
 * 获取window.location.origin
 * 解决IE低版本浏览器不支持location对象的origin属性
 */
export function getWindowOrigin() {
  const origin = window.location.origin
  if (!origin) {
    const { port } = window.location
    console.log(window.location.protocol + '//' + window.location.hostname + (port ? ':' + port : ''))
    return window.location.protocol + '//' + window.location.hostname + (port ? ':' + port : '')
  } else {
    console.log(origin)
    return origin
  }
}