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在IE下使用未闭合的xml代码创建元素时的Bug介绍
Jan 10 Javascript
jQuery点击后一组图片左右滑动的实现代码
Aug 16 Javascript
JS获得URL超链接的参数值实例代码
Jun 21 Javascript
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
Jun 09 jQuery
JQuery EasyUI 结合ztrIee的后台页面开发实例
Sep 01 jQuery
AngularJS的$location使用方法详解
Oct 19 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
js实现超级玛丽小游戏
Mar 18 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 定界符格式引起的错误
2011/05/24 PHP
PHP函数strip_tags的一个bug浅析
2014/05/22 PHP
ThinkPHP3.1新特性之命名范围的使用
2014/06/19 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
JS记录用户登录次数实现代码
2014/01/15 Javascript
无限树Jquery插件zTree的常用功能特性总结
2014/09/11 Javascript
jQuery横向擦除焦点图特效代码分享
2015/09/06 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
微信小程序自动客服功能
2017/11/02 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
electron + vue项目实现打印小票功能及实现代码
2018/11/25 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Vue项目中使用mock.js的完整步骤
2021/01/12 Vue.js
[01:14]TI珍贵瞬间系列(六):冠军
2020/08/30 DOTA
十条建议帮你提高Python编程效率
2016/02/16 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python基础教程之五种数据类型详解
2017/01/12 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python实现人机猜拳小游戏
2020/02/03 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
使用canvas绘制贝塞尔曲线
2014/12/17 HTML / CSS
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Hoover胡佛官网:美国吸尘器和洗地机品牌
2019/01/09 全球购物
六查六看自查材料
2014/02/17 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
小学生操行评语大全
2014/04/22 职场文书
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python
基于redis+lua进行限流的方法
2022/07/23 Redis