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 13 Javascript
Zero Clipboard js+swf实现的复制功能使用方法
Mar 07 Javascript
JQuery 常用操作代码
Mar 14 Javascript
浅析jQuery的链式调用之each函数
Dec 03 Javascript
JavaScript模板引擎用法实例
Jul 10 Javascript
JavaScript函数柯里化原理与用法分析
Mar 31 Javascript
H5图片压缩与上传实例
Apr 21 Javascript
详解如何在vue项目中引入elementUI组件
Feb 11 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
写gulp遇到的ES6问题详解
Dec 03 Javascript
微信小程序绑定手机号获取验证码功能
Oct 22 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 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+AJAX无刷新分页实现方法
2015/11/03 PHP
php简单的上传类分享
2016/05/15 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
2019/12/31 PHP
js加解密 脚本解密
2008/02/22 Javascript
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
基于Jquery与WebMethod投票功能实现代码
2011/01/19 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
JavaScript生成随机数的4种自定义函数分享
2015/02/28 Javascript
JS密码生成与强度检测完整实例(附demo源码下载)
2016/04/06 Javascript
js计算系统当前日期是星期几的方法
2016/07/14 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JavaScript中利用for循环遍历数组
2017/01/15 Javascript
基于vue2.0实现简单轮播图
2017/11/27 Javascript
ng-alain表单使用方式详解
2018/07/10 Javascript
微信小程序实现自定义加载图标功能
2018/07/19 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
解决vue中使用proxy配置不同端口和ip接口问题
2019/08/14 Javascript
jQuery表单校验插件validator使用方法详解
2020/02/18 jQuery
js实现时钟定时器
2020/03/26 Javascript
基于better-scroll 实现歌词联动功能的代码
2020/05/07 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
2020/10/22 Javascript
Flask框架的学习指南之制作简单blog系统
2016/11/20 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
python实现简易版计算器
2020/06/22 Python
详解Python文件修改的两种方式
2019/08/22 Python
Pycharm+Python+PyQt5使用详解
2019/09/25 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
python 制作本地应用搜索工具
2021/02/27 Python
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
2013英文求职信模板范文
2013/11/15 职场文书
理财学专业自荐书
2014/06/28 职场文书
工作表扬信范文
2015/01/17 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python