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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
JS的replace方法介绍
Oct 20 Javascript
JS模态窗口返回值兼容问题的完美解决方法
May 28 Javascript
微信小程序 wx.request(object) API详解及实例代码
Sep 30 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
Mar 07 Javascript
使用JS动态显示文本
Sep 09 Javascript
bootstrap模态框嵌套、tabindex属性、去除阴影的示例代码
Oct 17 Javascript
基于node.js实现微信支付退款功能
Dec 19 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
JavaScript键盘事件常见用法实例分析
Jan 03 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 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
[EPIC] Larva vs Flash ZvT @ Crossing Field [2017-10-09]
2020/03/17 星际争霸
Laravel模板引擎Blade中section的一些标签的区别介绍
2015/02/10 PHP
PHP仿qq空间或朋友圈发布动态、评论动态、回复评论、删除动态或评论的功能(上)
2017/05/26 PHP
tp5(thinkPHP5)框架数据库Db增删改查常见操作总结
2019/01/10 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
NodeJS与Mysql的交互示例代码
2013/08/18 NodeJs
JS根据变量保存方法名并执行方法示例
2014/04/04 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
Javascript中的方法和匿名方法实例详解
2015/06/13 Javascript
代码分析jQuery四种静态方法使用
2015/07/23 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
浅谈键盘上回车按钮的js触发事件
2017/02/13 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
2017/03/30 Javascript
简单实现js点击展开二级菜单功能
2017/05/16 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
LayUi数据表格自定义赋值方式
2019/10/26 Javascript
Python批量修改文本文件内容的方法
2016/04/29 Python
Python数据可视化正态分布简单分析及实现代码
2017/12/04 Python
使用python生成目录树
2018/03/29 Python
Django REST framework视图的用法
2019/01/16 Python
python面试题小结附答案实例代码
2019/04/11 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
DTD的含义以及作用
2014/01/26 面试题
学生安全承诺书
2014/05/22 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
分居协议书范本(律师见证版)
2014/11/26 职场文书
单位租房协议书范本
2014/12/04 职场文书
领导欢迎词范文
2015/01/26 职场文书
2015年班干部工作总结
2015/04/29 职场文书
大学学生会主席竞选稿怎么写?
2019/08/19 职场文书
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
基于angular实现树形二级表格
2021/10/16 Javascript