如何防止加载谷歌图表表格css

【问题标题】：How to prevent loading google charts table css如何防止加载谷歌图表表格css
【发布时间】：2013-01-07 22:46:11
【问题描述】：

每次我使用谷歌图表的表格时，谷歌加载器都会加载一个http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css 这总是而且几乎会杀死我的引导 css，而且我在凌晨 2 点并不讨厌。 :)
注意：我无法修改 table.css 文件。

你知道有什么方法可以阻止加载 CSS 文件吗？

感谢您的帮助。

PS：是的，我用 JS 试过了，但是表格在切换页面时会重新编译，所以我应该在每次分页时替换 table 的类名。

【问题讨论】：

  • “杀死你的引导 css”是什么意思？
  • 意味着它重新定义了我的 css 类，我不能替换 table 元素的 css 范围。所以不幸的是，它正在修改所有内容，因为.google-visualization-table-table * {padding: 2px...etc.} 并且我无法重新定义表格中的所有内容，因为我在其中使用了许多 html 元素，是的，必须是一种方法。 :(

标签： javascript css twitter-bootstrap google-visualization


【解决方案1】：

正如Google Chart Table API Docs 中所见，您可以通过设置cssClassNames 选项来覆盖所使用的CSS 类：

使用此属性将自定义 CSS 分配给表格的特定元素

通过以上链接查看文档以查看cssClassNames 支持的每个属性的完整描述。

非常简单，基于Google Playground Table example，如果您覆盖所有属性，表格将（几乎）没有 Google CSS。

您可以通过在 Playground 示例中复制以下代码来尝试：

// Create and draw the visualization.
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
  cssClassNames: {
    headerRow: 'someclass',
    tableRow: 'someclass',
    oddTableRow: 'someclass',
    selectedTableRow: 'someclass',
    hoverTableRow: 'someclass',
    headerCell: 'someclass',
    tableCell: 'someclass',
    rowNumberCell: 'someclass'
  }
});

这应该让 Twitter Bootstrap CSS 单独存在。

加载的 CSS 仍然改变了一些东西，但如果你简单地删除类 google-visualization-table-table，它似乎就消失了。您应该在每次调用 .draw() 之后执行此操作。

var className = 'google-visualization-table-table';
$('.'+className).removeClass(className);

更新 : 如果你使用 page 选项，你可以在分页时使用这个 sn-p 删除类： 
visualization = new google.visualization.Table(document.getElementById('table'));
visualization.draw(data, {
    page: 'enable',
    pageSize: 2,
    cssClassNames: {
      /* ... */
    }
  });

google.visualization.events.addListener(visualization , 'page',
   function(event) {
       var className = 'google-visualization-table-table';
       $('.'+className).removeClass(className);
   });

不要忘记在初始化时也调用.removeClass()（你应该创建一个函数，比如：http://pastebin.com/zgJ7uftZ）

【讨论】：

  • 是的，但是如果您想附加一个寻呼机，并使用它，每次寻呼时表格都会编译。 :(
  • AFAIK，样式仅在库编译时应用（顺便说一句，表可能处理，但未编译），这意味着一个小的.removeClass() 不会增加太多开销，你可以在彼此旁边做。
  • @Répás 我刚刚在操场上进行了测试，效果很好。您可以使用以下代码进行尝试：pastebin.com/zgJ7uftZ
  • 整洁。 ?) 仍在等待Hello i'm Frank from google and you cried as loud everyone heard it the office and we decided to make a function/param to prevent loading of the css file. 之类的答案，因为这不会发生，您将获得该解决方案 50% 的赏金。谢谢。
【解决方案2】：

给你的body 上课。然后利用该类确定您的 CSS 范围。

<body class="my">..</body>

.my .google-visualization-table-table { /* blah */ }

