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 相关文章推荐
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
Oct 24 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
Jul 04 Javascript
Javascript实现时间倒计时效果
Jul 15 Javascript
js的各种数据类型判断的介绍
Jan 19 Javascript
JavaScript JSON使用原理及注意事项
Jul 30 Javascript
JS实现简单贪吃蛇小游戏
Oct 28 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
php 生成唯一id的几种解决方法
2013/03/08 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
curl和libcurl的区别简介
2015/07/01 PHP
php统计数组元素个数的方法
2015/07/02 PHP
js 编写规范
2010/03/03 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
js为鼠标添加右击事件防止默认的右击菜单弹出
2013/07/29 Javascript
分享经典的JavaScript开发技巧
2015/11/21 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
vue实现标签云效果的方法详解
2019/08/28 Javascript
layui实现数据表格隐藏列的示例
2019/10/25 Javascript
js实现省级联动(数据结构优化)
2020/07/17 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
Python File(文件) 方法整理
2019/02/18 Python
Python利用requests模块下载图片实例代码
2019/08/12 Python
Python类如何定义私有变量
2020/02/03 Python
tensorflow2.0保存和恢复模型3种方法
2020/02/03 Python
python识别验证码图片实例详解
2020/02/17 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
HTML5之多线程(Web Worker)
2019/01/02 HTML / CSS
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
大学学生会竞选演讲稿
2014/04/25 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
未婚证明格式
2015/06/15 职场文书
病房管理制度范本
2015/08/06 职场文书
优质护理服务心得体会
2016/01/22 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
mysql sql常用语句大全
2022/06/21 MySQL