1 <!doctype html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <meta name="Keywords" content=""> 6 <meta name="Description" content=""> 7 <title>Document</title> 8 <style> 9 *{padding:0;margin:0} 10 #box{width:450px;height:200px;border:2px solid red;margin:30px auto;} 11 #box iframe{width:100%;height:100%;} 12 </style> 13 </head> 14 <body> 15 16 <div id="box"> 17 <iframe src="children.html" id="iframebox" frameborder="0" scrolling="yes"></iframe> 18 </div> 19 <div id="pmsg"></div> 20 <div id="pmsg1"></div> 21 <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script> 22 <script type="text/javascript"> 23 24 /* 25 iframe中父子页面之间的数据传递 26 */ 27 //javascript版本 28 window.onload = function(){ 29 //父页面调用子页面的元素和事件 30 //var iframebox = document.getElementById("iframebox"); 31 32 //var cwinDom = iframebox.contentWindow;//获取的是window，而不是domcument对象 33 //cwinDom.document.getElementById("regbox").innerHTML = "皮皮，已经登录了。。。"; //需要在服务器中访问，否则会抛跨域异常 34 35 //var json = {msg:"皮皮，已经邮寄一份礼物给你了，注意查收"}; 36 //cwinDom.getMsg(json); 37 } 38 39 function msg(msg){ 40 document.getElementById("pmsg1").innerHTML = msg; 41 } 42 43 //jQuery版本 44 window.onload = function(){ 45 var $frame = $("#iframebox").contents(); 46 $frame.find("#regbox").html("皮皮，已经登录了。。。"); 47 48 var json = {msg:"皮皮，已经邮寄一份礼物给你了，注意查收"}; 49 $("#iframebox")[0].contentWindow.getMsg(json); 50 } 51 52 </script> 53 54 </body> 55 </html>
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>Document</title> 10 </head> 11 <body style="overflow:auto;"> 12 <div id="regbox">登陆、注册</div> 13 14 <div id="msg"></div> 15 16 17 18 19 <script type="text/javascript"> 20 21 function getMsg(params){ 22 alert(99); 23 document.getElementById("msg").innerHTML = params.msg+'<br/>收到了,谢谢'; 24 25 //调用父页面的元素和事件 26 parent.document.getElementById("pmsg").innerHTML = "礼物已收到了,谢谢"; 27 parent.msg("调用了下父页面的事件"); 28 29 //jQuery 30 $(parent.document).find("pmsg").html("礼物已收到了,谢谢"); 31 } 32 33 </script> 34 35 </body> 36 </html>