在实际的项目开发中，iframe框架经常使用，主要用于引入其他的页面。下面主要介绍一下使用iframe引入其他页面后，父页面如何调用子页面的方法和元素以及子页面如何调用父页面的方法和元素。

1、父页面获取子页面的元素

//jquery方式

$("#iframeId").contents().find("#child1");

//js方式

window.frames["iframName"].document.getElementById("child1");

2、父页面获取子页面方法

iframName.window.childrenFn();

3、子页面获取父页面元素

//jquery方式

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

//js方式

window.parent.document.getElementById("parent1");

4、子页面获取父页面方法

parent.parentFn();

父页面：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>父页面</title>

    </head>

    <body>

        <iframe src="iframechildren.html" width="100" height="100" name="iframName" id="iframeId"></iframe>

        <div id="parent1">调用子页面元素</div>

        <div id="parent2">调用子页面方法</div>

    <script src="js/jquery-1.9.1.js"></script>

    <script>

        function parentFn () {

            alert("我是父页面的方法");

        }

        //父页面获取子页面元素

        $("#parent1").click(function () {

            //jquery方式

            $("#iframeId").contents().find("#child1").css("color","#FF0000");

            //js方式

            window.frames["iframName"].document.getElementById("child1").style.color = "#FF0000";

        });

        //父页面获取子页面方法

        $("#parent2").click(function () {

            iframName.window.childrenFn();

        });

    </script>

    </body>

</html>

子页面：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>子页面</title>

    </head>

    <body>

        <div id="child1">调用父页面元素</div>

        <div id="child2">调用父页面方法</div>

    <script src="js/jquery-1.9.1.js"></script>

    <script>

        function childrenFn() {

            alert("我是子页面的方法");

        }

        //调用父页面元素

        $("#child1").click(function () {

            //jquery方式

            $("#parent1",parent.document).css("color","#00f");

            //js方式

            window.parent.document.getElementById("parent1").style.color = "#00f";

        });

        //调用父页面方法

        $("#child2").click(function () {

            parent.parentFn();

        });

    </script>

    </body>

</html>

使用iframe父页面调用子页面和子页面调用父页面的元素与方法的更多相关文章

  1. JQuery调用iframe父页面元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元素的方法: $('#id', ...

  2. JQuery操作iframe父页面与子页面的元素与方法

    JQuery操作iframe父页面与子页面的元素与方法 JQUERY IFRAME 下面简单使用Jquery来操作iframe的一些记录,这个使用纯JS也可以实现. 第一.在iframe中查找父页面元 ...

  3. iframe中 父页面和子页面查找元素的方法

    从父页面中查找iframe子页面中对象的方法:JS: document.getElementById('iframe').contentWindow //查找iframe加载的页面的window对象 ...

  4. 页面嵌套iframe后，点击里面的链接，然后父窗口跳转（子窗口控制父窗口的链接跳转）

    做app的时候遇到一个问题,一个页面,然后里面嵌套了一个另一个页面,想实现点击里面的链接,然后外面进行跳转,不然的话,里面的页面永远出不来, 后面想了个办法,app的页面都是打开打开,不关闭的,然后由 ...

  5. 父页面（JSP页面）传参数到子页面（JSP页面）

    父页面(JSP页面)传参数到子页面(JSP页面) 1.父页面传参数到子页面 //JavaScript代码 $.ajax({ type:"POST", uri:"../st ...

  6. 使用iframe框架时，实现子页面内跳转到整个页面，而不是在子页面内跳转

    首先先来描述一下我所遇到的问题,我在一个首页的index.jsp页面中用到了iframe框架,见下图 在iframe中引入jsp页面的路径,是几个iframe框架组合成的一个完整的页面,但是他们的存在 ...

  7. 关于使用struts2时子窗体页面跳转后在父窗体打开的问题以及Session过期后的页面跳转问题

    问题1:传统的系统界面,iframe了三个页面,上,左,右,用户点击注销的按钮在上面得top.jsp里面,方法:<a href="../adminAction/admin_logout ...

  8. iframe获取父、子窗口的元素和方法

    原文地址:https://www.cnblogs.com/BlingSun/p/7484237.html jQuery.js调用iframe父窗口与子窗口元素的方法(亲测有效) 子页面获取父页面的id ...

  9. JQueryiframe页面操作父页面中的元素与方法(实例讲解)

    1)在iframe中查找父页面元素的方法:$('#id', window.parent.document) 2)在iframe中调用父页面中定义的方法和变量:parent.methodparent.v ...

随机推荐

  1. sql还原(.sql文件还原)

    第一步: 把还原文件直接拖到SQL Server 2012(或者其他版本)里面,这里以MyDB.sql为例

  2. 使用wget下载JDK8

    每次去官网下载JDK有点烦 但是直接使用wget 又得同意协议所以 使用如下的wget就好了(注意是64位的哦) 先去官网看一下地址变化 没有如下 :修改后面的下载地址即可 注意哦~ 2.然后使用下面 ...

  3. javacpp-opencv图像处理系列：国内车辆牌照检测识别系统（万份测试车牌识别准确率99.7%以上，单次平均耗时39ms）

    javaCV图像处理系列: 一.javaCV图像处理之1:实时视频添加文字水印并截取视频图像保存成图片,实现文字水印的字体.位置.大小.粗度.翻转.平滑等操作 二.javaCV图像处理之2:实时视频添 ...

  4. git clone https://github.com/istester/ido.git ，确提示“Failed to connect to 192.168.1.22 port 8080: Connection refused” 的解决办法 。

    不知道是否有同学遇到如下的问题: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 11.0px Menlo } span.s1 { } git clone ...

  5. linux定时任务访问url

    这次linux定时任务设置成功,也算是自己学习linux中一个小小的里程碑.:) 撒花撒花--- 以下操作均是在ubuntu 下操作的,亲测有效,其他的linux系统还望亲们自己去查.鞠躬感谢! 1 ...

  6. linq中给字段添加别名

    linq 是我们在查询中经常回用到的一种形式,比如我们创建一个类,然后List<添加> 并绑定到表格中 public class Modeltest { string id; public ...

  7. 新增article注意事项

    默认情况下在日志复制中如果新增加Article那么需要产生一个包含所有Article的Snapshot.由于产生Snapshot会加锁,同时会产生IO操作,所以对于大的数据库性能影响是很大的. 可以通 ...

  8. asp.net core 教程(七)-异常处理、静态文件

    Asp.Net Core-异常处理 Asp.Net Core-异常处理 在这一章,我们将讨论异常和错误处理.当 ASP.NET Core应用程序中发生错误时,您可以以各种不同的方式来处理.让我们来看看 ...

  9. string services

    string通用字符串操作: re,正则表达式 difflib,比较序列 stringIO:以文件的方式来读和写字符串 CstringIO:更快捷的stringIO版本 textwrap:文本包装和填 ...

  10. phpcms V9 后台验证码图片不显示

    某个网站在本地运行成功,上传到服务器上后,发现后台登陆的验证码图片不显示 根据网上提供的解决方案, 网站路径变量web_path没问题 database.system的配置路径没问题 apache的G ...