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入门·对象属性方法大总结
Oct 01 Javascript
WEB前端设计师常用工具集锦
Dec 09 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
Vue.js学习示例分享
Feb 05 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
Aug 03 Javascript
Vue2 监听属性改变watch的实例代码
Aug 27 Javascript
vue新建项目并配置标准路由过程解析
Dec 09 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
JavaScript如何操作css
Oct 24 Javascript
Javascript实现单选框效果
Dec 09 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实现用于验证所有类型的信用卡类
2015/03/24 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
PHP实现的简单路由和类自动加载功能
2018/03/13 PHP
用js判断用户浏览器是否是XP SP2的IE6
2007/03/08 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
在jquery中的ajax方法怎样通过JSONP进行远程调用
2014/04/04 Javascript
NodeJS制作爬虫全过程
2014/12/22 NodeJs
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
Node.js刷新session过期时间的实现方法推荐
2016/05/18 Javascript
vuejs父子组件之间数据交互详解
2017/08/09 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
redux中间件之redux-thunk的具体使用
2018/04/17 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
WEEX环境搭建与入门详解
2019/10/16 Javascript
[02:11]完美世界DOTA2联赛10月28日赛事精彩集锦:来吧展示实力强劲
2020/10/29 DOTA
python实现文件分组复制到不同目录的例子
2014/06/04 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
Python迭代器Iterable判断方法解析
2020/03/16 Python
Python实现加密接口测试方法步骤详解
2020/06/05 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
HTML5 Plus 实现手机APP拍照或相册选择图片上传功能
2016/07/13 HTML / CSS
运动会广播稿300字
2014/01/10 职场文书
运动会入场词50字
2014/02/20 职场文书
大专学生求职自荐信
2014/07/06 职场文书
2014年国庆节广播稿
2014/09/19 职场文书
2014年师德师风自我剖析材料
2014/09/27 职场文书
考研复习计划
2015/01/19 职场文书
新店开张宣传语
2015/07/13 职场文书
大学运动会通讯稿
2015/07/18 职场文书
2019邀请函格式及范文
2019/05/20 职场文书
四年级作文之植物
2019/09/20 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
python pyhs2 的安装操作
2021/04/07 Python