Tampermonkey 在 iframe 中获取表格？

Question

我正在尝试增强我们其中一种工具的 GUI，但我失败了。 UI 由一个带有多个 iFrame 的主体组成，我想从中选择一个并稍微更改内容。

问题是当使用我的选择器frame = $("iframe[src*='/vs/virt.jsp']"); 时，它看起来好像找不到元素。

这里是代码（除了日志不做任何事情）：

// ==UserScript==
// @name UI Tweaks
// @version 0.2
// @description Does stuff
// @match https://*.local/vs/*
// @run-at          document-end
// @grant none
// @require http://code.jquery.com/jquery-latest.js
// ==/UserScript==


console.log(window.location);
console.log("before");
console.log($());
frame = $("iframe[src*='/vs/virt.jsp']");
console.log(frame.attr("id"));
console.log("after");

在页面上运行它时，我得到了两个页面加载，它显示了位置对象，之前和之后。但是框架对象完全是空的。

但是，当页面加载后在 Chrome 开发者控制台中运行相同的东西时，我得到了我正在寻找的元素。

我尝试了不同的方法来仅在页面加载后加载脚本等，但它仍然不起作用。

更新：

我补充说：

// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js

然后试试这个：

waitForKeyElements (
    "iframe[src*='/vs/virt.jsp']",
    test()
);

function test(){
    frame = $("iframe[src*='/vs/virt.jsp']");
    console.log(frame.attr("id"));
}

还是一样的结果。值得注意的是，我使用 Tampermonkey，但也许是一样的？

编辑 2：

function timer() {
  frame = $("iframe[src*='/vs/virt.jsp']");
    console.log(frame.attr("id"));
    setTimeout(timer, 1000);
}

timer();

它一直输出“未定义”，而如果我在 Chrome 开发者控制台中尝试它，我会得到对象。好像 Tampermonkey 没有访问权限？

Answer 1

由于您的 iFrame 与您的主页位于同一域中，因此使用 waitForKeyElements() 定位 iframe 更改相对简单。它的设计考虑到了这种可能性。
传递一个有效的 iFrame 选择器作为第四个参数。

例如：

1. 转到this jsFiddle page。它动态创建了一个 id 为 tstIframe 的 iframe，它看起来像：

        

2. 当您单击按钮时，它会在 iframe 中添加一行文本——在一个类为 comment 的 div 中。

3. 假设我们要处理那个文本，那么这个脚本就会这样做：

   // ==UserScript==
   // @name        Dynamic iframe content manipulator
   // @match       http://fiddle.jshell.net/5zqfthx7/*
   // @require     http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js
   // @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
   // @grant       GM_addStyle
   // ==/UserScript==
   /*- The @grant directive is needed to work around a design change
       introduced in GM 1.0.   It restores the sandbox.
   */
   waitForKeyElements (
       ".comment",
       styleComment,
       false,
       "#tstIframe"
   );
   
   function styleComment (jNode) {
       jNode.css ("background", "lime");
   }
   

4. 当您安装该脚本时，重新加载页面并按下按钮，您会看到每一行都被着色，如下所示：

        

---

注意事项：

1. 在这种情况下不要使用@noframes。 Tampermonkey 没有在这种 iframe 操作中正确应用它 - 特别是如果 iframe 没有 src。
2. 使用@require 时，请始终使用@grant 而不是none，除非您确切地知道页面的JS 和脚本将如何交互和冲突。
3. 在 Firefox 上提供了其他选项。 Chrome 仍然有挑剔/有限的 iframe 支持。
4. 最后，由于您的 iFrame 有一个 src，您通常可以只为它编写脚本，就好像它是唯一的页面一样。调整您的 @match 等指令以触发iframe 并可能将代码包装在 if (self !== top) {... } 结构中。
   例如，请参阅this answer。