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 相关文章推荐
JavaScript中的作用域链和闭包
Jun 30 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
Mar 09 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
Vue Ajax跨域请求实例详解
Jun 20 Javascript
vue引入axios同源跨域问题
Sep 27 Javascript
详解Angular5/Angular6项目如何添加热更新(HMR)功能
Oct 10 Javascript
vue中多个倒计时实现代码实例
Mar 27 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
Vuex的API文档说明详解
Feb 05 Javascript
js实现点击烟花特效
Oct 14 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
一次编写,随处运行
2006/10/09 PHP
php daodb插入、更新与删除数据
2009/03/19 PHP
php权重计算方法代码分享
2014/01/09 PHP
php身份证号码检查类实例
2015/06/18 PHP
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
jquery tools之tabs 选项卡/页签
2009/07/25 Javascript
淘宝搜索框效果实现分析
2011/03/05 Javascript
基于jQuery实现左右div自适应高度完全相同的代码
2012/08/09 Javascript
在JavaScript里嵌入大量字符串常量的实现方法
2013/07/07 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
jquery插件jquery倒计时插件分享
2013/12/27 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
JavaScript中join()方法的使用简介
2015/06/09 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
2019/05/08 Javascript
如何在项目中使用log4.js的方法步骤
2019/07/16 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
layui-table对返回的数据进行转变显示的实例
2019/09/04 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
vuex 实现getter值赋值给vue组件里的data示例
2019/11/05 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
打开电脑上的QQ的python代码
2013/02/10 Python
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
python查看微信好友是否删除自己
2016/12/19 Python
python 中if else 语句的作用及示例代码
2018/03/05 Python
分享一下Python数据分析常用的8款工具
2018/04/29 Python
Python处理时间日期坐标轴过程详解
2019/06/25 Python
Python爬虫入门有哪些基础知识点
2020/06/02 Python
基于Python实现2种反转链表方法代码实例
2020/07/06 Python
吉列剃须刀英国官网:Gillette英国
2019/03/28 全球购物
Kingsoft金山公司C/C++笔试题
2016/05/10 面试题
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
掌握一个领域知识,高效学习必备方法
2019/08/08 职场文书