How to get the control from iFrame using Javascript OR jQuery

Question

We are loading the third party iframe in our html page. We are loading this in one particular div. Till this step it is working successfully. However, the next thing we want find the controls which are loaded inside the iFrame. Also, iFrame does not have any id associated to it.

Because of iFrame ID is not present we have tried like below to first get the iframe

var objiframe = $('#divContainer').find('iframe');

So here we are getting the iFrame object, but we are not able to find any controls which are residing under iFrame.

We have tried few ways like below to find the controls

var iFrameDOM = $(objiframe).contents();
var control = $(iFrameDOM).find("#duedate");

var data = objiframe.contentWindow.document.getElementById('duedate');

But somehow we are not getting the controls or there id. Most of the times we are getting 'undefined' or 'Cannot read property 'contentWindow' of null'

Any help on this appreciated

Answer 1

It should not be able to if the pages are from different domains, the browsers security sandbox should prevent this type of access. It might work when the two pages are from different sub domains of the same domain.

Accessing the child iframe might work, but the other way around will most certainly not work.

The easiest way would be through the frames object on window like this:

window.frames[0].document.getElementById('ElementId').style.backgroundColor="#000";

Answer 2

If the iFrame is on another domain than yours you will be restricted and the only way to communicate with the iframe is to use Web Messaging API .

So you have to check what functions are exposed by the iFrame.

This Article can help you understand what is possible to do or not with your third-party iFrame.