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 SHA-1:Secure Hash Algorithm
Dec 20 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
Apr 05 Javascript
angular.bind使用心得
Oct 26 Javascript
JS日期加减,日期运算代码
Nov 05 Javascript
js for循环倒序输出数组元素的实例
Mar 01 Javascript
jQuery菜单实例(全选,反选,取消)
Aug 28 jQuery
初识 Vue.js 中的 *.Vue文件
Nov 22 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
Jan 18 jQuery
JAVA面试题 static关键字详解
Jul 16 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
完整显示当前日期和时间的JS代码
2007/09/17 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
javascript设计模式 接口介绍
2012/07/24 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
JavaScript必知必会(六) delete in instanceof
2016/06/08 Javascript
Bootstrap源码解读排版(1)
2016/12/23 Javascript
详解Vue-cli代理解决跨域问题
2017/09/27 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
微信小程序动态显示项目倒计时
2019/06/20 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
Python3实现并发检验代理池地址的方法
2016/09/18 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
对python3 sort sorted 函数的应用详解
2019/06/27 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
用Python去除图像的黑色或白色背景实例
2019/12/12 Python
Python基于yield遍历多个可迭代对象
2020/03/12 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
final, finally, finalize的区别
2012/03/01 面试题
设计师求职信
2014/07/01 职场文书
园林技术专业求职信
2014/07/28 职场文书
八一建军节营销活动方案
2014/08/31 职场文书
长江三峡导游词
2015/01/31 职场文书
七一建党节慰问信
2015/02/14 职场文书
酒店员工辞职信范文
2015/02/28 职场文书
统计员岗位职责范本
2015/04/14 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Python四款GUI图形界面库介绍
2022/06/05 Python