首先要说的，IE浏览器简直是前端人的噩梦，每天一句辣鸡IE，下面我就把我大战IE三天的经历和大家一吐为快

1 梦开始

项目中要使用pdf预览功能，当时我想：这个我熟阿，pdf.js绝对是首选技术，因为它兼容IE9版本以上，Chrome等主流浏览器更是没问题。于是去pdf.js官网直接找到主流版本2.5.207下载下来，经过一把soul后，最终在Chrome浏览器和IE浏览器打开都能正常预览，心里想：这事到这就算结束了

提一嘴：为什么说2.5.207是主流版本，因为该版本对IE的兼容性很好，不少文章都提到过该版本下能完美兼容IE：例如：

vue项目使用pdfjs插件预览pdf 不兼容QQ浏览器和搜狗浏览器问题兼容各大主流浏览器办法

pdf.js兼容ie9浏览器及以上版本

不知道怎么下载2.5.207版本的，可以到我的百度云分享下载

链接：https://pan.baidu.com/s/1zpHKqm4ZlWX5Y4QBqPPvxA?pwd=imnk

提取码：imnk

2 梦初灭

当项目上线后，IE用户发现了这么个BUG：进入预览页面偶尔能浏览正常，偶尔失败，而且失败很频繁

技术经理赶紧找到了我，让我把这个问题解决掉，相信大家都知道，这种偶然性BUG解决起来特别麻烦。

我本地项目跑起来，确实也复现了这个问题，进入页面偶尔行，偶尔不行，注意：有的版本会报undefined这个错误，有的版本会报意外地调用了方法或属性访问，如果你要问我为什么知道的，我就该上图了

我把很多版本都测试了一遍，然并卵，要么就是IE不支持高版本，要么就是报那两个错误，但这两个错误其实都是同个问题导致的，这里暂且先买个关子

报undefined这个错误时，总是会伴随着Unhandled promise rejection undefined的错误

可以看出来这是promise函数下的一个错误，但是由于IE下无法点击错误定位到相关的错误，所以你很难根据源码去找到错误的位置，这就没了思路去解决该错误

报意外地调用了方法或属性访问这个错误时，能点击错误找到对应的错误位置

遇到这些错误，我们仍然习惯性的去网上找办法，看看有没有人和自己的境遇相同

然而搜了大半圈，我惊奇的发现：似乎没有人和我遭遇相同，还是说我使用的姿势不对？于是我问了我另外一些做技术相关的朋友，他们也有用到pdf.js这个插件的，结果在IE也是二次刷新报错，只不过他们客户都不是IE用户，所以暂时没有发现这个问题。

既然没人解决这个问题，我就尝试自己解决。

我开始分析上面代码：第一次进入页面时，代码到这都能正常执行下去，唯有刷新页面后，代码到这里就会抛异常，当时也挺郁闷，尝试了各种try catch，debugger，发现xhr从上面创建到这的变量内容每次都是一样，于是我就郁闷了：为什么只有第一次才好使，后面就不行呢？？

3 梦魇

那个时候，我开始debugger逐行分析，然而每次分析都好像徒劳，因为从上到下，从xhr创建到xhr.open，每个步骤的函数变量内容都是一样的，为什么后面就抛异常呢？我思来想去始终都没琢磨明白。

终于苦心不负有心人！在自己的坚持下，发现了规律：每次我修改代码后，ctrl+s保存代码，由于我在vue.config.js设置了hotOnly: true的热更新机制，所以都会自动重新执行一遍代码编译，而每次编译后页面都会重新刷新加载一遍，我发现IE正是在这种重新编译重新刷新页面的机制下，每次pdf预览都能正常！

这个时候我又疑惑了：为什么重新编译导致的页面刷新能够预览正常，而手动刷新页面就不好使？难道在IE浏览器中页面刷后，变量不都是重新创建、赋值的吗？还是说webpack的机制导致某些变量有缓存，而代码重新编译后才使的这些变量重新被销毁、创建？

这些都是我的猜想，然而即使这些猜想成立，我又该如何去修复？这使我到了进退两难的地步。

4 梦迹追踪

突然我灵光一闪，既然是有什么缓存机制导致的，我清除IE的本地缓存会不会好使呢？我赶紧尝试了一下，发现：天啊！果然如此，每当我清除缓存时，页面就好使了！

于是我为了证明自己的想法，满怀激动的在页面上加入上：

window.localStorage.clear();
window.sessionStorage.clear();

这时哪管的上：这么做会把所有缓存都清理了导致的后果，此时只想证明自己的想法是对的！然而现实就是给你一点糖，又恶狠狠的给你一巴掌！

