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


Posted in Javascript onNovember 19, 2013

1)在iframe中查找父页面元素的方法:
$('#id', window.parent.document)

2)在iframe中调用父页面中定义的方法和变量:
parent.method
parent.value

3)实例

1.父页面

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="IframeDemo._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        var hello = 'hello';
        function getHelloWorld() {
            alert('hello world');
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <div id="default" style=" width:200px; height:400px; float:left;">default.aspx</div>
    <iframe id="iframeid" src="IFrame.aspx" style=" width:400px; height:400px; float:left;"></iframe>
    </div>
    </form>
</body>
</html>

2.子页面
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="IFrame.aspx.cs" Inherits="IframeDemo.IFrame" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript" src="jquery-1.5.1.min.js"></script>
    <script language="javascript" type="text/javascript">
        $(function() {
            //在iframe中查找父页面元素
            alert($('#default', window.parent.document).html());
            //在iframe中调用父页面中定义的方法
            parent.getHelloWorld();
            //在iframe中调用父页面中定义的变量
            alert(parent.hello);
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="iframe">
        IFrame.aspx
    </div>
    </form>
</body>
</html>
Javascript 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
了不起的node.js读书笔记之mongodb数据库交互
Dec 22 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
一种基于浏览器的自动小票机打印实现方案(js版)
Jul 26 Javascript
微信小程序实现实时圆形进度条的方法示例
Feb 24 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
AngularJS使用拦截器实现的loading功能完整实例
May 17 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
js实现多个倒计时并行 js拼团倒计时
Feb 25 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
最全vue的vue-amap使用高德地图插件画多边形范围的示例代码
Jul 17 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
jQuery控制iFrame(实例代码)
Nov 19 #Javascript
jquery 检测元素是否存在的实例代码
Nov 19 #Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
Nov 19 #Javascript
js 剪切板的用法(clipboardData.setData)与js match函数介绍
Nov 19 #Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 #Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 #Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 #Javascript
You might like
typecho插件编写教程(五):核心代码
2015/05/28 PHP
javascript new后的constructor属性
2010/08/05 Javascript
修改jquery.lazyload.js实现页面延迟载入
2010/12/22 Javascript
javascript学习笔记(十) js对象 继承
2012/06/19 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
在Html中使用Requirejs进行模块化开发实例详解
2016/04/15 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
Bootstrap实现登录校验表单(带验证码)
2016/06/23 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
2018/01/16 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
layui table 参数设置方法
2018/08/14 Javascript
nodejs基础之多进程实例详解
2018/12/27 NodeJs
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
[51:15]完美世界DOTA2联赛PWL S2 PXG vs Magma 第一场 11.21
2020/11/24 DOTA
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
python字符串连接方法分析
2016/04/12 Python
Python使用progressbar模块实现的显示进度条功能
2018/05/31 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
Python Matplotlib实现三维数据的散点图绘制
2019/03/19 Python
python与C、C++混编的四种方式(小结)
2019/07/15 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
python3.8.3安装教程及环境配置的详细教程(64-bit)
2020/11/28 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
环卫工人节活动总结
2014/08/29 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
spring boot实现文件上传
2022/08/14 Java/Android