在实际的项目开发中，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. Docker手动配置Lamp镜像

    自从接了学长布置的任务,自学Docker也学了很久了,先整一个Lamp出来吧 在Docker Hub上找了很多Lamp的镜像 网上都说tutum的镜像做的还是不错的 试试 折腾了一上午无果... 算了 ...

  2. 化繁为简(三)—探索Mapreduce简要原理与实践

    目录-探索mapreduce 1.Mapreduce的模型简介与特性?Yarn的作用? 2.mapreduce的工作原理是怎样的? 3.配置Yarn与Mapreduce.演示Mapreduce例子程序 ...

  3. IBM WebSphere ESB入门指南

    [TOC] 第一章 ESB介绍 本博客介绍一款ESB产品,IBM WebSphere ESB.ESB(Enterprise Service Bus)也即企业服务总线.ESB有很多产品,IBM的IBM ...

  4. 本地修改js代码并时时生效的解决办法

    js作为客户端语言(当然它也可以作服务端语言),非常强悍,一般情况下,我们都是在开发阶段不停的改,然后上线之后就作为稳定运行的代码. 然而有时候可能因为js写得有问题,导致上线后,某些功能无法使用,这 ...

  5. js扩展父类方法

    在网上找了很多一直没找到关于JS扩展父类的方法,让我很是郁闷啊~要是真的开发组遇到了该咋整,于是乎自己手写了一些测试代码,没想到通过了……(难道是人品太好了?)废话不多说了直接上代码看看~ <s ...

  6. 聊聊AngularJs

    大家好! 今天我们要说的就是我们的AngularJs 当然呢!我们Angular呢! 1.是一个MVC框架,如果我们说他是一个mvc的框架呢!就是有些不太具体了,其实他是我们的MVC的扩展版 当然他具 ...

  7. Tomcat 的 catalina.out 日志分割

    一.背景 Tomcat 的 catalina.out 日志量不断增加,占用空间较大,且默认是不滚动的.因此,需要对其进行日志分割,并进行清理. 本文选用 Cronolog 对其进行分割. 二.安装 1 ...

  8. 流畅的python学习笔记：第三章

    字典的变种: OrderedDict 首先来看下面的代码,在一个字典中,有name,age,city,在遍历这个字典的时候.顺序却是随机的,不是按照我们添加的顺序也就是name->age-> ...

  9. oracle删除数据后表空间仍过大问题解决方法

    -----亲测有效------- --一.备份原始数据库库--1.备份空表--在plsql里面执行一下这句话 然后把结果集 再执行一把 再导数据select 'alter table '||table ...

  10. 如何给两个swiper建立关系

    单个swiper已经满足不了需求了. 各种花式轮播已经慢慢进入市场.swiper该如何立足,那么请看. <div class="swiper-container"> & ...