1

I'm trying to change the height of a div id inside in iFrame from 226px to 660px. Yes, the iFrame source is from the same domain.

I'm trying to select div id dojox_grid__View_1 inside iFrame id finesse_gadget_1. I've tried the solution with the highest votes from here:

But it didn't work. So, I ran this command:

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

And this is the result:

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

But, I don't understand what it means?

This is the 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>

The only way I can successfully select the iFrame is like this (document.getElementById didn't work):

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

Here's the code that I've tried, without success:

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');

I've also tried this, without success:

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

Any help is greatly appreciated!

Tom
  • 13
  • 3

1 Answers1

0

You need to:

  1. Determine if the iframe is on the same domain as the web page. What is the iframe's src parameter (or is it missing)? What is the page's URL?
  2. Wait for the iframe to load.

If the iframe is same domain:

Then use a technique like waitForKeyElementsLink to get the desired node.
Here is a complete working script that shows that:

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

If the iframe is NOT same domain:

Then set the userscript to run on the iframe's domain and, again, use 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");
}
Community
  • 1
  • 1
Brock Adams
  • 90,639
  • 22
  • 233
  • 295