zoukankan      html  css  js  c++  java
  • js 与 iframe

    使用环境为IE6,其它环境下面还没有试过。

    在页面中使用iframe能为开发带来很多便利,而且iframe标签也被主流的游览所支持。下面是如何在父页面调用子页面的元素及函数:

    有两种方法可以调用子页面的元素:

    1.通过id获取iframe标签。不过我不知道后面的contentWindow是个什么东西,

    document.getElementById('child').contentWindow.document.getElementById('content');

    2.这个方式要好理解一点:

    document.frames['child'].document.getElementById('content');

    调用子页面的函数:

    document.frames['child'].testChildFunction();

    调用父页面的元素:

    parent.document.getElementById('content');

     

    调用父页面的函数:

    parent.testParentFunction();

     

    以下是具体的页面演示情况:

    parent.html

     1<html>
     2    <head>
     3        <script language="javascript">
     4            function callChildElement(){
     5                //call child page's function
     6                var content = document.frames['child'].document.getElementById('content');
     7                window.alert(content.firstChild.nodeValue);
     8            }

     9
    10            function callChildFunction(){
    11                //call functions belongs to child page
    12                document.frames['child'].testChildFunction();
    13            }

    14
    15            function callChildElement2(){
    16                //another method to acquire the element in the child page
    17                var content = document.getElementById('child').contentWindow.document.getElementById('content');
    18                window.alert(content.firstChild.nodeValue);
    19            }

    20
    21            //this function will be called by child page
    22            function testParentFunction(){
    23                window.alert("Function belongs to parent.");
    24            }

    25        
    </script>
    26    </head>
    27
    28    <body>
    29        <input type="button" value="Test Child Element" onclick="callChildElement();"/>
    30        <input type="button" value="Test Child Element2" onclick="callChildElement2();"/>
    31        <input type="button" value="Test Child Function" onclick="callChildFunction()"/>
    32        <input type="text" value="This will be called by child" size="40" id="content"/>
    33        <iframe name="child" id="child" width="100%" height="100%" frameboder="0" src="child.html">
    34        </iframe>
    35    </body>
    36</html>
    37
    38

    child.html

    child.html

    我已经把文件打包js_iframe.rar

  • 相关阅读:
    JS中的间歇(周期)调用setInterval()与超时(延迟)调用setTimeout()相关总结
    jQuery中的height()、innerheight()、outerheight()的区别总结
    单行及多行文本溢出以省略号显示的方法总结
    Android图片缩放 指定尺寸
    Android开源SlidingMenu的使用
    说说Android应用的persistent属性
    Android使用init.rc触发脚本实现隐藏内置应用
    android之实现上下左右翻页效果
    Android中播放声音
    Android中StatFs获取系统/sdcard存储(剩余空间)大小
  • 原文地址:https://www.cnblogs.com/ungshow/p/1266408.html
Copyright © 2011-2022 走看看