passing value from iframe overlay to parent page

Question

I have a question about jquery and colorbox overlay. I can't find good solution on stackoverflow.

I would like to get some value (myvalue) from iframe overlay.

Code in my parent child (home.php) :

$(".iframe").colorbox({
iframe:true,
width:"1000px",
height:"500px",     
    // Begin to clos the overlay
onCleanup: function() {
var myvalue = $("#myvalue").val();
alert('myvalue');
}
}

Link to open my iframe :

<a href="child.php" class="iframe">OPEN OVERLAY BY IFRAME METHOD</a>

Code in my iframe overlay (child.php) :

$(".mydiv").click(function(){
    window.parent.$(this).attr('value'); 
    parent.$.colorbox.close();
    return false;
});

Html in my overlay (child.php) :

<div class="mydiv" value="TESTPASSINGVALUE"></div>

An idea to helping me ?

Thank you !!

Answer 1

You need a reference to your iframe element. Suppose your iframe element has id "iframe". Then,

onCleanup: function() {
    var myvalue = $("#iframe").contents().find("#myvalue").val();
    alert('myvalue');
}

You need to use contents() to access content in an iframe. Also the iframe URL must be in the same domain as the parent (same origin policy)

Answer 2

$("#myid", parent.document.body); 

Answer 3

I finally found a solution for my problem with localStorage

Code in child page :

$(".mydiv").click(function(){
val = $(this).attr('value'); 
localStorage.setItem("myvalue", "val");
parent.$.colorbox.close();
return false;
});

Code in parent page :

$(".iframe").colorbox({
iframe:true,
width:"1000px",
height:"500px",     
// Begin to clos the overlay
onCleanup: function() {
var test = localStorage.myvalue;
alert(test);
}
}

Thank all for your help :)