How to get reference to elements of an iframe?

Question

Basically a survey from SurveyMonkey is loading on my webpage in an iframe.That survey has 'Done' button which needs to be clicked when you have filled up the survey. Now when i inspect console by right-clicking on page anywhere except survey pop up and execute this statement:

document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");

The result i get is:

HTMLCollection []

But when i inspect on survey popup and write the same statement in console i get the following result:

HTMLCollection [button.btn.small.done-button.survey-page-button.user-generated.notranslate]

Basically i want to add an event when 'Done' button will be pressed but the problem is i cannot get reference to this button simply by passing its class because it loads after few seconds later when my html page is loaded.

I have even written a function to alert me 'Hi' when 'Done' button shows up button it is of no value.Here is the code:-

 $('.btn small done-button survey-page-button user-generated notranslate').on('load',function(){alert('hi'); console.log("survey-loaded");});

Following is the html of 'Done' button:

<button type="submit" class="btn small done-button survey-page-button user-generated notranslate">DONE</button>

@NikhilMishra. Yes. I am showing survey on my wordpress website. — Amandeep Singh, Feb 14 '19 at 12:28
Then the only option is to have postMessage from parent send to iframe and you handle that in iframe. And it seems that you don't control the iframe (it's the survey) so simply you can't. That's Same Origin Policy that prevent you to access iframe from different domain. — jcubic, Feb 14 '19 at 12:42

Ans Bilal · Answer 1 · 2019-02-14T12:34:28.750

Try to access iframe elements after it is loaded.

    document.getElementById('your-iframe-id').onload = function() {
        // Create variable for your iframe.
        var iframe = document.getElementById("your-iframe-id");
       //then access its content like this
        var btn   document.getElementsByClassName("btn small done-button survey-page-button user-generated notranslate");

      //Rest of your code
    }

The above code will only works if there is no cross domain restriction

score 0 · Answer 2 · answered Feb 14 '19 at 12:32

You cannot reference iFrame content from another domain. That will violate the Same-origin policy.

The mere idea of an iFrame is that it blocks you from manipulating its content, so the SurveyMonkey content still considered secured.

You can, however, interact with iFrame via post messages, and you can get a reference to iFrame content if it doesn't violate the same-origin policy.

See similar questions here, and here.

score 0 · Answer 3 · answered Feb 14 '19 at 12:57

Use a delegate, target a parent element that is always on the page the the addEventListener to it

    document.querySelector('your-const-    parent-      `element-containing-the-   button').addEventListener('click',(e)=>{
If(e.target.tagName === 'BUTTON')
'your actions'}
);

I hope this helps #cheers

How to get reference to elements of an iframe?

3 Answers3