2

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

XamDev
  • 3,377
  • 12
  • 58
  • 97
  • 1
    Is the site in the iframe the same protocol://domain:port as the page it is on? – Taplar Mar 27 '19 at 15:23
  • No.. its some payment provider which we are integrating in our application... The iFrame URL is provided by payment provider – XamDev Mar 27 '19 at 15:45
  • 1
    You are not going to be able to access the contents of the iframe, as it is cross origin. – Taplar Mar 27 '19 at 15:49
  • 1
    Possible duplicate of [jQuery/JavaScript: accessing contents of an iframe](https://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe) – Giuseppe Canale Mar 27 '19 at 16:12
  • Can achieve this using event listeners? While rendering the iframe will get the content and pass to some variable or method. And later on invoke that method or access the variable – XamDev Mar 27 '19 at 17:39

2 Answers2

-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";
Giuseppe Canale
  • 470
  • 7
  • 15
  • These are on different domain.. this one is payment provider(third party) which we are integrating in our application.. – XamDev Mar 27 '19 at 15:49
-1

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.

Pintouch
  • 2,630
  • 1
  • 15
  • 22
  • @Pintouch.. Yeah But this is not giving me clear picture... how can I get the value of that particular control using this ? – XamDev Mar 28 '19 at 10:02
  • For security reasons you can't access iframe document, for example if embed a login page in an iframe and you will be abled to access the input values of the form. The best practice is to expose functions you need via API Message in the case the content of the iFrame is yours. Otherwise you can ask to the third-library to expose a function to pass the data you need. – Pintouch Apr 03 '19 at 11:59
  • @XamDev Which payment provider are you using? – Pintouch Apr 03 '19 at 12:01