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 相关文章推荐
网页设计常用的一些技巧
Dec 22 Javascript
js之ActiveX控件使用说明 new ActiveXObject()
Mar 03 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
浅谈js中调用函数时加不加括号的问题
Jul 28 Javascript
Angular的MVC和作用域
Dec 26 Javascript
JS回调函数简单用法示例
Feb 09 Javascript
JavaScript实现form表单的多文件上传
Mar 27 Javascript
详解vue-router2.0动态路由获取参数
Jun 14 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
js实现html滑动图片拼图验证
Jun 24 Javascript
详细分析Node.js 模块系统
Jun 28 Javascript
微信小程序实现转盘抽奖
Sep 21 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
基于magic_quotes_gpc与magic_quotes_runtime的区别与使用介绍
2013/04/22 PHP
Smarty模板学习笔记之Smarty简介
2014/05/20 PHP
在Mac OS上搭建Nginx+PHP+MySQL开发环境的教程
2015/12/21 PHP
php简单计算权重的方法示例【适合抽奖类应用】
2019/06/10 PHP
php array_chunk()函数用法与注意事项
2019/07/12 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
js Dialog 实践分享
2012/10/22 Javascript
jquery弹出关闭遮罩层实例
2013/08/06 Javascript
JS设置cookie、读取cookie、删除cookie
2015/04/17 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
分享10个优化代码的CSS和JavaScript工具
2016/05/11 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
2017/08/04 Javascript
layui 解决富文本框form表单提交为空的问题
2019/10/26 Javascript
[00:32]2018DOTA2亚洲邀请赛Mineski出场
2018/04/04 DOTA
python 简单照相机调用系统摄像头实现方法 pygame
2018/08/03 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
python之拟合的实现
2019/07/19 Python
Python实现清理微信僵尸粉功能示例【基于itchat模块】
2020/05/29 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
python实现图片转字符画的完整代码
2021/02/21 Python
amazeui时间组件的实现示例
2020/08/18 HTML / CSS
编辑个人求职信范文
2013/09/21 职场文书
生产主管岗位职责
2013/11/10 职场文书
幼儿教师国培感言
2014/02/19 职场文书
银行内勤岗位职责
2014/04/09 职场文书
公司股权转让协议书
2014/04/12 职场文书
房地产推广策划方案
2014/05/19 职场文书
销售岗位职责范本
2014/06/12 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
小学国庆节活动总结
2015/03/23 职场文书
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android
在MySQL中你成功的避开了所有索引
2022/04/20 MySQL