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. node 通过指令创建一个package.json文件

      描述包的文件是package.json文件. 一个这样的文件,里面的信息还是挺大的.我们可以放弃手动建立.为了练手我们有命令行来建一个这样的包; 完成name,varsion....license ...

  2. WP8 MVVM设计模式

    类似了Android里边的MVC模式, Windows Phone 有自己的Model-View-ViewModel模式,这种模式的作用就是为了Data和UI分离开来. 如果你英文较好的话,你可以不再 ...

  3. python第三方库推荐 - dateutil

    在dateutil中,吸引我的东西有2个,1个是parser,1个是rrule. 其中parser是根据字符串解析成datetime,而rrule是则是根据定义的规则来生成datetime. 安装 没 ...

  4. day9-数据库操作与Paramiko模块

    堡垒机前戏 开发堡垒机之前,先来学习Python的paramiko模块,该模块机遇SSH用于连接远程服务器并执行相关操作 SSHClient 用于连接远程服务器并执行基本命令 基于用户名密码连接: 1 ...

  5. [Z] Shell中脚本变量和函数变量的作用域

    在shell中定义函数可以使代码模块化,便于复用代码.不过脚本本身的变量和函数的变量的作用域问题可能令你费解,在这里梳理一下这个问题. (1)Shell脚本中定义的变量是global的,其作用域从被定 ...

  6. Rhythmk 一步一步学 JAVA (12) Spring-1 之入门

    (一)简单对象Spring  XML配置说明 使用Spring (Spring 3.0) 实现最简单的类映射以及引用,属性赋值: 1.1.新建类UserModel: package com.sprin ...

  7. Oracle11gR2--手工建库&dbca建库

    1 Oracle11gR2 dbca建库 [oracle@localhost ~]$ cd $ORACLE_BASE/database [oracle@localhost database]$ dbc ...

  8. Java并发编程之——Amino框架

    Amino框架是一个采用无锁方式实现并行计算的框架,可惜的是,网上关于Amino框架的介绍甚少.根据所掌握的资料,稍微总结一下: 1. 锁机制到无锁机制 锁机制可以确保程序和数据的线程安全,但是锁是一 ...

  9. 重构--去除丑陋的switch语句

    最近几天,在进行重构的时候,遇到了一个极其丑陋的代码(自己写的 /捂脸  当时时间紧,于是....),今天去重构的时候无论如何也想不出方法,去除这个丑陋的switch语句 ,于是写篇博客,让自己记住这 ...

  10. 【原】Coursera—Andrew Ng机器学习—课程笔记 Lecture 18—Photo OCR 应用实例:图片文字识别

    Lecture 18—Photo OCR 应用实例:图片文字识别 18.1 问题描述和流程图 Problem Description and Pipeline 图像文字识别需要如下步骤: 1.文字侦测 ...