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>  

    效果图如下：
     
  • 相关阅读:
    Linux学习记录(四)：Shell脚本
    Linux学习记录(三)：Vim
    基于PyTorch构建神经网络
    Python开发【第一篇】：初识Python
    asyncio 并发编程（二）
    asyncio 并发编程（一）
    Linux 文件和目录操作命令（一）
    Django Model
    Django 之 Form 组件
    Django 模板系统
  • 原文地址：https://www.cnblogs.com/web100/p/iframe-ok.html
Copyright © 2011-2022 走看看