iframe调用父页面函数示例详解


Posted in Javascript onJuly 17, 2014
window.parent.xxxxx();//xxxxx()代表父页面方法

具体列子如下,其中包括easyUI的右键和单击事件

parent.jsp

body部分代码

<body class="easyui-layout"> 
<!-- 左侧目录 --> 
<div 
data-options="region:'west',split:true,title:'主题',iconCls:'icon-arrowIn'" 
style="width: 270px; background: #efefef"> 
<!-- 目录数 --> 
<ul id="tree" class="easyui-tree"></ul> 
</div> 
<input type="hidden" value="${param.type }" id="themeType"/> 
<!-- 右侧窗体 --> 
<div 
data-options="region:'center',title:'内容显示',iconCls:'icon-arrowOut'" style="overflow: hidden"> 
<iframe name="leftIframe" id="leftIframe" src="" frameborder="0" height="100%" width="100%"></iframe> 
</div> 
<!-- 右键菜单 --> 
<div id=rightCliMean class="easyui-menu" style="width:120px;"> 
<div onclick="updateTheme();" data-options="iconCls:'icon-edit'" >修改</div> 
<div onclick="removeObjectNode();" data-options="iconCls:'icon-tip'" >删除</div> 
</div> 
<script type="text/javascript"> 
loadTree(); 
</script> 
</body>

js部分:

function loadTree() { 
$('#tree').tree( { 
url : 'xxxxx.action, 
animate : true, 
lines : true, 
onContextMenu : function(e, node) { 
e.preventDefault(); 
$(this).tree('select', node.target); 
/** 
* 不可以对根节点(默认主题)进行操作 
*/ 
var parent = $(this).tree('getParent',node.target); 
if(parent){ 
if(node.text == '默认主题'){ 
$.messager.alert("提示信息","默认主题不能进行操作!","warning"); 
return false; 
} 

$('#rightCliMean').menu('show',{ 
left: e.pageX, 
top: e.pageY 
}); 
} 
}, 
onClick:function(node) {//单机事件 
var type = node.attributes.type; 
if("Schema" == type){ 
var themeType = $("#themeType").val(); 
$('#leftIframe').attr('src', 'xxxx.action'); 
return; 
} 
} 
}); 
} 
child.jsp
/** 
* 刷新左侧主题 
*/ 
$(function(){ 
window.parent.loadTree(); 
})
Javascript 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
js中eval详解
Mar 30 Javascript
用js正确判断用户名cookie是否存在的方法
Jan 28 Javascript
Iframe 自动适应页面的高度示例代码
Feb 26 Javascript
js获取下拉列表的值和元素个数示例
May 07 Javascript
Javascript字符串常用方法详解
Jul 21 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
vue 实现特定条件下绑定事件
Nov 09 Javascript
vue实现数字滚动效果
Jun 29 Javascript
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue 计算属性和侦听器的使用小结
Jan 25 Vue.js
js中一维数组和二位数组中的几个问题示例说明
Jul 17 #Javascript
js中函数调用的两种常用方法使用介绍
Jul 17 #Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 #Javascript
Express.JS使用详解
Jul 17 #Javascript
JavaScript DOM节点添加示例
Jul 16 #Javascript
js中各种类型的变量在if条件中是true还是false
Jul 16 #Javascript
JQuery做的一个简单的点灯游戏分享
Jul 16 #Javascript
You might like
十天学会php之第十天
2006/10/09 PHP
PHP 配置open_basedir 让各虚拟站点独立运行
2009/11/12 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
php写入文件不覆盖的实例讲解
2019/09/17 PHP
解密效果
2006/06/23 Javascript
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
brook javascript框架介绍
2011/10/10 Javascript
JS跨域总结
2012/08/30 Javascript
JS解决url传值出现中文乱码的另类办法
2013/04/08 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
JavaScript实现鼠标滑过图片变换效果的方法
2015/04/16 Javascript
JS判断图片是否加载完成方法汇总(最新版)
2016/05/13 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
vue图片上传本地预览组件使用详解
2019/02/20 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
微信小程序用户盒子、宫格列表的实现
2020/07/01 Javascript
python安装oracle扩展及数据库连接方法
2017/02/21 Python
django在接受post请求时显示403forbidden实例解析
2018/01/25 Python
python语言基本语句用法总结
2019/06/11 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python将数组n等分的实例
2019/12/02 Python
html5音频_动力节点Java学院整理
2018/08/22 HTML / CSS
canvas绘制圆角头像的实现方法
2019/01/17 HTML / CSS
Otticanet意大利:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
党的群众路线教育实践活动调研报告
2014/11/03 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
合同范本之电脑出租
2019/08/13 职场文书
MySQL 查询速度慢的原因
2021/05/25 MySQL
面试提问mysql一张表到底能存多少数据
2022/03/13 MySQL
Java数据结构之堆(优先队列)
2022/05/20 Java/Android
MySQL中TIMESTAMP类型返回日期时间数据中带有T的解决
2022/12/24 MySQL