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 相关文章推荐
两个SUBMIT按钮,如何区分处理
Aug 22 Javascript
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
CSS和JS标签style属性对照表(方便js开发的朋友)
Nov 11 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
Sep 17 Javascript
javascript实现可改变滚动方向的无缝滚动实例
Jun 17 Javascript
JS数组合并push与concat区别分析
Dec 17 Javascript
基于JavaScript实现图片剪切效果
Mar 07 Javascript
Vue2.0利用vue-resource上传文件到七牛的实例代码
Jul 28 Javascript
原生JS实现列表子元素顺序反转的方法分析
Jul 02 Javascript
Vue中computed及watch区别实例解析
Aug 01 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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部分常见问题总结
2006/10/09 PHP
巧用php中的array_filter()函数去掉多维空值的代码分享
2012/09/07 PHP
php多文件上传下载示例分享
2014/02/20 PHP
php基于mcrypt_encrypt和mcrypt_decrypt实现字符串加密解密的方法
2016/07/12 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
用JS实现的一个include函数
2007/07/21 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
纯JavaScript实现的兼容各浏览器的添加和移除事件封装
2015/03/28 Javascript
基于ajax实现文件上传并显示进度条
2015/08/03 Javascript
jQuery使用中可能被XSS攻击的一些危险环节提醒
2016/05/24 Javascript
Angular模版驱动表单的使用总结
2018/05/05 Javascript
Vue实现todolist删除功能
2018/06/26 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
详解JavaScript匿名函数和闭包
2020/07/10 Javascript
小程序实现简单语音聊天的示例代码
2020/07/24 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
[01:31]DOTA2上海特级锦标赛 SECRET战队完整宣传片
2016/03/16 DOTA
Python使用turtule画五角星的方法
2015/07/09 Python
Python提取网页中超链接的方法
2016/09/18 Python
Django 日志配置按日期滚动的方法
2019/01/31 Python
浅谈Python中的可迭代对象、迭代器、For循环工作机制、生成器
2019/03/11 Python
使用 Python 遍历目录树的方法
2020/02/29 Python
Python类及获取对象属性方法解析
2020/06/15 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
image-set实现Retina屏幕下图片显示详细介绍
2012/12/24 HTML / CSS
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
2018/03/15 HTML / CSS
应聘教师推荐信
2013/10/31 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
小学教师师德整改措施
2014/09/29 职场文书
写给老婆的保证书
2015/02/27 职场文书
golang在GRPC中设置client的超时时间
2021/04/27 Golang