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

 更新时间:2014年07月17日 17:19:16   投稿:whsnow   我要评论

这篇文章主要介绍了iframe如何调用父页面函数,下面有个不错的示例,大家可以参考下
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(); 
})

相关文章

  • js 操作select与option(示例讲解)

    js 操作select与option(示例讲解)

    本篇文章主要是对js 操作select与option的示例进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • JavaScript 在各个浏览器中执行的耐性

    JavaScript 在各个浏览器中执行的耐性

    经常会遇到这样一个情况:浏览器弹出对话框,提示脚本运行时间过长,询问“停止”还是“继续”。那究竟各个浏览器是如何判断在什么时候才弹出此对话框呢?
    2009-04-04
  • 深入理解JavaScript中的传值与传引用

    深入理解JavaScript中的传值与传引用

    这篇文章主要是对JavaScript中的传值与传引用进行了详细的介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-12-12
  • 谈谈我对JavaScript中typeof和instanceof的深入理解

    谈谈我对JavaScript中typeof和instanceof的深入理解

    这次主要说说javascript的类型判断函数typeof和判断构造函数原型instanceof的用法和注意的地方,对本文感兴趣的朋友一起看看吧
    2015-12-12
  • javascript基础进阶_深入剖析执行环境及作用域链

    javascript基础进阶_深入剖析执行环境及作用域链

    下面小编就为大家带来一篇javascript基础进阶_深入剖析执行环境及作用域链。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 微信JSAPI Ticket接口签名详解

    微信JSAPI Ticket接口签名详解

    这篇文章主要为大家详细介绍了微信JSAPI Ticket接口签名,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    这篇文章主要介绍了JS实现自动固定顶部的悬浮菜单栏效果,涉及JavaScript针对window.onscroll事件的响应及页面样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • JavaScript新增样式规则(推荐)

    JavaScript新增样式规则(推荐)

    这篇文章主要介绍了JavaScript新增样式规则(推荐)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • js实现仿Discuz文本框弹出层效果

    js实现仿Discuz文本框弹出层效果

    这篇文章主要介绍了js实现仿Discuz文本框弹出层效果的方法,可实现点击文本框弹出窗口选择数据的效果,涉及鼠标事件及页面自定义弹出窗口的相关操作技巧,需要的朋友可以参考下
    2015-08-08
  • JavaScript中的函数(二)

    JavaScript中的函数(二)

    函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。本文给大家介绍介绍javascript中的函数(二),对javascript函数相关知识感兴趣的朋友一起学习吧
    2015-12-12

最新评论