首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >加载CSS未100%工作

加载CSS未100%工作
EN

Stack Overflow用户
提问于 2018-08-11 17:36:37
回答 1查看 241关注 0票数 0

我从this question得到了下面的代码,这个脚本是用来在带有Chrome扩展的Google tasks上的iframe[src="about:blank"]中改变CSS。

代码语言:javascript
复制
// ==UserScript==
// @name    _Style iframe with src="about:blank"
// @match   https://mail.google.com/tasks/canvas
// ==/UserScript==

var targetFrame = document.querySelector("iframe[src='about:blank']");

  if (targetFrame) {
    addStyleToFrame(
      `* {color: red !important}`, targetFrame
    );


    function addStyleToFrame(cssStr, frmNode) {
      var D = frmNode.contentDocument;
      var newNode = D.createElement('style');
      newNode.textContent = cssStr;

      var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
      targ.appendChild(newNode);
    }
  }

这段代码有时会将字体颜色改为红色,但有时却不会,如何让这段代码100%地工作?

图2.修改了第一个代码以等待加载,但仍然不稳定,就像这样(我只是用下面的第二个代码按F5shift + F5来刷新页面。)

代码语言:javascript
复制
// ==UserScript==
// @name    _Style iframe with src="about:blank"
// @match   https://mail.google.com/tasks/canvas
// ==/UserScript==

var targetFrame = document.querySelector("iframe[src='about:blank']");
document.querySelector("iframe[src='about:blank']").onload = function() {
  if (targetFrame) {
    addStyleToFrame(
      `* {color: red !important}`, targetFrame
    );


    function addStyleToFrame(cssStr, frmNode) {
      var D = frmNode.contentDocument;
      var newNode = D.createElement('style');
      newNode.textContent = cssStr;

      var targ = D.getElementsByTagName('head')[0] || D.body || D.documentElement;
      targ.appendChild(newNode);
    }
  }}
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51798363

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档