为什么Gmail一旦动态加载Modernizr就会发疯?

Why does Gmail go bonkers once Modernizr is dynamically loaded in it?

本文关键字：发疯 Modernizr 加载 Gmail 动态 为什么      更新时间：2023-09-26

将此输入Chrome或Safari检查器控制台，在Gmail内部:

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上工作。

Modernizer向<html>标签添加了许多类，其中一个类是js。我在文档中找不到任何描述它代表什么的内容，尽管我怀疑它只是代表JavaScript支持。Google缩小了它们的类，所以它们都是简短的两个字母的项目(可能是生成的)。其中一个恰好是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");});
相关文章：