Here is a reduced code of my test implementation for parent iframe communication. i added some samples how it could be used. But i have to note that it is out of my labs section, and i currently don't have had the time to check if it is fully cross browser compatible. but if it is not there will only be some minor change that are have to be done. (EDIT tested in current chrome, ff and IE 6-9)
I hope this will help you with you problem. But again i cannot guarantee right now that it will work perfectly (but i'm pretty sure).
code of the parent
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>index</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
(function($, window, undefined) {
var iframe;
// the connector object the will be passed to the iframe and will be used as "API"
var parentConnector = {
_window : window, // a reference to the parents window (not really necessary but nice to have)
$ : $, // a reference to the parents jQuery that can be accessed from the iframe (use with caution)
// here you will define you "API" for the parent (the functions you want to call from the iframe )
setElementValue : function(selector, value ) {
$(selector).val(value);
}
}
// this function is called by the iframe to register the iframe in the parent
window.registerIFrame = function( iframeHelper ) {
//if you have multible iframe in the parent you could change the code here to store them in e.g. an arrray or with a key in an object
iframe = iframeHelper;
// register the parent in the iframe
iframe.registerParent(parentConnector);
}
$(document).on("click",".slideUp",function(event) {
event.preventDefault();
/*
call a function on the helper object, this is the savest way for the commincation because
there is it minimizes the risk to mix the differnt context
*/
iframe.slideUp();
/*
This way would work at least in chrome, with the current version with jquery, but it relays the jQuery implementation
that the correct document is used.
*/
iframe.$(".info-from-parent").val("slideUp");
/*
One thing you should NEVER do is the following:
iframe.$(".info-from-parent").append( $("<div></div>") );
The reason you should not do this is because this mixes DOMElements of different context.
This will result in unexpected crashes/bahaviors in some browsers (but could work in others, or at least it will look like it would work)
*/
});
// same as the slide down, it is just there to have some interaction sample
$(document).on("click",".slideDown",function(event) {
event.preventDefault();
iframe.slideDown();
iframe.$(".info-from-parent").val("slideDown");
});
})(jQuery, window);
</script>
</head>
<body>
<input type="text" class="info-from-iframe"><br>
<a href="#" class="slideUp">slideUp</a> <a href="#" class="slideDown">slideDown</a><br>
<iframe src="iframe.html"></iframe>
</body>
</html>
code of the iframe
<!doctype html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>iframe</title>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script>
(function($,window,undefined) {
//the connector object the will be passed to the parent and will be used as "API"
var iframeConnector = {
_window : window, // a reference to the iframes window (not really necessary but nice to have)
_parent : undefined,
$ : $, // a reference to the iframes jQuery that can be accessed from the parent (use with caution)
// this function is called by the parent to register the parent in the iframe
registerParent : function( parent ) {
this._parent = parent;
},
/* here you will define you "API" for the iframe (the functions you want to call from the parent )*/
slideUp : function() {
$(".test").slideUp();
},
slideDown : function() {
$(".test").slideDown();
},
setElementValue : function(selector, value ) {
$(selector).val(value);
}
};
// register the iframe in the parent
window.parent.registerIFrame(iframeConnector);
$(document).mousemove(function(event) {
//use the parents "API" to call a function in the parent
iframeConnector._parent.setElementValue(".info-from-iframe", event.clientX+", "+event.clientY);
});
})(jQuery,window);
</script>
</head>
<body>
<input type="text" class="info-from-parent"><br>
<div class="test">
iframe
</div>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
