http://www.w3school.com.cn/tags/tag_iframe.asp

father.html

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function ff(msg) {

        alert(msg);

    }

    function test() {

        // 只能通过iframe名称获取子页面，不能通过id

        var div = window.frames["b"].document.getElementById("div");

        alert(div);

    }

    function test2() {

        // 调用子页面方法

        window.frames["b"].ff("hi san");

    }

</script>

</head>

<body>

    <span id="span">FFFFFFFFF</span>

    <iframe id="a" name="b" width="200px" height="200px" src="san.html">

        <p>您的浏览器不支持 iframe 标签。</p>

    </iframe>

    <span>HHHHHHHH</span>

    <br>

    <a href="#" onclick="test()">点击获取子页面元素</a>

    <br>

    <a href="#" onclick="test2()">点击调用子页面方法</a>

</body>

</html>

san.html

<!DOCTYPE html>

<html>

<head>

<script type="text/javascript">

    function test() {

        // 调用父页面方法

        window.parent.ff("hello");

    }

    function test2() {

        var span = window.parent.document.getElementById("span");

        alert(span);

    }

    function ff(msg) {

        alert(msg);

    }

</script>

</head>

<body>

    <div id="div"

        style="width: 100px; height: 100px; background-color: yellow"></div>

    <a href="#" onclick="test()">点击调用父页面方法</a>

    <br>

    <a href="#" onclick="test2()">点击获取父页面元素</a>

    <br>

</body>

</html>

补充：

jQuery选择元素用：

jQuery(expression, [context])

返回值:jQuery

$("#someSelector",parent.document);

$("#someSelector",document.frames['someIframeName'].document);

效果图：

六）iframe 及父子页面之间获取元素、方法调用的更多相关文章

  1. iframe父子页面之间相互调用元素和函数

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. iframe之父子页面通信

    iframe之父子页面通信 1.获取 子页面 的 window 对象  在父页面中,存在如下两个对象 window.frames document.iframeElement.contentWindo ...

  3. 微信小程序从零开始开发步骤（六）4种页面跳转的方法

    用法:用于页面跳转,相当于html里面的<a></a>标签. API教程:https://mp.weixin.qq.com/debug/wxadoc/dev/component ...

  4. 父子页面之间元素相互操作(iframe子页面)

    js/jquery获取iframe子页面中元素的方法: 一.使用window.frames["iframe的ID"]获取元素 window.onload = function() ...

  5. Jquery中父，子页面之间元素获取及方法调用

    一.jquery 父.子页面之间页面元素的获取,方法的调用: 1. 父页面获取子页面元素: 格式:$("#iframe的ID").contents().find("#if ...

  6. 【JavsScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  7. 【JavaScript】父子页面之间跨域通信的方法

    由于同源策略的限制,JavaScript跨域的问题,一直是一个比较棘手的问题,为了解决页面之间的跨域通信,大家煞费苦心,研究了各种跨域方案.之前也有小网同学分享过一篇“跨域,不再纠结” 开始照着尝试时 ...

  8. iframe多层嵌套时,Jquery获取元素

    在项目中,尤其是后台管理项目,会使用到iframe嵌套的网页,说起iframe,真的是个让人头疼的东西,能避开是最好避开.不然要请随身备好氧气瓶哈(因为管理和调试过程中往往会被气缺氧!!!哈哈哈~~~ ...

  9. iframe嵌套的页面之间传值问题

    项目中很多时候会遇到需要用 iframe 嵌套页面的情况.有时候会有这样的需求: iframe 嵌套的页面 A ,点击之后要跳到页面 B ,但是同时还需要 A 页面中的某个属性值. 此时可以先把 A ...

随机推荐

  1. WebApi 返值的实体值前缀加了个下划线

    发现MODEL类中加了个可以被序列化的标记,把它去除即可. [Serializable]

  2. Spring表单标签

    虽然我们可以使用HTML原生的form表单标签来轻松的写出一个表单,其实我一直都是这样做的,但是使用Spring表单标签可以更方便我们完成例如:验证失败后表单数据的回填功能(虽然你可以使用EL+JST ...

  3. 关于linux网络基础记录

    1.linux操作系统是一套非常稳定的操作系统,作用永不止于提供网络服务那么简单.(www.Mail.FTP.DNS.DHCP.NAT.Router) 2.对于一个服务器而言,“搭建容易维护难”:维护 ...

  4. Rplot

    #!/usr/bin/Rscriptlibrary(ggplot2) cf = read.table(file = 'result_sort.txt', header = TRUE, sep='\t' ...

  5. 深入浅出 Java Concurrency (7): 锁机制 part 2 AQS

      在理解J.U.C原理以及锁机制之前,我们来介绍J.U.C框架最核心也是最复杂的一个基础类:java.util.concurrent.locks.AbstractQueuedSynchronizer ...

  6. GetEnumName 枚举名称 字符串

    System.TypInfo.pas System.TypInfo.hpp http://docwiki.embarcadero.com/Libraries/Tokyo/en/System.TypIn ...

  7. msql修改密码

    修改的用户都以root为列.一.拥有原来的myql的root的密码: 方法一:在mysql系统外,使用mysqladmin# mysqladmin -u root -p password " ...

  8. 关于Remoting的个人使用心得

    最经几天比较闲写了一个基于Tcp网络通信的聊天程序,写的过程中实现了文件传输,可是却怎样也无法将文件名传送过去,期间想过用通信的端口发送文件的名称,但是又要自己定义一个协议,觉得那样比较麻烦,于是想到 ...

  9. linux shell 脚本攻略学习 -- head命令详解, tail命令详解

    当要查看上千行的大文件时,我们可不会用cat命令把整个文件内容给打印出来,相反,我们可能只需要看文件的一小部分地内容(例如文件的前十行和后十行),我们也有可能需要打印出来前n行或后n行,也有可能打印除 ...

  10. chrome浏览器控制台创建js脚本并执行

    Chrome的snippets是小脚本,还可以创作并在Chrome DevTools的来源面板中执行.您可以访问和从任何页面运行它们.当你运行一个片段,它从当前打开的页面的上下文中执行.本文主要讲如何 ...