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 相关文章推荐
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
JavaScript分秒倒计时器实现方法
Feb 02 Javascript
AngularJS 遇到的小坑与技巧小结
Jun 07 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
详解Web使用webpack构建前端项目
Sep 23 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
Sep 27 Javascript
记录一次完整的react hooks实践
Mar 11 Javascript
使vue实现jQuery调用的两种方法
May 12 jQuery
创建nuxt.js项目流程图解
Mar 13 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
域名查询代码公布
2006/10/09 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP函数extension_loaded()用法实例
2015/01/19 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
点击文章内容处弹出页面代码
2009/10/01 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
2010/04/23 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
jQuery powerFloat万能浮动层下拉层插件使用介绍
2010/12/27 Javascript
最新的10款jQuery内容滑块插件分享
2011/09/18 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
canvas学习之API整理笔记(一)
2016/12/29 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
解决npm管理员身份install时出现权限的问题
2018/03/16 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
JavaScript类的继承多种实现方法
2020/05/30 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
Python读取图片EXIF信息类库介绍和使用实例
2014/07/10 Python
python基础教程之序列详解
2014/08/29 Python
python数组复制拷贝的实现方法
2015/06/09 Python
在win和Linux系统中python命令行运行的不同
2016/07/03 Python
python实现俄罗斯方块游戏
2020/03/25 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python scatter函数用法实例详解
2020/02/11 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
python pillow库的基础使用教程
2021/01/13 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Sofmap官网:日本著名的数码电器专卖店
2017/05/19 全球购物
世界上最好的儿童品牌:AlexandAlexa
2018/01/27 全球购物
全球独特生活方式产品和礼品购物网站:AHAlife
2018/09/18 全球购物
儿科护士自我鉴定
2013/10/14 职场文书
关于礼仪的演讲稿
2014/01/04 职场文书
弘扬民族精神演讲稿
2014/05/07 职场文书
铣工实训报告
2014/11/05 职场文书
施工安全保证书
2015/05/09 职场文书