Jquery调用iframe父页面中的元素及方法


Posted in Javascript onAugust 23, 2016

一、在iframe中查找父页面元素的方法:

$(‘#id', window.parent.document)

二、在iframe中调用父页面中定义的方法和变量:

parent.method
parent.value

三、实例

父页面:

<%@ 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>

子页面

<%@ 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>

四、总结

Jquery调用iframe父页面中的元素及方法到这就基本结束了,希望对大家的学习和工作能有所帮助。如果有疑问可以留言讨论。

Javascript 相关文章推荐
js制作简易年历完整实例
Jan 28 Javascript
Angularjs的Controller间通信机制实例分析
Nov 07 Javascript
js通过classname来获取元素的方法
Nov 24 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
Jul 12 Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 jQuery
Vue中使用vee-validate表单验证的方法
May 09 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
Oct 02 Javascript
详解vuex 渐进式教程实例代码
Nov 27 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
Jquery组件easyUi实现表单验证示例
Aug 23 #Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 #Javascript
AngularJS使用ng-repeat指令实现下拉框
Aug 23 #Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 #Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
Aug 23 #Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 #Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 #Javascript
You might like
php根据生日计算年龄的方法
2015/07/13 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
用javascript实现给图片加链接
2007/08/15 Javascript
点击下载链接 弹出页面实现代码
2009/10/01 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
鼠标滚轮控制网页横向移动实现思路
2013/03/22 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JS判断、校验MAC地址的2个实例
2014/05/05 Javascript
javascript的document.referrer浏览器支持、失效情况总结
2014/07/18 Javascript
jQuery实现隔行背景色变色
2014/11/24 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
javascript框架设计之种子模块
2015/06/23 Javascript
js匿名函数作为函数参数详解
2016/06/01 Javascript
ionic2 tabs使用 Modal底部tab弹出框
2016/12/30 Javascript
Bootstrap 手风琴菜单的实现代码
2017/01/20 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
2019/11/23 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
由Python运算π的值深入Python中科学计算的实现
2015/04/17 Python
python中异常捕获方法详解
2017/03/03 Python
python中pandas.DataFrame的简单操作方法(创建、索引、增添与删除)
2017/03/12 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
Python装饰器(decorator)定义与用法详解
2018/02/09 Python
python实现可变变量名方法详解
2019/07/01 Python
Django models filter筛选条件详解
2020/03/16 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
中药专业毕业自荐书范文
2014/02/08 职场文书
宝宝满月酒主持词和仪式流程
2014/03/27 职场文书
希特勒经典演讲稿
2014/05/19 职场文书
军人离婚协议书样本
2014/10/21 职场文书
门市房租房协议书
2014/12/04 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis