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 add event remove event
Apr 07 Javascript
jQuery表格行换色的三种实现方法
Jun 27 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
Javascript控制div属性动态变化实例分析
Oct 08 Javascript
jQuery实现的网页左侧在线客服效果代码
Oct 23 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
javascript按顺序加载运行js方法
Dec 01 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
jQuery.parseJSON()函数详解
Feb 28 jQuery
vue视频播放插件vue-video-player的具体使用方法
Nov 08 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获取操作系统语言代码
2013/11/04 PHP
PHP7 参数处理机制修改
2021/03/09 PHP
基于jQuery的树控件实现代码(asp.net+json)
2010/07/11 Javascript
php对mongodb的扩展(初识如故)
2012/11/11 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
javascript带回调函数的异步脚本载入方法实例分析
2015/07/02 Javascript
跟我学习javascript的arguments对象
2015/11/16 Javascript
jQuery操作Table技巧大汇总
2016/01/23 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
JavaScript通过filereader接口读取文件
2017/05/10 Javascript
JS使用ActiveXObject实现用户提交表单时屏蔽敏感词功能
2017/06/20 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
JavaScript设计模式之单例模式简单实例教程
2018/07/02 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
js实现图片3D轮播效果
2019/09/21 Javascript
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
python实现的解析crontab配置文件代码
2014/06/30 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python实现iOS自动化打包详解步骤
2018/10/03 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
Python 获取项目根路径的代码
2019/09/27 Python
简单了解python元组tuple相关原理
2019/12/02 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
TensorFlow实现模型断点训练,checkpoint模型载入方式
2020/05/26 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
心理学专业毕业生推荐信范文
2013/11/21 职场文书
保护环境的标语
2014/06/09 职场文书
北京奥运会主题口号
2014/06/13 职场文书
不服从上级领导安排的检讨书
2014/09/14 职场文书
2015国庆节66周年标语
2015/07/30 职场文书
同学联谊会邀请函
2019/06/24 职场文书