index.html 3.0 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6. <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
  7. <link rel="shortcut icon" href="<%= BASE_URL %>favicon.ico">
  8. <title>
  9. <%= VUE_APP_TITLE %>
  10. </title>
  11. <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.13.2/skins/default/aliplayer-min.css">
  12. </head>
  13. <body>
  14. <noscript>
  15. <strong>
  16. 请开启 JavaScript 功能来使用 <%= VUE_APP_TITLE %>。
  17. </strong>
  18. </noscript>
  19. <iframe id='IEIframe' style='display: none;' width="100%" height="100%" src="/static_admin/ie.html"
  20. frameborder="0"></iframe>
  21. <div id="app"></div>
  22. <script src="https://g.alicdn.com/de/prismplayer/2.13.2/aliplayer-min.js"></script>
  23. </body>
  24. <script>
  25. // 首屏加载速度
  26. window.onload= function() {
  27. console.log(new Date().getTime() - performance.timing.navigationStart,'首屏加载速度')
  28. }
  29. function IEVersion() {
  30. var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  31. var isIE =
  32. userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器
  33. if (isIE) {
  34. return true;
  35. } else {
  36. return false; //不是ie浏览器
  37. }
  38. }
  39. /* 如果是ie浏览器 */
  40. if (IEVersion()) {
  41. document.querySelector('#IEIframe').style.display = 'block'
  42. document.querySelector('#app').style.display = 'none'
  43. }
  44. // dataset 方法兼容 IE 浏览器。ie10及以下不支持dataset
  45. if (window.HTMLElement) {
  46. if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
  47. Object.defineProperty(HTMLElement.prototype, 'dataset', {
  48. get: function () {
  49. var attributes = this.attributes // 获取节点的所有属性
  50. var name = []
  51. var value = [] // 定义两个数组保存属性名和属性值
  52. var obj = {} // 定义一个空对象
  53. for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
  54. if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
  55. // 取出属性名的"data-"的后面的字符串放入name数组中
  56. name.push(attributes[i].nodeName.slice(5));
  57. // 取出对应的属性值放入value数组中
  58. value.push(attributes[i].nodeValue);
  59. }
  60. }
  61. for (var j = 0; j < name.length; j++) { // 遍历name和value数组
  62. obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
  63. }
  64. return obj // 返回对象
  65. }
  66. })
  67. }
  68. }
  69. </script>
  70. </html>