【问题标题】:Apply a Greasemonkey/Tampermonkey userscript to an iframe将 Greasemonkey/Tampermonkey 用户脚本应用到 iframe
【发布时间】:2016-10-03 15:56:20
【问题描述】:

如何让用户脚本在 inside iframe 中运行?

【问题讨论】:

  • 这是一个已知的错误:Greasemonkey issue 2574 声明“Greasemonkey 4 至今仅检测顶层的导航事件,因此它有效地将 @noframes 应用于每个脚本。”

标签: iframe userscripts


【解决方案1】:

在 Greasemonkey(以及 Tampermonkey 和大多数用户脚本引擎)中,脚本将在 iframe 上自动触发,如果它符合 @include@exclude 和/或 @match 指令。
而且,一个流行的问题是how to stop Greasemonkey from firing on iframes

所以,如果你的脚本有这样的匹配:

@match https://fiddle.jshell.net/*

无论它们是否出现在 iframe 中,它都会在 jsFiddle“输出”页面上触发。


如果您想触发 JUST iframe 内容:

然后您将检查 window.self 属性。
例如,假设您有一个目标页面,例如:

<body>
    <h1>I'm some webpage, either same-domain or not.</h1>
    <iframe src="//domain_B.com/somePath/somePage.htm">
...

然后你可以使用如下脚本:

// ==UserScript==
// @name    _Fires specially on domain_B.com iframes
// @match   *://domain_B.com/somePath/*
// ==/UserScript==

if (window.top === window.self) {
    //--- Script is on domain_B.com when/if it is the MAIN PAGE.
}
else {
    //--- Script is on domain_B.com when/if it is IN AN IFRAME.
    // DO YOUR STUFF HERE.
}

重要:

随着Greasemonkey 4, iframes handling is severely crippled 的发布(除此之外,还有许多其他事情被破坏了)。
仍然可以与 Tampermonkey、Violentmonkey 和几乎所有其他用户脚本引擎一起正常工作。
强烈建议 (including by Greasemonkey itself) 不要使用 Greasemonkey 4 或更高版本。

【讨论】:

  • 请注意,这是 GreaseMonkey 4 中的 broken
  • 谢谢,@Mathnerd314。更新了答案。请注意,现在 GM4 有一个单独的标签,以将其与运行良好的 GM 版本区分开来。
  • Greasemonkey 似乎不建议您不要使用 4 或更高版本。他们只是通知它破坏了向后兼容性。
【解决方案2】:

这是iframe没有位置触发@include@match的情况的解决方案。

这适用于 Greasemonkey 4。

我们必须等待每一帧都加载完毕才能对其进行操作。我通过使用waitForKeyElements.js 来做到这一点,它等待匹配给定CSS 选择器的元素,就像循环遍历document.querySelectorAll("selector") 中的匹配项,然后将给定函数应用于响应:

// ==UserScript==
// @include https://blah.example.com/*
// @require https://git.io/waitForKeyElements.js
// ==/UserScript==

function main(where) {
  // do stuff here with  where  instead of  document
  // e.g. use  where.querySelector()  in place of  document.querySelector()
  // and add stylesheets with  where.head.appendChild(stylesheet)
}

main(document); // run it on the top level document (as normal)

waitForKeyElements("iframe, frame", function(elem) {
  elem.removeAttribute("wfke_found"); // cheat wfke's been_there, use our own
  for (let f=0; f < frames.length; f++) {
    if (!frames[f].document.body.getAttribute("been_there")) {

      main(frames[f].document);

      frames[f].document.body.setAttribute("been_there", 1);
    }
  }
});

请注意,所选元素只是一个占位符,表示 iframe 已加载。我们从waitForKeyElements 中删除了“一直在那里”跟踪器,因为稍后可能会再次加载框架(我们不能只使用iframe,因为它的内容已加载到其他地方)。

当我们知道一个框架已经加载时,我们循环遍历每个框架并寻找我们的标记,即框架的body 中的一个 HTML 属性,称为been_there(如&lt;body been_there="1"&gt;)。如果它丢失了,我们可以在框架的文档上运行我们的main() 函数。完成后,我们添加 been_there 属性,这样我们就不会再次被触发。

【讨论】:

    【解决方案3】:

    请注意,如果您要为用户脚本制作 chrome 扩展程序,还需要将 "all_frames": true 添加到清单中,否则您的扩展程序将无法在 iframe 上运行。

    清单文件示例:

    "content_scripts": [
        {
          "matches": ["*://*/*"],
          "all_frames": true,
          "js":["dont.js"],
          "run_at":"document_start"
        }
      ]
    

    示例用例:https://github.com/NavinF/dont

    【讨论】:

      【解决方案4】:

      https://stackoverflow.com/a/55837286/12469007 的解决方案对我不起作用,因此我对其进行了一些更改。它适用于 Greasemonkey 4.10。

      // ==UserScript==
      // @include https://blah.example.com/*
      // @require https://git.io/waitForKeyElements.js
      // ==/UserScript==
      
      function main(where) {
        // do stuff here with  where  instead of  document
        // e.g. use  where.querySelector()  in place of  document.querySelector()
        // and add stylesheets with  where.head.appendChild(stylesheet)
      }
      
      main(document); // run it on the top level document (as normal)
      
      waitForKeyElements("iframe, frame", function(elem) {
        elem.addEventListener("load", function () {
          elem.removeAttribute("wfke_found");
        });
        main(elem.contentDocument);
      });
      

      最大的变化是它现在即使在 iframe 导航时也能正常工作。

      【讨论】:

      • 我可以确认这也适用于用于 Goggle Chrome 的 Tampermonkey,并且与原始答案相比看起来更加优雅。非常感谢,这真的很有帮助!
      【解决方案5】:

      iframe.contentWindow.document 允许在 FireMonkey 中获取 iframe 内容,例如:

      const iframeDocument = document.getElementById('iframe_id').contentWindow.document;
      const iframeAnchors = iframeDocument.evaluate(
        '//a',
        iframeDocument,
        null,
        XPathResult.ORDERED_NODE_SNAPSHOT_TYPE,
        null);
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2018-04-29
        • 1970-01-01
        • 2018-05-15
        • 1970-01-01
        • 2013-10-23
        • 2014-01-08
        • 2022-08-06
        • 2018-09-14
        相关资源
        最近更新 更多