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 相关文章推荐
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jQuery实现根据类型自动显示和隐藏表单
Mar 18 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
javascript字符串与数组转换汇总
May 26 Javascript
JavaScript知识点总结(十)之this关键字
May 31 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
jQuery给表格添加分页效果
Mar 02 Javascript
微信JS-SDK选取手机照片上传功能
Apr 21 Javascript
简单实现js进度条加载效果
Mar 25 Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
Nov 25 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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 crc32()函数讲解
2019/02/14 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
xml分页+ajax请求数据源+dom取结果实例代码
2008/10/31 Javascript
javascript 二分法(数组array)
2010/04/24 Javascript
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
JSONP跨域请求实例详解
2016/07/04 Javascript
JS实现的表头列头固定页面功能示例
2017/01/10 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
vue v-for 使用问题整理小结
2019/08/04 Javascript
layer.open的自适应及居中及子页面标题的修改方法
2019/09/05 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
javascript实现简易计算器功能
2020/09/23 Javascript
arcgis.js控制地图地体的显示范围超出区域自动弹回(实现思路)
2021/01/28 Javascript
Python AES加密模块用法分析
2017/05/22 Python
python logging日志模块的详解
2017/10/29 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
python爬虫之urllib3的使用示例
2018/07/09 Python
Python 3.8新特征之asyncio REPL
2019/05/28 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
自荐信格式写作方法有哪些呢
2013/11/20 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
司法廉洁教育心得体会
2016/01/20 职场文书
导游词之西湖雷峰塔
2019/09/18 职场文书
mybatis使用oracle进行添加数据的方法
2021/04/27 Oracle