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

  • 相关阅读:
    打包spring项目遇到的坑 Unable to locate Spring NamespaceHandler for XML schema ……shcema/context 产生的原因及解决方法
    Mybatis 从入门到精通一:mybatis的入门
    IO流系列一:输入输出流的转换
    本地模拟 gitlab ci 的 demo 项目
    docker 容器中部署 Go 服务时,请求 https 文件时抛错
    微信支付『支付失败,如果已扣款,资金在0-3个工作日原路返回』踩坑案例及解决方案
    PHP 安装 扩展时 抛出 /usr/local/Cellar/php@7.1/7.1.25/pecl 异常解决
    SpringBoot2 引入 Aop
    Mac 下 IDEA 中 SpringBoot 如何利用 DevTool 开启热部署
    MySql数据库中敏感字段加密处理方案
  • 原文地址:https://www.cnblogs.com/ungshow/p/1266408.html
Copyright © 2011-2022 走看看