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 相关文章推荐
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS onkeypress兼容性写法详解
Apr 27 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
微信小程序 同步请求授权的详解
Aug 04 Javascript
微信小程序实践之动态控制组件的显示/隐藏功能
Jul 18 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
vue移动端监听滚动条高度的实现方法
Sep 03 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
angular组件间传值测试的方法详解
May 07 Javascript
Element实现动态表格的示例代码
Aug 02 Javascript
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
获得Google PR值的PHP代码
2007/01/28 PHP
php中的三元运算符使用说明
2011/07/03 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
javascript prototype,executing,context,closure
2008/12/24 Javascript
JavaScript作用域链使用介绍
2013/08/29 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
js实现模拟计算器退格键删除文字效果的方法
2015/05/07 Javascript
jQuery的end()方法使用详解
2015/07/15 Javascript
js动态添加的DIV中的onclick事件简单实例
2016/07/25 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
如何理解Vue的render函数的具体用法
2017/08/30 Javascript
node.js利用mongoose获取mongodb数据的格式化问题详解
2017/10/06 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
详解vue中移动端自适应方案
2019/05/05 Javascript
使用vuex解决刷新页面state数据消失的问题记录
2019/05/08 Javascript
vue服务端渲染操作简单入门实例分析
2019/08/28 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python标准库defaultdict模块使用示例
2015/04/28 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
使用tensorflow实现线性回归
2018/09/08 Python
PyQt5创建一个新窗口的实例
2019/06/20 Python
PyQt QCombobox设置行高的方法
2019/06/20 Python
Python中的Cookie模块如何使用
2020/06/04 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
python中PyQuery库用法分享
2021/01/15 Python
CSS3绘制六边形的简单实现
2016/08/25 HTML / CSS
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
青年教师培训方案
2014/02/06 职场文书
《最可爱的人》教学反思
2014/02/14 职场文书
房屋租赁协议书
2014/04/10 职场文书
小学生九一八纪念日83周年演讲稿500字
2014/09/17 职场文书
研究生学习计划书应该怎么写?
2019/09/10 职场文书
javascript之Object.assign()的痛点分析
2022/03/03 Javascript
详解Redis的三种常用的缓存读写策略步骤
2022/05/06 Redis