12月06, 2018

webuploader的小坑

今天在帮同事定位一个IE8的:runtime error,利用调用栈,找到了是webuploader的问题。

翻了一下github issue,原因是本地没有装flash插件。但其实同事是装了的,于是猜测可能是flash版本的问题。

那么我们还需要在代码中处理一把,如果用户没装flash或者版本比较低,就提示让用户重新装。

代码如下:

import { isFlashInstalled, isHTML5Upload, activeBrowserFlashInstaller, getFlashVersion } from './flash';

// 新增flash版本过低或者未装时的提示
if (isFlashInstalled() === false && isHTML5Upload() === false && getFlashVersion() < 12) {
    // 在IE下会出来提示安装flash的弹窗
    activeBrowserFlashInstaller();
    return;
}
// flash.js
import $ from 'jquery';

let version = '0.0';
let flashInstalled = false;
try {
  version = navigator.plugins['Shockwave Flash'];
  version = version.description;
  flashInstalled = true;
} catch (ex) {
  try {
    version = new ActiveXObject('ShockwaveFlash.ShockwaveFlash')
      .GetVariable('$version');
      flashInstalled = true;
  } catch (ex2) {
    flashInstalled = false;
  }
}
if (version) {
  version = version.match(/\d+/g);
  version = parseFloat(version[0] + '.' + version[1], 10);
} else {
  version = 0;
}

export function isFlashInstalled() {
  return flashInstalled;
}

export function isHTML5Upload() {
  return !!(window.Blob && window.FileReader && window.DataView) || false;
}

export function getFlashVersion() {
  return version;
}

export function activeBrowserFlashInstaller() {
  const triggerId = '_flash_installer_trigger';
  if(!isFlashInstalled() && !document.getElementById(triggerId)) {
    const object = `<div id="${triggerId}" style="display:none;"><object type="application/x-shockwave-flash" width="0" height="0" style="outline:0"
      codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"
      ${typeof ActiveXObject !== 'undefined' ? 'classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' : ''}
       ></object></div>`;
    $(document.body).append(object);
  }
}

效果如下:

alt

本文链接:www.my-fe.pub/post/webuploader-bug-note.html

-- EOF --

Comments

评论加载中...

注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。