PDF.js跨域请求解决方案，附用户PDF阅读页码监听，监听用户是否离开/最小化/TAB页面（兼容性不好）

因项目需要，需要跨域加载PDF且主流浏览器兼容！
1.下载PDF.js
2.解压上传服务器目录如下
3.现在网上大部分都是以文件流解决PDF跨域问题，如果PDF文件比较大，页面转流很慢，推荐修改PDF文件所在的服务器nginx.conf 如下图添加代码，打码的第一条为你的请求域名:“http://www.baidu.com”,如果你是盗链或者无权限还是走文件流吧

 add_header Access-Control-Allow-Origin 'http://www.baidu.com';
 add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
 add_header Access-Control-Expose-Headers 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';

4.修改下载的原生文件

使用了会飞的IT的修改方式

5.页面引用Iframe

<iframe id="headerIframe" ref="iframe" src="/webpdf/web/viewer.html?url=http://www.baidu.com/1988.pdf" width="100%" height="100%"frameborder="0"></iframe>

//Iframe内“/webpdf/web/viewer.html”为上传服务器PDFJS的目录，截止到这里已经可以正常跨域打开PDF文件了
<script>
    var adata = "huzhen120"
    var b_win = document.getElementById("headerIframe").contentWindow;
    b_win.addEventListener("tReady", function (e) {
        var msg = e.detail.msg
        console.log("getmsg：" + msg)
    });
</script>

//以上JS为监听用户浏览PDF页面的监听方式，找到/webpdf/web/viewer.js文件，修改
<script>
//获取用户阅读页码
    function webViewerPageChanging(evt) {
      var page = evt.pageNumber;
      //添加代码
      var bEvent = new CustomEvent("tReady", {
        detail: {
          msg: page,
          doc: document
        },
        bubbles: true,
        cancelable: true
      });
      window.dispatchEvent(bEvent);
	//添加结束
      PDFViewerApplication.toolbar.setPageNumber(page, evt.pageLabel || null);
      PDFViewerApplication.secondaryToolbar.setPageNumber(page);

      if (PDFViewerApplication.pdfSidebar.isThumbnailViewVisible) {
        PDFViewerApplication.pdfThumbnailViewer.scrollThumbnailIntoView(page);
      }

      if (typeof Stats !== 'undefined' && Stats.enabled) {
        var pageView = PDFViewerApplication.pdfViewer.getPageView(page - 1);

        if (pageView && pageView.stats) {
          Stats.add(page, pageView.stats);
        }
      }
    }
    </script>

	//再送一块监听，判断用户是否离开页面
	<script>
	var hiddenProperty = 'hidden' in document ? 'hidden' :
        				 'webkitHidden' in document ? 'webkitHidden' :
                     	 'mozHidden' in document ? 'mozHidden' :null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 		'visibilitychange');
    var onVisibilityChange = function () {
        if (!document[hiddenProperty]) {
            console.log('页面激活');
        } else {
            console.log('页面非激活')
        }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
	</script>