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

前端技术 2023/09/04 JavaScript 
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(); 
})

本文地址：https://www.stayed.cn/item/10840

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案