需要帮助在 Tampermonkey 用户脚本中使用 JQuery 选择和更改 iFrame 中 div id 的高度

Question

我正在尝试将 iFrame 中 div id 的高度从 226px 更改为 660px。是的，iFrame 源来自同一个域。

我正在尝试 select div id dojox_grid__View_1 inside iFrame id finesse_gadget_1。我已经从这里尝试了最高票数的解决方案：

How to get the body's content of an iframe in Javascript?

但是没有用。所以，我运行这个命令：

console.log($("iframe#finesse_gadget_1").contents().find("#dojox_grid__View_1"));

这是结果：

jQuery.fn.init [div#dojox_grid__View_1.dojoxGridView, prevObject: jQuery.fn.init(1), context: document, selector: "#dojox_grid__View_1"]

但是，我不明白这是什么意思？

这是HTML:

<div id="finesse-container">
   <div id="finesse-gadgets-workspace">
      <div id="panel_home">
         <iframe id="finesse_gadget_1">
            <html><body>
               <div id="teamBody">
                  <div id="teamRoster">
                     <div id="hideFocus">
                        <div id="dojoxGridMasterView">
                           <div id="dojox_grid__View_1" style="height: 226px;"></div>
                        </div>
                     </div>
                  </div>
               </div>
            </body></html>
         </iframe>
      </div>
   </div>
</div>

我能成功的唯一方法select iFrame 是这样的（document.getElementById 没用）：

$('iframe#finesse_gadget_1', parent.document.body)

这是我试过但没有成功的代码：

var iFrame = $('iframe#finesse_gadget_1', parent.document.body);
var iFrameDocument = iFrame.contentDocument || iFrame.contentWindow.document;
var iFrameContent = iFrameDocument.getElementById('#dojox_grid__View_1');
iFrameContent.height(660 + 'px');

我也试过这个，没有成功：

$('iframe#finesse_gadget_1', parent.document.body).contents().find('div#dojox_grid__View_1').height(660 + 'px');

非常感谢任何帮助！

Answer 1

您需要：

确定 iframe 是否作为网页在 the same domain 上。 iframe 的 src 参数是什么（或者缺少）？页面的 URL 是什么？
等待 iframe 加载。

如果 iframe 是同一个域：

然后使用 waitForKeyElements^Link 之类的技术来获取所需的节点。
这是一个完整的工作脚本，显示：

// ==UserScript==
// @name     _Change iframed div, same domain
// @match    *://YOUR_SERVER.COM/YOUR_PATH/*
// @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.

//-- Use the optional iframe selector of WFKE.
waitForKeyElements ("#dojox_grid__View_1", changeHeight, false, "#finesse_gadget_1");

function changeHeight (jNode) {
    jNode.css ("height", "660px");
}

如果 iframe 不是同一个域：

然后 在 iframe 的域 上将用户脚本设置为运行，然后再次使用 waitForKeyElements:

// ==UserScript==
// @name     _Change iframed div, different domains
// @match    *://IFRAME_SERVER.COM/IFRAME_PATH/*
// @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.

waitForKeyElements ("#dojox_grid__View_1", changeHeight);

function changeHeight (jNode) {
    jNode.css ("height", "660px");
}

需要帮助在 Tampermonkey 用户脚本中使用 JQuery 选择和更改 iFrame 中 div id 的高度

Need help selecting & changing height of a div id in an iFrame using JQuery in a Tampermonkey userscript

iframe

jquery

userscripts

tampermonkey

如果 iframe 是同一个域：

如果 iframe 不是同一个域：