缓存是都清理，但问题还在！

坚持不气馁的我，又尝试ctrl+shift+del调出IE的清缓存工具，手动清理一遍，结果噢了！！

每次我清理后，刷新页面都能正常的预览，此时IE的清理勾选项如下：

我尝试逐个勾选尝试，直到只勾选第二项：临时Internet文件和网站文件删除时，页面每次刷新都正常

5 修梦之旅

既然知道了问题所在，咱能不能说通过代码给他解决呢？

于是我又就网上搜索相关技术

还是很遗憾，没有相关的技术，我开始寻找这个临时文件的文件夹

好家伙，这么多文件聚在这开party呢，仔细寻找发现有我当前页面的临时文件

我心想：把这临时文件删了会不会就妥了？事实证明我是对的，删除后刷新预览就正常！

6 终梦

问题定位到这，已经花费了两天，是时候做个了结了！

解决方法：

控制项目不产生临时文件
优点：从根源解决问题，没有临时文件，IE也不会出现这个问题

缺点：消耗资源大，由于该设置是在index.html的meta标签中设置，一旦设置所有页面都不再产生临时文件，导致每次访问都需要重新加载资源

在所有的PDF预览页面的路由中新增个时间戳
优点：操作简单

缺点：由于每次新增的时间戳都不一样，所以临时文件都会新增一个，例如我刷新四次当前PDF预览页面，就会产生四个临时文件

我的解决方案：采用第二种方法解决，第一种先暂且不说加上这个标签后，导致所有页面都不会产生临时文件，以至于每次访问每个页面都要加载过一次资源！其次这种方法还需要Nginx的配合，详细可看：

使用Cache-Control: no-store头，禁止IE浏览器保存临时文件，保护机密信息

html设置Cache-Control：no-cache/ no-store来禁止页面缓存，不起作用。

解决思路：

关于pdf.js在IE浏览器二次刷新的报错，我有话说相关推荐

微信浏览器点击选择图片报错 WeiXinJSbridge is not defined
最近做一个h5界面,在个人中心需要有个用户头像修改的功能,然后就用了<input type="file">, 在手机浏览器运行很正常,但是在微信浏览器就出现了异常,用w ...
微信小程序获取二维码scene报错40129
java后端向微信服务端https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN请求获取带参二维码的时候,由于 ...
解决浏览器驱动和浏览器版本不匹配的报错：This version of ChromeDriver only supports Chrome version 97
报错信息 selenium.common.exceptions.SessionNotCreatedException: Message: session not created: This versi ...
使用Python+selenium实例化Microsoft Edge或Chrome浏览器对象和常见的报错
实例化谷歌浏览器对象: from selenium import webdriver # 实例化一个浏览器对象 wb = webdriver.Chrome(executable_path='D:\py ...
Google浏览器Chrome不能上网并且报错DNS_PROBE_FINISHED_NO_INTERNET
今天帮朋友解决了一个很奇怪的问题,在Win10上,Google浏览器Chrome不能上网,并且报错DNS_PROBE_FINISHED_NO_INTERNET,但是其他浏览器,比如360.Edge却能 ...
微信公众平台 - 微信内置浏览器 WeixinJSBridge.invoke(‘xxx‘) API 报错：system:access_denied（常见于微信支付、分享朋友圈/转发好友等功能）解决方案
前言场景描述:做公众号网页项目,在微信内置浏览器中运行自己的 H5 网站,需要接入微信支付.微信分享等其他能力,因此使用 WeixinJSBridge 这个 API,不料却发生报错. 如下报错所示, ...
ie浏览器下调试 console.log() 报错SCRIPT5007: 缺少对象
原来使用火狐和谷歌浏览器调试,直接用console.log(param);是没问题的但是最近这个项目要兼容ie浏览器,发现报错SCRIPT5007: 缺少对象在具备调试功能的浏览器上,window ...
【不得不看的几种js监听浏览器返回,关闭,刷新】
监听浏览器切换页面 //切换页面document.addEventListener('visibilitychange', function () { //浏览器切换事件if (document.vi ...
【重磅推荐】基于truffle-contract库实现的以太坊solidity合约调用案例（注：web3.js切勿和truffle-contract库同时使用,否则报错，无法修复！）
1.一个基于truffle-contract库实现的以太坊solidity智能合约调用案例! 2. 注意:truffle-contract库和web3.js使用nodej或import同时导入转码的时 ...

关于pdf.js在IE浏览器二次刷新的报错，我有话说