Get Element from Within an Iframe

Get element from within an iFrame

var iframe = document.getElementById('iframeId');
var innerDoc = (iframe.contentDocument) ? iframe.contentDocument : iframe.contentWindow.document;

You could more simply write:

var iframe = document.getElementById('iframeId');
var innerDoc = iframe.contentDocument || iframe.contentWindow.document;

and the first valid inner doc will be returned.

Once you get the inner doc, you can just access its internals the same way as you would access any element on your current page. (innerDoc.getElementById...etc.)

IMPORTANT: Make sure that the iframe is on the same domain, otherwise you can't get access to its internals. That would be cross-site scripting.

How to pick element inside iframe using document.getElementById

document.getElementById('myframe1').contentWindow.document.getElementById('x')

Fiddle

contentWindow is supported by all browsers including the older versions of IE.

Note that if the iframe's src is from another domain, you won't be able to access its content due to the Same Origin Policy.

Get Y position of an element in an iframe

This is untested, but should point you in the right direction.

jQuery

   $(document).ready(function(){
      var iframe = $('iframe');
      var inputs = iframe.find('input');

      $.each(inputs, function(){
        $(this).click(function(){
          console.log($(this).offset().top));
        })
      })
    })

Vanilla Javascript

Updated as per comment. Also untested.

Give your iframe an ID to make it easier to target, then:

var iframe = document.getElementById('iframe');
var inputs = Array.prototype.slice.call(iframe.getElementsByTagName('input'));

inputs.forEach(function(input,i){
  input.addEventListener('click', function(){
    console.log(this.getBoundingClientRect().top;
  })
})

How to select elements within an iframe element in Puppeteer

You can get the iframe using contentFrame as you are doing now, and then call $.

const browser = await puppeteer.launch({ headless: false });
const page = await browser.newPage();

await page.goto('http://www.espn.com/login')

const elementHandle = await page.waitForSelector('div#disneyid-wrapper iframe');
const frame = await elementHandle.contentFrame();
await frame.waitForSelector('[ng-model="vm.username"]');
const username = await frame.$('[ng-model="vm.username"]');
await username.type('foo');
await browser.close()

How can i access to iframe inside iframe?

If you have a document containing an iframe, and in the same document you have another iframe as a child element of the first … then your HTML is invalid and you can't do that.

Children of iframes used to be alternative content to render if the browser didn't support iframes, but that has been phased out and iframes are no longer allowed children.

---

If you have an iframe with a src of ... and then the document (from ...) the is loaded into that iframe contains another iframe then document.getElementById("embedIframe") doesn't work because embedIframe isn't part of that document.

You need to get the iframe in the current document, then get the document belonging to that frame, and then search that document for the iframe you want.

Get element value inside iframe which is nested inside Frame in javascript?

Here's a modified snippet of my answer linked in a comment. Function returns the window object of an (i)frame with id passed (id), or null, if the (i)frame is not found. This method works only, if all the (i)frames are in the same domain. Also ids given to (i)frame elements must be unique throughout all documents involved in the window structure.

function searchFrame(id) {                                     // id = the id of the wanted (i)frame
    var result = null,                                         // Stores the result
        search = function (iframes) {                          // Recursively called function
            var n;                                             // General loop counter
            for (n = 0; n < iframes.length; n++) {             // Iterate through all passed windows in (i)frames
                if (iframes[n].frameElement.id === id) {       // Check the id of the (i)frame
                    result = iframes[n];                       // If found the wanted id, store the window to result
                }
                if (!result && iframes[n].frames.length > 0) { // Check if result not found and current window has (i)frames
                    search(iframes[n].frames);                 // Call search again, pass the windows in current window
                }
            }
        };
    search(window.top.frames);                                  // Start searching from the topmost window
    return result;                                              // Returns the wanted window if found, null otherwise
}

This function can find a frame or iframe with the passed id regardless where it is placed in the window structure. Also the function can be placed and called in any window. I'd put this to the main page (as global). If the method is needed in subwindows, just call with top.searchFrame(...).

Instead of ids, also names can be used, as long as they are also unique. In that case the id check in searchFrame() needs to be edited to name check.

In your case, first you need to give an id to the target iframe, then you can use the code for example like this:

var txtClinic = searchFrame('IFRAME_ID').document.getElementById('clinicFlag');

---

The method above might be a bit overkilling to get a single reference, but it's very helpful, if you have to get these cross-window references multiple times within different windows.

The specific task of yours could be done like this:

var txtClinic = parent.frames[1].frames[0].document.getElementById('clinicFlag');

---

names of the (i)frame are also handy to use with frames collection. Instead indices you can use names. Just always chain the reference starting from the main page, i.e. from top. For example:

var iframeWin = top.frames['frame2'].frames['iframe1'];

---

Useful reading:

window.top

window.frameElement

window.frames

---

Related Topics