为什么一旦将 Modernizr 动态加载到 Gmail 中，它就会变得疯狂？答案

【问题标题】：Why does Gmail go bonkers once Modernizr is dynamically loaded in it?为什么一旦将 Modernizr 动态加载到 Gmail 中，它就会变得疯狂？
【发布时间】：2013-03-06 05:20:36
【问题描述】：

将其输入到 Gmail 内的 Chrome 或 Safari 检查器控制台：

function load(url,cb){var x=document.body.appendChild(document.createElement('script'));x.src=url;x.onload=function(){console.log("Dynamically loaded "+url);if(cb){cb();}};if(!cb){x.setAttribute('async','')}}
load("https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js",function(){alert("Modernizr loaded");});

导致大部分文本的布局变得疯狂。

这可以解释吗？我希望我的工具（包括运行一个动态加载 Modernizr 的小书签）在 Gmail 上工作。

【问题讨论】：

大声笑...定义疯子

标签： javascript webkit gmail modernizr

【解决方案1】：

Modernizer 为<html> 标签添加了很多类，其中一个类是js。我在文档中找不到任何描述它代表什么的东西，尽管我怀疑它只是代表 JavaScript 支持。谷歌已经缩小了他们的类，所以它们都是短的两个字母项目（可能是生成的）。其中一个恰好也是js，这导致大量文本居中。

事实上，要取消它，只需在动态加载脚本后从<html> 标记中删除js 类，它就会自行修复。

这是一个固定版本：

function load(url,cb){var x=document.body.appendChild(document.createElement('script'));x.src=url;x.onload=function(){console.log("Dynamically loaded "+url);if(cb){cb();}};if(!cb){x.setAttribute('async','')}}
load("https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js",function(){var htmlElement = document.getElementsByTagName("html")[0]; htmlElement.className = htmlElement.className.replace
      ( /(?:^|\s)js(?!\S)/g , '' );    alert("Modernizr loaded");});

【讨论】：