iframe父子页面之间相互调用元素和函数 

 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>

 

posted @ 2015-11-09 14:07  悬崖边上  阅读(570)  评论(0)    收藏  举报