zoukankan      html  css  js  c++  java

  • 全面兼容的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("我是父页面的方法, 调用成功！");  
    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=" 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=" 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("我是子页面, 我需要使用 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 嵌入的子页面， 需要通过 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>  

    效果图如下：
     
  • 相关阅读:
    CodeForces 219D Choosing Capital for Treeland （树形DP）
    POJ 3162 Walking Race （树的直径，单调队列）
    POJ 2152 Fire （树形DP，经典）
    POJ 1741 Tree （树的分治，树的重心）
    POJ 1655 Balancing Act （树的重心，常规）
    HDU 2196 Computer （树形DP）
    HDU 1520 Anniversary party （树形DP，入门）
    寒门子弟
    JQuery选择器（转）
    （四）Web应用开发---系统架构图
  • 原文地址：https://www.cnblogs.com/web100/p/iframe-ok.html
Copyright © 2011-2022 走看看