Question

我正在尝试增强我们的某个工具的GUI，但我失败了。用户界面由一个包含多个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选择器作为第4个参数传递。

例如：

转到this jsFiddle page。它动态创建ID为tstIframe的iframe，它看起来像：
当您点击该按钮时，它会向iframe添加一行文字 - 位于类comment的div中。

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

// ==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");
}

当您安装该脚本时，重新加载页面并按下按钮，您将看到每个新行变为彩色，如下所示：

注意：

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

Tampermonkey在iframe中获取表格？

1 个答案: