苗火 Nicholas

[JS]Call functions or values between sub iframe and parent page

2017-3-29 萧 写技术

I always forgotten how to call functions or values between sub iframe and parent page in javascript. Now make a demo to mark it here.

Here is parent page:

<iframe src="sub.html" style="width:100%; height:500px; 

border:1px solid gray;"></iframe>

<input type="button" value="ok" />

<script src="jquery-2.0.3.min.js" ></script>
<script>

var on_message_list = function(){};
var mm = "index";

var clicks = function(){
	on_message_list();
}

$(function(){
	console.log("ini");
	var i=0;
	$("input").click(function(){
		mm = "hello+"+i++;
		on_message_list();
		console.log(on_message_list);
	});
	
});
</script>

Here is sub page, sub.html

<script src="jquery-2.0.3.min.js" ></script>
<script>

var on_message = function(){
	console.log("on_message :"+window.parent.mm);
	
}
$(function(){
	console.log("ini");
	window.parent.on_message_list = on_message;
	window.parent.clicks();
});
</script>

标签: JS