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 相关文章推荐
转一个日期输入控件,支持FF
Apr 27 Javascript
JavaScript 提升运行速度之循环篇 译文
Aug 15 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
Sep 20 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
Aug 13 Javascript
javaScript中slice函数用法实例分析
Jun 08 Javascript
jquery自定义表格样式
Nov 23 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
JS实现仿饿了么在浏览器标签页失去焦点时网页Title改变
Jun 01 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
ES2020 已定稿,真实场景案例分析
May 25 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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
农民和部队如何穿矿
2020/03/04 星际争霸
php制作的简单验证码识别代码
2016/01/26 PHP
简单的pgsql pdo php操作类实现代码
2016/08/25 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
使用jquery操作session方法分享
2015/01/22 Javascript
javascript实时获取鼠标坐标值并显示的方法
2015/04/30 Javascript
javascript获取select值的方法分析
2015/07/02 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
AngularJS中的缓存使用
2017/01/11 Javascript
ReactNative踩坑之配置调试端口的解决方法
2017/07/28 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
2018/01/29 jQuery
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
原生js实现公告滚动效果
2021/01/10 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
浅谈vue.use()方法从源码到使用
2019/05/12 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
Python实现发送email的几种常用方法
2014/08/18 Python
Python魔术方法详解
2015/02/14 Python
Python简单的制作图片验证码实例
2017/05/31 Python
Python中read()、readline()和readlines()三者间的区别和用法
2017/07/30 Python
django框架自定义用户表操作示例
2018/08/07 Python
python实现从ftp服务器下载文件
2020/03/03 Python
python 使用cycle构造无限循环迭代器
2020/12/02 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
《伯牙绝弦》教学反思
2014/03/02 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
社区文艺活动方案
2014/08/19 职场文书
小学中等生评语
2014/12/29 职场文书
实习科室评语
2015/01/04 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
《活见鬼》教学反思
2016/02/24 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS