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 相关文章推荐
JSON 入门指南 想了解json的朋友可以看下
Aug 26 Javascript
Javascript结合css实现网页换肤功能
Nov 02 Javascript
Extjs学习笔记之二 初识Extjs之Form
Jan 07 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
jQuery图片的展开和收缩实现代码
Apr 16 Javascript
基于jquery实现的可编辑下拉框实现代码
Aug 02 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
JQuery 实现在同一页面锚点链接之间的平滑滚动
Oct 29 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
vue router 动态路由清除方式
May 25 Vue.js
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-MySQL教程归纳总结
2008/06/07 PHP
php中调用其他系统http接口的方法说明
2014/02/28 PHP
jquery validate使用攻略 第四步
2010/07/01 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
初识angular框架后的所思所想
2016/02/19 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
JavaScript事件学习小结(一)事件流
2016/06/09 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
AngularJS 模块详解及简单实例
2016/07/28 Javascript
jQuery使用getJSON方法获取json数据完整示例
2016/09/13 Javascript
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
javascript自执行函数
2017/02/10 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
详解Vue-cli 创建的项目如何跨域请求
2017/05/18 Javascript
AngularJS自定义指令之复制指令实现方法
2017/05/18 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
2017/09/06 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
微信小程序云函数添加数据到数据库的方法
2020/03/04 Javascript
Python的re模块正则表达式操作
2016/05/25 Python
详谈套接字中SO_REUSEPORT和SO_REUSEADDR的区别
2018/04/28 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
对django layer弹窗组件的使用详解
2019/08/31 Python
Python表达式的优先级详解
2020/02/18 Python
Python如何实现的二分查找算法
2020/05/27 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
培训楼经理岗位责任制
2014/02/10 职场文书
竞选学习委员演讲稿
2014/04/28 职场文书
投标授权委托书范文
2014/08/02 职场文书
六一儿童节活动总结
2014/08/27 职场文书
会议邀请函
2015/01/30 职场文书
python 学习GCN图卷积神经网络
2022/05/11 Python
MySql如何将查询的出来的字段进行转换
2022/06/14 MySQL