1

I am looking for a way to access a button inside the iFrame and trigger a click event when that button is clicked inside the iFrame that is on another domain. Trying to go deeper into an element within the iFrame has proven difficult. Has anyone had success taking it this far?

Tuba Mohsin
  • 81
  • 3
  • 7
  • 2
    You can't access elements in an iframe on another domain, unless you can control the external page too. See https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy – Teemu Mar 06 '17 at 11:49
  • Okay If I control that external page as well. What should I do then? Is there any block of code that I need to add in an external website? @Teemu – Tuba Mohsin Mar 07 '17 at 07:15
  • See http://stackoverflow.com/q/3076414/1169519 , though all that is explained also at the MDN page I've linked above. – Teemu Mar 07 '17 at 07:51
  • Hi, How are you? – jvk Jan 19 '18 at 10:11

3 Answers3

0

Use an ajax call to the iframe's src to get its content, and render it as part of your site (which you then can hook).

You can't access the contents from an iframe from a different domain directly because that would be a security violation.

powersupply
  • 121
  • 1
  • 3
0

If i understand your requirements correctly

You can add a $('#iframe').load(function(){} which will watch the loading of iframe into your DOM.

After loading iframe you can attach an event listener to button click

var iframe = $('#iframe').contents();
iframe.find("#button").click(function(){
 //write code to close the popup
});

The above process can be summarized as follows

$('#iframe').load(function(){
        var iframe = $('#iframe').contents();
        iframe.find("#button").click(function(){
               $('#popup').close() //May depend on your popup implementation
        });
});

The Problem here is that the same-origin policy blocks scripts from accessing contents of site with other origin. Actually origin consists of the following parts.

origin:<protocol(http/https)>://<hostname>:<port number>/path/to/page.html

The origin is considered to be different if protocol,host name and port number are not same.

In such cases you can not access the contents of one website from other website due to same-origin security policy.

In order to overcome it you have to use parent-child communication using window.postMessage().

FYI : https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage.

The Window.postMessage() method safely enables cross-origin communication.

Suppose that your parent website is example-parent.com and In Iframe your loading website example-iframe.com and let both are using http protocol. Below is how I solved the problem. In parent website add event listener for messages to receive as follows.

window.addEventListener('message',receiveMessage,false);

function receiveMessage(event){
    var origin = event.origin || event.originalEvent.origin;
    if(origin.indexOf('http://example-iframe.com')>=0) // check if message received from intended sender
    {
        if(event.data=="intended message format") // check if data received is in correct format
        {
            // call functionality that closes popup containing iframe
        }else{ // data received is malacious
            return;
        }

    }else{  // message is not received from intended sender
        return;
    }
}

From Iframe post message to the parent website as follows. Post message syntax : otherWindow.postMessage(message, targetOrigin, [transfer]);

function sendMessage(){
  parent.postMessage('intended message format','http://example-parent.com');
}

Use postMessage() properly,otherwise it may lead to cross-site scripting attack.

SAMUEL
  • 8,098
  • 3
  • 42
  • 42
-1

I am Sorry to say this to you but, you can't. Since that will be violating CORS (Cross-origin resource sharing) rules that browser has set and it won't let you break those. Since its the almighty.

It will give an error 'Access-Control-Allow-Origin' in your console .

Hope you find it helpful.

Still if want to do something in your website you can ask below, I might give you an alternate to do so.

Blutbad
  • 56
  • 7