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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
javascript图像处理—仿射变换深度理解
Jan 16 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
js实现的下拉框二级联动效果
Apr 30 Javascript
在localStorage中存储对象数组并读取的方法
Sep 24 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
Oct 28 Javascript
Vue的百度地图插件尝试使用
Sep 06 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
javascript实现移动端轮播图
Dec 09 Javascript
如何在vue-cli中使用css-loader实现css module
Jan 07 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编写PDF文档生成器
2006/10/09 PHP
使用PHP提取视频网站页面中的FLASH地址的代码
2010/04/17 PHP
php smarty 二级分类代码和模版循环例子
2011/06/01 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
PHP pear安装配置教程
2016/05/14 PHP
Laravel框架使用Seeder实现自动填充数据功能
2018/06/13 PHP
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript获取系统当前时间的方法
2015/11/19 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
微信小程序 Template详解及简单实例
2017/01/05 Javascript
BootstrapTable refresh 方法使用实例简单介绍
2017/02/20 Javascript
Vue上传组件vue Simple Uploader的用法示例
2017/08/25 Javascript
react-router v4如何使用history控制路由跳转详解
2018/01/09 Javascript
JS声明对象时属性名加引号与不加引号的问题及解决方法
2018/02/16 Javascript
微信小程序调用微信支付接口的实现方法
2019/04/29 Javascript
vue-cli3+ts+webpack实现多入口多出口功能
2019/05/30 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
vue 动态给每个页面添加title、关键词和描述的方法
2020/08/28 Javascript
python 读写txt文件 json文件的实现方法
2016/10/22 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python调用系统底层API播放wav文件的方法
2017/08/11 Python
pycharm通过ssh连接远程服务器教程
2020/02/12 Python
Python写捕鱼达人的游戏实现
2020/03/31 Python
html5中canvas图表实现柱状图的示例
2017/11/13 HTML / CSS
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
软件测试工程师结构化面试题库
2016/11/23 面试题
心得体会怎么写
2013/12/30 职场文书
简短证婚人证婚词
2014/01/09 职场文书
霸气队列口号
2014/06/18 职场文书
二手房购房协议书范本
2014/10/05 职场文书
销售经理助理岗位职责
2015/04/13 职场文书
Python办公自动化PPT批量转换操作
2021/09/15 Python
详细聊一聊mysql的树形结构存储以及查询
2022/04/05 MySQL