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

  • 相关阅读:
    kafka cdh 安装
    【转】Public key for *.rpm is not installed,使用yum安装时报错
    12.yaml的简单使用
    python基础教程第三版阅读笔记(一)
    Python库文件安装失败问题及解决方式汇总-持续更新ing~
    taiko初体验
    VMware之USB设备连接
    C++之DLL的动态加载与静态加载初尝试
    C++课堂练习二
    C++课堂练习三
  • 原文地址:https://www.cnblogs.com/ungshow/p/1266408.html
Copyright © 2011-2022 走看看