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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JS函数重载的解决方案
May 13 Javascript
Blocksit插件实现瀑布流数据无限( 异步)加载
Jun 20 Javascript
extjs 如何给column 加上提示
Jul 29 Javascript
浅谈关于JavaScript API设计的一些建议和准则
Jun 24 Javascript
js流动式效果显示当前系统时间
May 16 Javascript
利用JQuery实现datatables插件的增加和删除行功能
Jan 06 Javascript
js实现拖拽上传图片功能
Aug 01 Javascript
详解vue移动端项目的适配(以mint-ui为例)
Aug 17 Javascript
微信小程序云开发之模拟后台增删改查
May 16 Javascript
详解JWT token心得与使用实例
Aug 02 Javascript
你不知道的 TypeScript 高级类型(小结)
Aug 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的面试题集
2006/11/19 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP架构及原理知识点详解
2019/12/22 PHP
js 页面刷新location.reload和location.replace的区别小结
2009/12/24 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
JavaScript控制图片加载完成后调用回调函数的方法
2015/03/20 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
jquery实现下拉框多选方法介绍
2017/01/03 Javascript
node.js的事件机制
2017/02/08 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
Angular使用$http.jsonp发送跨站请求的方法
2017/03/16 Javascript
详解webpack打包vue时提取css
2017/05/26 Javascript
VS Code转换大小写、修改选中文字或代码颜色的方法
2017/12/15 Javascript
jQuery中将json数据显示到页面表格的方法
2018/05/27 jQuery
vue2.0移动端滑动事件vue-touch的实例代码
2018/11/27 Javascript
vue实现计步器功能
2019/11/01 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
vue实现图片懒加载的方法分析
2020/02/05 Javascript
Python实现简单文本字符串处理的方法
2018/01/22 Python
python爬虫面试宝典(常见问题)
2018/03/02 Python
python3.X 抓取火车票信息【修正版】
2018/06/19 Python
tensorflow学习教程之文本分类详析
2018/08/07 Python
Python 输入一个数字判断成绩分数等级的方法
2018/11/15 Python
在python环境下运用kafka对数据进行实时传输的方法
2018/12/27 Python
详解重置Django migration的常见方式
2019/02/15 Python
Python中turtle库的使用实例
2019/09/09 Python
Python3.9又更新了:dict内置新功能
2020/02/28 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
化妆品促销方案
2014/02/24 职场文书
学校端午节活动方案
2014/08/23 职场文书
公务员政审材料范文
2014/12/23 职场文书
离婚协议书的范本
2015/01/27 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
技术员岗位职责范本
2015/04/11 职场文书
军训通讯稿范文
2015/07/18 职场文书
优秀共产党员主要事迹材料
2015/11/05 职场文书