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 相关文章推荐
分享20多个很棒的jQuery 文件上传插件或教程
Sep 04 Javascript
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
JavaScript操作DOM元素的childNodes和children区别
Apr 01 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
webpack+react+antd脚手架优化的方法
Apr 02 Javascript
React中嵌套组件与被嵌套组件的通信过程
Jul 11 Javascript
vue2中使用sass并配置全局的sass样式变量的方法
Sep 04 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
vue中el-input绑定键盘按键(按键修饰符)
Jul 22 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
PHP制作3D扇形统计图以及对图片进行缩放操作实例
2014/10/23 PHP
PHP也能干大事 随机函数
2015/04/14 PHP
php实现可逆加密的方法
2015/08/11 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
javascript下查找父节点的简单方法
2007/08/13 Javascript
js关闭子窗体刷新父窗体实现方法
2012/12/04 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
2014/02/26 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
jQuery仿写百度百科的目录树
2017/01/03 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
Vue的状态管理vuex使用方法详解
2020/02/05 Javascript
python difflib模块示例讲解
2017/09/13 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
在windows下使用python进行串口通讯的方法
2019/07/02 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python 实现一个手机号码获取妹子名字的功能
2019/09/25 Python
python安装scipy的步骤解析
2019/09/28 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
GAP阿联酋官网:GAP UAE
2017/11/30 全球购物
无犯罪记录证明
2014/09/19 职场文书
高中班主任心得体会
2016/01/07 职场文书
《蓝鲸的眼睛》读后感5篇
2020/01/15 职场文书
详解nginx进程锁的实现
2021/06/14 Servers
解决ObjectMapper.convertValue() 遇到的一些问题
2021/06/30 Java/Android
Python 中的 copy()和deepcopy()
2021/11/07 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL