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 相关文章推荐
Javascript异步表单提交,图片上传,兼容异步模拟ajax技术
May 10 Javascript
juqery 学习之三 选择器 层级 基本
Nov 25 Javascript
Extjs根据条件设置表格某行背景色示例
Jul 23 Javascript
Javascript 数组排序详解
Oct 22 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
BootStrap入门教程(三)之响应式原理
Sep 19 Javascript
Javascript 实现全屏滚动实例代码
Dec 31 Javascript
微信小程序实现打开内置地图功能【附源码下载】
Dec 07 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
详解vue-cli 本地开发mock数据使用方法
May 29 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
php页面缓存ob系列函数介绍
2012/10/18 PHP
Could not load type System.ServiceModel.Activation.HttpModule解决办法
2012/12/29 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
分享10段PHP常用代码
2015/11/11 PHP
php使用变量动态创建类的对象用法示例
2017/02/06 PHP
yii2利用自带UploadedFile实现上传图片的示例
2017/02/16 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
phpStudy中升级MySQL版本到5.7.17的方法步骤
2017/08/03 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
新浪刚打开页面出来的全屏广告代码
2007/04/02 Javascript
Dom与浏览器兼容性说明
2010/10/25 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
JavaScript中实现异步编程模式的4种方法
2014/09/24 Javascript
js实现Select列表内容自动滚动效果代码
2015/08/20 Javascript
在js中实现邮箱格式的验证方法(推荐)
2016/10/24 Javascript
Node.js+ES6+dropload.js实现移动端下拉加载实例
2017/06/01 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
jQuery实现评论模块
2020/08/19 jQuery
Vue按时间段查询数据组件使用详解
2020/08/21 Javascript
[03:27]最受玩家喜爱奖提名:PZH_Element 致玩家寄语
2016/12/20 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python下PyGame的下载与安装过程及遇到问题
2019/08/04 Python
如何获取Python简单for循环索引
2019/11/21 Python
解决Python pip 自动更新升级失败的问题
2020/02/21 Python
Django 构建模板form表单的两种方法
2020/06/14 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
Stührling手表官方网站:男女高品质时尚手表的领先零售商
2021/01/07 全球购物
绿化先进工作者事迹材料
2014/01/30 职场文书
调解员先进事迹材料
2014/02/07 职场文书
优秀管理者获奖感言
2014/02/17 职场文书
公证委托书大全
2014/04/04 职场文书
家庭贫困证明范本(经典版)
2014/09/22 职场文书
西游降魔篇观后感
2015/06/15 职场文书