全面兼容的Iframe 与父页面交互操作

 父页面 Father.htm 源码如下： 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>全面兼容的Iframe 与父页面交互操作</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <script language="javascript" type="text/javascript">  
  7.         function fatherFunction() {  
  8.             alert("我是父页面的方法,\n调用成功！");  
  9.         }  
  10.   
  11.         /*  
  12.         *父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容  
  13.         */  
  14.         function one() {  
  15.             var ifreame = window.frames["childPage1"];  
  16.             if (ifreame != null && ifreame != undefined) {  
  17.                 ifreame.childFunction();  
  18.             }  
  19.         }  
  20.   
  21.         function two() {  
  22.             var ifreame = window.frames["childPage1"];  
  23.             if (ifreame != null && ifreame != undefined) {  
  24.                 var myValue = ifreame.document.getElementById("childPage");  
  25.   
  26.                 alert(myValue.innerHTML);  
  27.             }  
  28.         }  
  29.   
  30.   
  31.         /*  
  32.         *父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容  
  33.         */  
  34.         function three() {  
  35.             var ifreame = window.top.document.getElementById("childPage2").contentWindow;  
  36.             if (ifreame != null && ifreame != undefined) {  
  37.                 ifreame.childFunction();  
  38.             }  
  39.         }  
  40.   
  41.         function four() {  
  42.             var ifreame = window.top.document.getElementById("childPage2").contentWindow;  
  43.             if (ifreame != null && ifreame != undefined) {  
  44.                 var myValue = ifreame.document.getElementById("childPage");  
  45.   
  46.                 alert(myValue.innerHTML);  
  47.             }  
  48.         }  
  49.     </script>  
  50. </head>  
  51. <body style="margin: auto;">  
  52.     <fieldset>  
  53.         <legend>父页面通过 iframe Name 调用子页面的函数或者获取子页面元素的内容</legend>  
  54.         <dl>  
  55.             <dt>  
  56.                 <input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="one();" />      
  57.                 <input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="two();" />  
  58.             </dt>  
  59.             <dt>  
  60.                 <div style="width: 100%; height: 250px;">  
  61.                     <iframe name="childPage1" src="Child1.htm" frameborder="0" scrolling="no" width="100%"  
  62.                         height="250"></iframe>  
  63.                 </div>  
  64.             </dt>  
  65.         </dl>  
  66.     </fieldset>  
  67.     <br />  
  68.     <fieldset>  
  69.         <legend>父页面通过 iframe Id 调用子页面的函数或者获取子页面元素的内容</legend>  
  70.         <dl>  
  71.             <dt>  
  72.                 <input type="button" value="通过ifrme Name 调用子页面的脚本" onclick="three();" />      
  73.                 <input type="button" value="通过ifrme Name 获取子页面元素的内容" onclick="four();" />  
  74.             </dt>  
  75.             <dt>  
  76.                 <div style="width: 100%; height: 250px;">  
  77.                     <iframe id="childPage2" src="Child2.htm" frameborder="0" scrolling="no" width="100%"  
  78.                         height="250"></iframe>  
  79.                 </div>  
  80.             </dt>  
  81.         </dl>  
  82.     </fieldset>  
  83. </body>  
  84. </html>  
 
嵌入的 iframe 子页面 Child1.htm 源码如下： 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>全面兼容的Iframe 与父页面交互操作</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <script language="javascript" type="text/javascript">  
  7.         function childFunction() {  
  8.             alert("我是子页面,\n我需要使用 Iframe Name 调用！");  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body style="margin: auto; background-color: Gray; color: Red;">  
  13.     <input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />  
  14.     <div id="childPage">  
  15.         我是子页面,我需要使用 Iframe Name 调用！</div>  
  16. </body>  
  17. </html>  

嵌入的 iframe 子页面 Child2.htm 源码如下：
 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <title>全面兼容的Iframe 与父页面交互操作</title>  
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  6.     <script type="text/javascript" language="javascript">  
  7.         function childFunction() {  
  8.             alert("我是 iframe 嵌入的子页面，\n需要通过 Iframe Id 调用！");  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body style="margin: auto; background-color: Gray; color: Red;">  
  13.     <input type="button" value="调用父页面的脚本" onclick="javascript:window.parent.fatherFunction();" /><br />  
  14.     <div id="childPage">  
  15.         我是 iframe 嵌入的子页面，需要通过Id调用！  
  16.     </div>  
  17. </body>  
  18. </html>  

效果图如下：
 
posted @ 2014-03-02 09:02  web8  阅读(2376)  评论(0)  编辑  收藏  举报