在Chrome上更改具有src ="about:blank"的iframe内容的CSS [英] Change CSS of the content of an iframe, that has src="about:blank", on Chrome

问题描述

我正在尝试使用此代码在 Google任务上应用新设计扩展名为Tampermonkey 的页面.

I'm trying this code to apply new design on the Google Tasks page with the extension Tampermonkey.

当我尝试html{ display: none !important }时，它不会显示任何内容，因为html标记不在iframe下. 但是，我不能在iframe[src="about:blank"]元素下进行修改. 我应该如何修改才能使其正常工作?

When I try html{ display: none !important } then It displays nothing as the html tag is not under iframe. however, I couldn't modify under iframe[src="about:blank"] element. How should I modify to make it work?

shot 1 .:在iframe[src="about:blank"]

shot 1. : Doesn't work for inside of iframe[src="about:blank"]

// ==UserScript==
// @name     test
// @match    https://mail.google.com/tasks/canvas
// @match    about:blank
// @grant    GM_addStyle
// ==/UserScript==

GM_addStyle ( `    
* {color: red !important}
` );

推荐答案

是的，使用src="about:blank"为iframe编写脚本可能很棘手，因为普通的用户脚本机制无法正常工作. (当前， @match about:blank不起作用，但无论如何在这里使用它是一个坏主意，因为它会产生全局性的副作用.)

Yes, scripting for iframes with src="about:blank" can be tricky as the normal userscript mechanisms do not work the same. (Currently, @match about:blank does not work, but it would be a bad idea to use it here anyway, since it would have global side effects.)

幸运的是，在Chrome上，运行Tampermonkey脚本时，带有src="about:blank"的iframe几乎总是带有documentElement，因此，如果您只是添加CSS ，通常不需要等待.

Fortunately, on Chrome, iframes with src="about:blank" almost always have a documentElement by the time a Tampermonkey script runs, so you do not normally need to wait if you are just adding CSS.

这是一个完整的工作脚本，其样式类似于第一个iframe:

Here is a complete working script, that styles that first iframe:

// ==UserScript==
// @name    _Style iframe with src="about:blank"
// @match   https://mail.google.com/tasks/canvas
// @grant   none
// ==/UserScript==

//-- Adjust the following selector to match your page's particulars, if needed.
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);
}

---

如果<iframe>标签是用javascript创建的，或者其他延迟阻碍了上述操作...

使用 waitForKeyElements 的iframeSelector参数来解决该问题.

---

If the <iframe> tag is javascript created, or other delays hamper the above...

Use the iframeSelector parameter of waitForKeyElements to work around that.

技巧是选择一个始终出现在完成的iframe中的节点，并将其传递给waitForKeyElements.
该节点应该是唯一的.
但是对于以下示例，我使用.goog-toolbar:first作为快速的第一次尝试.

The trick is to pick a node that always appears in the finished iframe, and pass that to waitForKeyElements.
The node should be unique.
But for the following example I used .goog-toolbar:first as a quick first attempt.

这是完整的工作脚本:

// ==UserScript==
// @name     _Style iframe with src="about:blank"
// @match    https://mail.google.com/tasks/canvas
// @require  https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
// @require  https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant    GM_addStyle
// @grant    GM.getValue
// ==/UserScript==
//- The @grant directives are needed to restore the proper sandbox.

const desiredStyles = `* {color: red !important;}`;

waitForKeyElements (
    ".goog-toolbar:first",
    addCSS_Style,
    false,
    "iframe[src='about:blank']"
);

function addCSS_Style (jNode) {
    var frmBody = jNode.closest ("body");
    //-- Optionally add a check here to avoid duplicate <style> nodes.
    frmBody.append (`<style>${desiredStyles}</style>`);
}

注意:

1. GM_addStyle()在这种情况下不起作用，因此我们添加了具有框架感知功能的样式.
2. Google页面使用:多个嵌套的iframe；复杂页面(重新)处理；和HTML的信息气味"较差.简而言之，它们是邪恶的，日新月异，编写脚本可能会很痛苦.因此，这个简单的示例将起作用，但这仅是该问题的范围.对于更复杂的情况，请提出一个新问题，并准备好大量啤酒资金.

1. GM_addStyle() will not work in this case, so we add styles with a frame-aware function.
2. Google pages use: multiple, nested iframes; complex page (re)mangling; and HTML with poor "info scent". In short they are evil, ever-shifting, and can be a pain to script for. So, this simple example will work, but that's all that's in scope for this question. For more complex scenarios, open a new question and have plenty of beer money on hand.

这篇关于在Chrome上更改具有src ="about:blank"的iframe内容的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！