在实际的项目开发中，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. 香港科技大学的VINS_MONO初试

    简介 VINS-Mono 是香港科技大学开源的一个VIO,我简单的测试了,发现效果不错.做个简单的笔记,详细的内容等我毕设搞完再弄. 代码主要分为前端(feature tracker),后端(slid ...

  2. Adobe After Effects 2017-14.0安装教程

    Adobe After Effects 2017-14.0安装教程 第一步:首先请将电脑的网络断开,很简单:禁用本地连接或者拔掉网线,这样就可以免除登录Creative Cloud帐号,安装更方便快捷 ...

  3. 图表（Chart & Graph）你真的用对了吗？

    欢迎大家持续关注葡萄城控件技术团队博客,更多更好的原创文章尽在这里~~ 工作中,我们常常会遇到各式各样的数据,例如网站性能,销售业绩,客户服务 .营销活动等数据.对于这些数据,有哪些行之有效的方法来形 ...

  4. map | make_pair

    #include <map> void func(std::map<int,std::pair<const char*,int>> &T_map) { st ...

  5. WAF指纹探测及识别技术

    Web应用防护系统(也称:网站应用级入侵防御系统.英文:Web Application Firewall,简称: WAF).利用国际上公认的一种说法:Web应用防火墙是通过执行一系列针对HTTP/HT ...

  6. Android网络请求框架AsyncHttpClient实例详解(配合JSON解析调用接口)

    最近做项目要求使用到网络,想来想去选择了AsyncHttpClient框架开进行APP开发.在这里把我工作期间遇到的问题以及对AsyncHttpClient的使用经验做出相应总结,希望能对您的学习有所 ...

  7. JavaScript事件（二）

    例题顺序: 1.子菜单下拉2.图片轮播3.选项卡效果4.进度条制作5.滑动效果6.滚动固定效果 1.子菜单下拉 <!DOCTYPE html PUBLIC "-//W3C//DTD X ...

  8. Array.apply(null,{length:20})与new Array(20)的区别

    Array.apply(null,{length:20}) 这句代码的实际意义:创建长度为20的一个数组,但并非空数组. 跟new Array(20)的区别在于,前一种创建方式,得到的数组中的每一个元 ...

  9. JavaScript 创建一个 form 表单并提交

    <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...

  10. PHP中对汉字进行UNICODE编码和解码的实现

    <?php /** PHP中对汉字进行UNICODE编码和解码的实现 **/ class Helper_Tool{ //php中的unicode编码转中文 static function uni ...