CODEWITHSUNDEEP
javascriptjqueryiframe
Anton
Anton

Reputation: 17

Jquery div from file load inside iframe

I have a div and inside it I have an iframe, the iframe loads a file from a URL and inside this file I show some content. My question is; is it possible to close the div from file inside iframe itself.

<div id="container">
    <iframe src="mydomain.com/index.php"></iframe>
</div>

I know the most simple method is with jQuery to close the div, but for some reason I need to close the file load inside the iframe because when the session ends inside the iframe redirect and need to close the div called .container.

My question is, is it possible from mydomain.com/index.php to insert some code to close or hide the div called .container.

Upvotes: 0

Views: 93

Answers (2)

charlietfl
charlietfl

Reputation: 171669

Since they are on same domain you can access the parent window using window.parent

Then do something like:

var cont = window.parent.document.getElementById('container');
cont.style.display='none';

DEMO

Upvotes: 1

MrGoofus
MrGoofus

Reputation: 883

You can use window.postMessage to communicate between the child (iframe) and the parent window.

In the iframe you can have following function;

function closeDivOfParent() {
    parent.postMessage("close-div","*");
}

And in the parent page you listen to these messages;

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent, function(e) {

    var key = e.message ? "message" : "data";
    var message = e[key];

    if(message === "close-div") {
        $('div').hide();
    }

}, false);

Props of the code and explanation at; https://davidwalsh.name/window-iframe

Upvotes: 0

Related Questions