≡
  • 网络编程
  • 数据库
  • CMS技巧
  • 软件编程
  • PHP笔记
  • JavaScript
  • MySQL
位置:首页 > 网络编程 > JavaScript

JS iframe调用父页面函数的简单示例

人气:796 时间:2018-09-20

这篇文章主要为大家详细介绍了JS iframe调用父页面函数的简单示例,具有一定的参考价值,可以用来参考一下。

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部分: 经测试代码如下:

/**
 *  iframe调用父页面函数
 *
 * @param 
 * @arrange (512.笔记) www.q1010.com
 **/
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(); 
})

本文来自:http://www.q1010.com/174/604-0.html

注:关于JS iframe调用父页面函数的简单示例的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。

关键词:iframe

您可能感兴趣的文章

  • js 拉伸拖动iframe框架的简单示例
上一篇:javascript 页面刷新的几种方法
下一篇:js 函数调用两种常用用法
热门文章
  • js随机生成两位数
  • js 文字超出部分隐藏、点击显示更多示例
  • 原生JS+css 点击查看全文的简单示例(类似今日头条效果)
  • javascript实现文字隐藏、展开收起的简单示例
  • JS 展开/收起按钮显示隐藏文字示例
  • JavaScript 正则判断文本是否含有超链接的简单示例
  • 原生JS实现鼠标悬停图片显示文字的简单示例
  • JS 点击按钮显示更多内容的简单示例
  • 原生js for循环遍历二维数组、嵌套元素的简单示例
  • javascript 浮点数转换成整数三种方法
  • 最新文章
    • js获取时间,处理时间等的实现方法
    • JavaScript 判断小数是否相等的简单示例
    • JavaScript 获取数组极值的简单示例
    • JavaScript防抖 & 节流的简单示例
    • JavaScript深拷贝的简单示例
    • JavaScript数组降维的简单示例
    • JavaScript手机端判断浏览器类型的简单示例
    • JavaScript获取 URL 中的参数的简单示例
    • JavaScript以“天”为单位获取响应的时间戳的简单示例
    • JavaScript时间格式化的简单示例

四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。