【讨论】：

  • 我可以修改它或者强制 css 用!important 标志重写谷歌。我不想在.google-visualization-table-table 范围下复制和粘贴我的一半（或整个）引导 css 文件的问题:(
  • 我不明白这与我的回答有什么关系。如果您提供额外的特殊性（例如，使用我在回答中所做的 body 类），您的 CSS 将优先于 Google 的。哦 - 而且从不使用!important。 :)
  • 在我的bootstrap.css 中，我有.btn {padding: 4px 8px}，当我将.btn 放到表格中时，Google 的CSS 将用.stuff * {padding: 2px} 覆盖它。但是表格里面的内容是完全随机的，所以我不知道它会是什么。所以我必须用你的方法重新定义.stuff 中的整个bootstrap.css，不是吗？顺便说一句，我不喜欢important :)
  • 我建议给你的 body 一个 id="myBody"（比类更高的特异性）并限定你所有的 CSS 规则（包括重写所有 bootstrap.css 声明）。这将在 20 分钟内解决您的问题，尽管它并不优雅。使用像 SASS 这样的 CSS 语言应该可以简化这种烦人的转换。
  • @RecursivelyIronic 我通常避免使用id 选择器。在这种情况下，不需要id 提供的额外特异性。也就是说，它肯定不会伤害任何东西。
【解决方案3】：

我的想法仍然像这里的其他人一样，通过更具体的选择器覆盖 google。我认为使用引导程序，可能最简单的方法是这样的：

在你的 html 标签上设置一个id。

HTML

<html id="myHTML">All your html goes here</html>

设置引导程序以加载 id 下的所有选择器。

少

#myHTML {
   font-size: 100%;
   @import: "yourpath/bootstrap.less";
   @import: "yourpath/anyOtherBootstrapFilesYouMightLoad.less";
   etc...
}

请注意，font-size: 100% 是因为 bootstrap.less 具有您希望保留该功能的 html { font-size: 100% }，但如果您不复制 html 的引导调用中的内容，您将失去它。有关进一步说明，请参阅下面的 CSS 输出。

输出

CSS（简要示例输出）

#myHTML {
    font-size: 100%;
}

#myHTML article, 
#myHTML aside, 
#myHTML details, 
#myHTML figcaption, 
#myHTML figure, 
#myHTML footer, 
#myHTML header, 
#myHTML hgroup, 
#myHTML nav, 
#myHTML section {
    display: block;
}

#myHTML html { 
/* this is from the base html call in bootstrap, but will never 
   select anything as it is basically like writing "html html" 
   for a selector, which is why we added the font-size to your 
   LESS code above 
*/
    font-size: 100%;
}

#myHTML .btn {
    etc...
}

通过这样做，您可以看到所有直接的类，如.btn，最终在您的&lt;html&gt; 标记上附加了一个id。这使选择器比 google 的 .google-visualization-table-table * 具有更高的特异性，因为 id 的优先级高于 * 选择器。

【讨论】：

  • 这是非常好的方法。无论如何，我仍在寻找阻止 CSS 加载的方法。 :) +1 也用于使用 LESS。但在我看来，只是通过 ID 选择器访问所有元素会使一切都变慢，不是吗？所以防止 CSS 加载仍然比这种方式更好。
【解决方案4】：

我在那里只看到两种可能性。要么将所有 CSS 选择器更改为具有更高特异性的东西，要么使用 Javascript 删除您不想加载的样式表。

如果您使用 CSS 预处理器，更改 CSS 选择器是没有问题的。你甚至可以只用这一次来改变所有的选择器。

使用 Javascript，您需要一个可以挂起删除样式表的事件侦听器的点。这一点必须在添加样式表之后。

如果您没有这样的观点，您将不得不覆盖 document.createElement（这通常是一种不好的做法）。

这对我有用。由于 IE 

