2020-03-16 | 浏览器 | UNLOCK

浏览器兼容性解决方案

文件下载

blob 下载(edeg 不支持 a 标签下载)

downloadByBlob(objResponse) {
    let arrRes = objResponse.data;
    const objBlob = new Blob([arrRes], {
      type: "application/octet-binary"
    }); // 构造一个blob对象来处理数据
    //读取文件名
    if (!objResponse.headers["content-disposition"]) {
      let strResult = "";
      let objResult = new DataView(arrRes);
      for (let intNum = 0; intNum < objResult.byteLength; intNum++) {
        strResult += String.fromCharCode(objResult.getUint8(intNum));
      }
      return strResult;
    } else {
      let strFileName =
        decodeURI(objResponse.headers["content-disposition"].split(";")[1].split("=")[1]) || "";
      // edeg 不支持a标签下载
      if ("msSaveOrOpenBlob" in navigator) {
        window.navigator.msSaveOrOpenBlob(objBlob, strFileName);
        return;
      }
      // 对于<a>标签,只有 Firefox 和 Chrome(内核) 支持 download 属性
      // IE10以上支持blob但是依然不支持download
      if ("download" in document.createElement("a")) {
        // 支持a标签download的浏览器
        const objLink = document.createElement("a"); // 创建a标签
        objLink.download = strFileName; // a标签添加属性
        objLink.style.display = "none";
        objLink.href = URL.createObjectURL(objBlob);
        document.body.appendChild(objLink);
        objLink.click(); // 执行下载
        URL.revokeObjectURL(objLink.href); // 释放url
        document.body.removeChild(objLink); // 释放标签
      } else {
        // 其他浏览器
        navigator.msSaveBlob(objBlob, strFileName);
      }
      return "";
    }
  }

pdf 文件下载乱码

使用 axios 下载, 文件下载后内容乱码是由于没有设置 responseType

responseType:'blob'
// 返回的数据直接是一个 blob 对象,构造 a 标签下载即可

元素滚动

input 的 maxlength

  • maxlength 设置为 0, 在 IE 和其他浏览器中均不可输入
  • maxlength 设置为负数(-1), 在 IE 中不可输入,Chrome 中可正常输入

使用内核是 IE 还是谷歌内核

搜狗浏览器:

  • 使用域名访问:Chrome 内核、支持 postMessage
  • 使用 ip 访问:IE 内核、不支持 postMessage

window.opener

主流浏览器都支持:
IE11、Chrome、火狐、360、搜狗。。。等

不支持的浏览器

  • qq 浏览器兼容模式
  • 搜狗浏览器兼容模式