在实际的项目开发中，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. Finding Similar Users-Euclidean Distance Score

    Purpose: Finding Similar Users Method:  Euclidean Distance Score ex2.py critics={'Lisa Rose': {'Lady ...

  2. 如何动态加载js文件，$.getScript()方法的使用

    有时候我们需要动态在页面中加载js文件,jquery封装了getScript()方法,不用自己再创建标签了. 写法: $.getScript("name.js",function( ...

  3. NLTK学习笔记(三):NLTK的一些工具

    主要总结一下简单的工具:条件频率分布.正则表达式.词干提取器和归并器. 条件分布频率 <自然语言学习>很多地方都用到了条件分布频率,nltk提供了两种常用的接口:FreqDist 和 Co ...

  4. nodeJS实战：自定义模块与引入，不同模块的函数传递及回调处理，exports与module.exports（基于nodejs6.2.0）

    前言:本文基于上一篇文章中的源代码进行改写,地址:http://blog.csdn.net/eguid_1/article/details/52182386 注意:为什么不用module.export ...

  5. Webpack 开发工具与模块热替换

    Webpack 开发工具与模块热替换 ​⚠️ 注意: 永远不要在生产环境中使用这些工具,永远不要. devtool 当 JavaScript 异常抛出时,你常会想知道这个错误发生在哪个文件的哪一行.然 ...

  6. 使用HttpClient 调用Web Api

    C#4.5 添加了异步调用Web Api . 如果你的项目是4.5以上版本,可以直接参考官方文档. http://www.asp.net/web-api/overview/web-api-client ...

  7. Perl正则表达式例子

    Perl正则表达式 一.介绍 正则表达式各语言都有自己的规范,但是基本都差不多,都是由元字符的组合来进行匹配:由于Nmap内嵌的服务与版本探测是使用的Perl正则规范,因此此篇博客记录一下Perl正则 ...

  8. Java IO学习笔记二

    Java IO学习笔记二 流的概念 在程序中所有的数据都是以流的方式进行传输或保存的,程序需要数据的时候要使用输入流读取数据,而当程序需要将一些数据保存起来的时候,就要使用输出流完成. 程序中的输入输 ...

  9. python 标准库 -- logging

    线程安全的日志记录模块. 一. 使用示例 import logging logging.basicConfig(filename="app.log", format="% ...

  10. 初步探究java中程序退出、GC垃圾回收时，socket tcp连接的行为

    初步探究java中程序退出.GC垃圾回收时,socket tcp连接的行为 今天在项目开发中需要用到socket tcp连接相关(作为tcp客户端),在思考中发觉需要理清socket主动.被动关闭时发 ...