You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.

browser-compatibility.js 4.5 kB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. const unsupportFeatures = (()=>{
  2. const features = [
  3. {name: "Optional chaining (?.) / 可选链操作符(?.)", version:{firefox:74,chrome:80,safari:13.4}, url: "https://caniuse.com/mdn-javascript_operators_optional_chaining", test: ()=>!Boolean(eval("undefined?.undefined || true"))},
  4. {name: "Nullish coalescing operator (??) / 空值合并操作符(??)", version:{firefox:72,chrome:80,safari:13.4}, url: "https://caniuse.com/mdn-javascript_operators_nullish_coalescing", test: ()=>!Boolean(eval("undefined ?? true"))},
  5. {name: "BigInt value (1n) / BigInt 数据类型(1n)", version:{firefox:79,chrome:67,safari:14}, url: "https://caniuse.com/bigint", test: ()=>!Boolean(eval("1n"))},
  6. {name: "CSS selector: :is() / CSS选择器: :is()", version:{firefox:78,chrome:88,safari:14}, url: "https://caniuse.com/css-matches-pseudo", test: ()=>!Boolean(eval("document.querySelector(':is()') || true"))},
  7. {name: "CSS selector: :where() / CSS选择器: :where()", version:{firefox:78,chrome:88,safari:14}, url: "https://caniuse.com/mdn-css_selectors_where", test: ()=>!Boolean(eval("document.querySelector(':where()') || true"))},
  8. {name: "CSS selector: :not() / CSS选择器: :not()", version:{firefox:84,chrome:88,safari:9}, url: "https://caniuse.com/css-not-sel-list", test: ()=>!Boolean(eval("document.querySelector(':not(html)') || true"))},
  9. //{name: "Private class fields (#name) / 类私有域(#name)", version:{firefox:90,chrome:74,safari:14.5}, url: "https://caniuse.com/mdn-javascript_classes_private_class_fields", test: ()=>!Boolean(eval("class test {#v = 0;}; true;"))},
  10. ]
  11. return features.filter(feature=>{
  12. try {
  13. return feature.test();
  14. } catch (e) {
  15. if (e.name !== 'SyntaxError') throw e // Throw the error if it is not a SyntaxError
  16. return true;
  17. }
  18. })
  19. })();
  20. if (unsupportFeatures.length) {
  21. const browserVersion = ((UA)=>{
  22. let regRes;
  23. if (regRes = /\b(Firefox|Chrome)\/([\d\.]+)/ig.exec(UA)) {
  24. return `${regRes[1]} ${regRes[2]}`;
  25. } else if (regRes = /\bVersion\/([\d\.]+)\s+.*\b(Safari)\//ig.exec(UA)) {
  26. return `${regRes[2]} ${regRes[1]}`;
  27. } else {
  28. UA;
  29. }
  30. })(navigator.userAgent);
  31. //支持的最低版本
  32. const needBrowserVersion = unsupportFeatures.reduce((pre,{version})=>{
  33. pre.firefox = Math.max(pre.firefox,version.firefox);
  34. pre.chrome = Math.max(pre.chrome,version.chrome);
  35. pre.safari = Math.max(pre.safari,version.safari);
  36. return pre;
  37. }, {firefox:0,chrome:0,safari:0});
  38. let alertStr;
  39. if (/^zh-(?:han(?:s|t)-)?/.test(navigator.language)) {
  40. alertStr =
  41. `🙁浏览器内核版本太老<br>
  42. 您的浏览器版本为: ${browserVersion}<br>
  43. 您的浏览器内核不支持本程序使用的以下技术
  44. <ol>
  45. ${unsupportFeatures.map(feature=>`<li><a href="${feature.url}">${feature.name}</a></li>`).join('')}
  46. </ol>
  47. 请更新您的浏览器内核到 Firefox(火狐) ≥ ${needBrowserVersion.firefox} 或 Chrome(谷歌) ≥ ${needBrowserVersion.chrome} 或 Safari ≥ ${needBrowserVersion.safari}。`;
  48. } else {
  49. alertStr =
  50. `🙁Browser kernel is too old<br>
  51. Your browser is: ${browserVersion}<br>
  52. Your browser kernel does not support the following technologies used by this program:
  53. <ol>
  54. ${unsupportFeatures.map(feature=>`<li><a href="${feature.url}">${feature.name}</a></li>`).join('')}
  55. </ol>
  56. Please update your browser core to Firefox ≥ ${needBrowserVersion.firefox} or Chrome ≥ ${needBrowserVersion.chrome} or Safari ≥ ${needBrowserVersion.safari}`;
  57. }
  58. //alert(alertStr);
  59. document.write(alertStr);
  60. }
  61. let denied = ((UA)=>{
  62. return /\b(?:MicroMessenger|WeChat|Weixin|QQ|AliApp)\b/.test(UA);
  63. })(navigator.userAgent);
  64. if (denied) {
  65. const mask = document.createElement("div");
  66. mask.id = "denied-mask";
  67. const css = `
  68. #denied-mask {
  69. position: fixed;
  70. height: 100%;
  71. width: 100%;
  72. top: 0;
  73. left: 0;
  74. background-color: #000A;
  75. }
  76. .alert {
  77. font-size: 2em;
  78. font-weight: bold;
  79. color: white;
  80. text-align: center;
  81. }
  82. `;
  83. const style = mask.appendChild(document.createElement("style"));
  84. style.appendChild(document.createTextNode(css));
  85. const alertDiv = mask.appendChild(document.createElement("div"));
  86. alertDiv.className = "alert"
  87. alertDiv.appendChild(document.createTextNode("请勿使用内置浏览"));
  88. alertDiv.appendChild(document.createElement("br"));
  89. alertDiv.appendChild(document.createTextNode("点击菜单使用正常浏览器打开↗"));
  90. window.addEventListener("load", ()=>{
  91. document.body.appendChild(mask);
  92. });
  93. }

智龙迷城队伍图制作工具