(function () {
    var createElement = document.createElement,
        stylesheetBlacklist = [
            'http://ajax.googleapis.com/ajax/static/modules/gviz/1.0/table/table.css'
        ];
    document.createElement = function (tagname) {
        var e = createElement.apply(this, arguments);
        if (tagname === 'link') {
            if (e.__defineSetter__) {
                var setAttr = e.setAttribute;
                e.__defineSetter__('src', function (val) {
                    e.setAttribute('src', val);
                });
                e.setAttribute = function (attrName, attrVal) {
                    if (attrName !== 'src' || stylesheetBlacklist.indexOf(attrVal) === -1) {
                        setAttr.call(e, attrName, attrVal);
                    }
                }
            } else {
                e.addEventListener('load', function () {
                    if (stylesheetBlacklist.indexOf(this.src) > -1) {
                        this.parentNode.removeChild(this);
                    }
                });
            }
        }
        return e;
    }
}());

当然，这不会阻止任何样式表在样式元素中被@imported。所以它真的更像是一个肮脏的黑客而不是一个解决方案......

很遗憾，Google 的 API 提供了“nocss”选项，但在可视化模块中不支持它。

编辑：如果浏览器支持 defineSetter，它甚至不再加载样式表。

【讨论】：

  • 不错。我同意你的看法，这并不可惜，但应该是一个选择，特别是如果使用带有 * 的 css 匹配所有元素。 :(
  • 更改了它，以便在现代浏览器中甚至不会首先加载样式表。
【解决方案5】：

如果您只是获取 google api 加载内容的 js 副本并将其放入您的服务器中，如下例中的 table.js 中所示，然后评论 google api 调用。

// google.load('visualization', '1', {packages:['table']});

在其中找到字符串 '/table/table.css' 并将其替换为 '/table/../core/tooltip.css'

这样，table.css 从不加载。

<html>
  <head>
    <script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript' src='table.js'></script>
  </head>
  <body>
    <div id='table_div'></div>
    <script type='text/javascript'>
      //      google.load('visualization', '1', {packages:['table']});
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Name');
        data.addColumn('number', 'Salary');
        data.addColumn('boolean', 'Full Time Employee');
        data.addRows([
          ['Mike',  {v: 10000, f: '$10,000'}, true],
          ['Jim',   {v:8000,   f: '$8,000'},  false],
          ['Alice', {v: 12500, f: '$12,500'}, true],
          ['Bob',   {v: 7000,  f: '$7,000'},  true]
        ]);

        var table = new google.visualization.Table(document.getElementById('table_div'));
        table.draw(data, {showRowNumber: true});

    </script>
  </body>
</html>

我不确定这是否违反任何规定，这是一个非常老套的解决方案。 显然，这是有后果的。

【讨论】：

    【解决方案6】：

    我相信这应该可以解决您的问题：Link

    取自链接：

    为你的 CSS 类名添加前缀

     var cssClassNames = {
     'tableCell': 'myTable myBorder'};

    然后像这样改变你的css减速：

    .myTable.myBorder {
 border: 1px solid #6699FF;
 font-size:11px;
 color:#226180;
 padding:135px;
 margin:135px;
 }

    【讨论】：

    • 是的，和原帖一样，我知道这种方法。但我不想加载它。 :)
    【解决方案7】：

    因为你已经安装了 jQuery，所以很容易：

    jQuery(document).ready(function ($) {
  $('*[class*=google-visualization]').attr('class', function() {
    return $(this).attr('class').replace('google', 'yahoo')
  })
});

    【讨论】：

    • #1 in the start post: Yep, I've tried with JS, but the table recompiles on switching page, so i should replace the table's classname every time on paged. 还有问题是防止css不替换表的属性。
    • 每次重新加载页面时都会运行。它会替换你所有的类名，因此 Google 的 CSS 将变得多余。
    • 也可以将此动作绑定到点击寻呼机。
    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript C# Mysql Docker 算法 前端 SpringBoot Redis Vue spring .net 设计模式 .net core c++ kubernetes 数据库 机器学习 大数据 数据结构 微服务 js 人工智能 Go Android 面试 程序员 JVM 云原生 后端 ASP.net core 深度学习 CSS k8s git golang PHP devops Nginx Django React mybatis 架构 多线程 Spring Boot 云计算 LeetCode 分布式