javaScript 框架函数互相调用

最新推荐文章于 2022-04-28 16:14:01 发布
最新推荐文章于 2022-04-28 16:14:01 发布
阅读量366 收藏
点赞数
分类专栏： javascript 文章标签： javascript 框架 function xhtml 测试 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yi2542578/article/details/7841356
版权

例：

window.parent.window.parent.leftframe.Tree.setNodeTitle(title);

window.parent.window.parent.frames["leftframe"].Tree.setNodeTitle(title);

注：

leftframe： 是框架Id

Tree.setNodeTitle()：是js函数


以下是完整案例

1.index.htlml

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页</title>
</head>
 <frameset cols="20%,*">
     <frame src="left.html" id="leftframe" name="leftframe" noresize="noresize" />
        <frame src="right.html" id="rightframe" name="rightframe" />
    </frameset>
</html>

2.left 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style  type="text/css">
dl dd{ line-height:30px;}
.select{ background-color:#ccc;}
</style>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var Tree={
selectedNode:null,
params:{
rightTabIndex:0  //默认为0
},
setParams:function(paramJson){
for(var key in paramJson){
this.params[key]=paramJson[key];
}
// alert("赋值成功"+this.params.rightTabIndex);
},
init:function(){
$("#dlTree").delegate("dd","click",this.nodeClick);
},
nodeClick:function(){
$("#dlTree>dd.select").removeClass("select");
$(this).addClass("select");
Tree.selectedNode=$(this);
Tree.setRightFrameParams();
Tree.updateRightFrameTabData();
},
setNodeTitle:function(title){
this.selectedNode.html(title);
},
setRightFrameParams:function(){
var paramJson={"title":this.selectedNode.html()};
window.parent.window.rightframe.RightFrame.setParams(paramJson);
},
updateRightFrameTabData:function(){
window.parent.window.rightframe.RightFrame.updateTabData();
}

} // Tree End


$(function(){
  Tree.init();
  });

</script>
</head>


<body>
<dl id="dlTree">
<dt>测试管理</dt>
<dd class="select">测试1</dd>
<dd>测试2</dd>
<dd>测试3</dd>
<dd>测试4</dd>
<dd>测试5</dd>
</dl>
</body>
</html>


3.right 页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>


<style  type="text/css">
.select{ background-color:#ccc;}
</style>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var RightFrame={
tabIndex:0, //默认为0；
params:{
title:""  //标题
},
element:{
tabFrame:["#infoView","#infoDetail"]
},
setParams:function(paramJson){
for(var key in paramJson){
this.params[key]=paramJson[key];
}
},
init:function(){
$("#tab").delegate("tbody>tr>td","click",this.tabClick);
},
tabClick:function(){
$("#tab>tbody>tr>td.select").removeClass("select");
$(this).addClass("select");
var index=$(this).prevAll("td").length;
$("iframe:visible").hide();
$(RightFrame.element.tabFrame[index]).show();
RightFrame.tabIndex=index;
RightFrame.setTreeTabIndex();
},
setTreeTabIndex:function(){
//设置左边 Tree 的 Param 
window.parent.window.leftframe.Tree.setParams({rightTabIndex:this.tabIndex});
},
updateTabData:function(){ //更新Tab 页数据
 
window.infoView.Info.setData(this.params);
}
}
$(function(){
  RightFrame.init();
  });
</script>
</head>


<body>
<table id="tab">
<tbody>
<tr>
<td class="select">基本信息</td>
<td>详情信息</td>
</tr>
</tbody>
</table>
<iframe id="infoView" name="infoView" frameborder="0" src="view.html" height="600px" width="100%" style="" >
</iframe>
<iframe id="infoDetail" name="infoDetail"  frameborder="0" src="detail.html" height="600px" width="100%" style=" display:none;" >
</iframe>
</body>
</html>

4.right tab view

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
var Info={
element:{
},
init:function(){
$("#btnSave").click(this.saveClick)
},
setData:function(paramJson){
$("#title").val(paramJson.title);
},
saveClick:function(){
Info.updateTreeNodeData();
},
updateTreeNodeData:function(){
var title=$("#title").val();
//window.parent.window.parent.leftframe.Tree.setNodeTitle(title);
window.parent.window.parent.frames["leftframe"].Tree.setNodeTitle(title);
alert("ss")
}
}
$(function(){
  Info.init();
  });
</script>
</head>


<body>
基本信息页
<div >
 
<input id="title" value="测试1" />
<input type="button" id="btnSave" value="保存" />
</div>
</body>
</html>

5.right tab detail  未实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>


<body>
详情页
<div>
<input type="text" id="title" value="测试1" />
<input type="button" id="btnSave" value="保存" />
</div>
</body>
</html>


7.说明：

找一个1.6或以上版本的jquery ，修改下jquery的路径就可以了。






水影
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js调用父框架函数与弹窗调用父页面函数的简单方法
11-29
调用父级中的 aaa的函数 子页面中: onclick="window.parent.frames.aaa()" 父页面中: function aaa() { alert(‘bbbbb'); } frame框架里的页面要改其他同框架下的页面或父框架的页面就用parent window.opener引用的是window.open打开的页面的父页面。 window.frames对象可以引用iframe里的页面,也可以引用frameset里的页面. 可以这样 window.frames[0].document.getElementById(‘xx'); 可以这样 window.f
js 函数调用
chuanweigong2269的博客
10-25 173
javascript 函数四种调用方式： 一.作为一个函数调用： function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20 /...
框架页面中js方法之间调用
crystal的专栏
01-19 2443
 父到子的引用 [window.]frameName.ObjFunVarName 子到父的引用 parent.ObjFunVarName 子到子的引用 parent.frameName.ObjFunVarName 你说应该是子到子的引用 假如B.html中的f1()   A.html中的f2()   frame名称是frame1 B访问A 中的f2()用parent.frame1.f2()
js 框架间对象的调用
为天加朵云...
09-16 1502
1 操纵本表单里的文本框的数据 document.form2.textfield2.value form2: 表单name textfield2:文件框name 例:document.form2.textfield2.value=document.form1.textfield.value;2 操纵父窗口的表单里的文本框的数据 opener.document.form2.
JavaScript-函数定义与函数调用
m0_69942446的博客
04-28 1246
} document.getElementById(“demo”).innerHTML=myFunction(4,3); 分号是用来分隔可执行 JavaScript 语句。由于函数声明不是一个可执行语句，所以不以分号结束。 函数表达式： JavaScript 函数可以通过一个表达式定义。 函数表达式可以存储在变量中： 示例： 在函数表达式存储在变量后，变量也可作为一个函数使用： 上述函数以分号结尾，因为它是一个执行语句。 Function() 构造函数： 函数通过关键字 function
css如何调用函数,从CSS调用JavaScript函数
weixin_42512096的博客
08-03 1508
不，您不能直接从CSS触发JavaScript。您可以做的是使用CSS选择器以这种方式查找要观看的元素，然后观察鼠标事件。标准事件是鼠标悬停和鼠标悬停，但是它们可能有点棘手，因为它们是泡沫的(例如，当鼠标离开任何后代元素时，您会得到mouSEOut)。但是，使用适当的逻辑，它们并不是糟糕的工作，实际上如果你有很多这样的事情，你可能想使用鼠标悬停和鼠标悬停，而不是下面的替代方法，因为你可以将它们设置...
JavaScript 异步调用框架 (Part 4 - 链式调用)
10-29
我们已经实现了一个简单的异步调用框架，然而还有一些美中不足，那就是顺序执行的异步函数需要用嵌套的方式来声明。
JavaScript 异步调用框架 (Part 3 - 代码实现)
10-29
在上一篇文章里，我们说到了要实现一个Async.Operation类，通过addCallback方法传递回调函数，并且通过yield方法返回回调结果。现在我们就来实现这个类吧。
js函数在frame中的相互调用详解
01-19
框架间的互相引用一个页面中的所有框架以集合的形式作为window对象的属性提供，例如：window.frames就表示该页面内所有框架的集合，这和表单对象、链接对象、图片对象等是类似的，不同的是，这些集合是document的...
Android总结之WebView与Javascript交互（互相调用）
01-04
个人觉得目前以Hybrid App居多，单纯的数据展示我们直接采用WebView来渲染就可以了，但是有时候可能会用到两者之间传递参数的情况，今天就来总结一下两者之间如何互相调用。本篇主要介绍WebView与Javascript交互数据...
javascript 调用其他页面的js函数或变量的脚本
10-30
web开发的时候，有时候需要使用其他页面上写好的javasript函数、变量。如弹出窗口需要使用父窗口中的函数，框架1需要使用框架2中的函数。
js对URL处理
路漫漫其修远兮
08-21 994
get var regex = new RegExp("[\\?&]"+key+"=([^&#]*)&?",["i"]);   var qs = regex.exec(window.location.href);   if(qs == null)     return '';   else     return qs[1];   set    var regex = new R
asp.net与javascript编码解码
路漫漫其修远兮
11-23 450
对URL进行编码解码操作 1. UrlEncodeUnicode  与 unescape 后台：HttpUtility.UrlEncodeUnicode     HttpUtility.UrlDecode 前台：escape   unescape 2.Server.UrlEncode 与 decodeURIComponent 后台：Server.UrlEncode     S
遮罩
路漫漫其修远兮
08-24 361
/** *WindowMask 遮罩 开始 *使用：var mask=new WindowMask(); mask.show(); **/ function WindowMask(id){  if(id){   this.id=id;   this.jqueryId="#"+id  }else{   this.id="windowMask"   this.jqueryId="#
临时问题
路漫漫其修远兮
11-27 357
var newWin= window.open(url,'_blank','channelMode=yes,directories=yes,menubar=yes,status=yes,location=yes,resizable=yes,scrollbars=yes'); if(newWin){ opener=null;window.open('', '_self'); window.close
gt-grid bug
路漫漫其修远兮
11-15 346
1) showIndexColumn : true 设定以后，点击索引列会出现 javascript 错误(parentNode 是 null ....)。  增加 renderHiddenColumn 属性 (默认是true)(ok)  rowBody功能 (展开行)  每行的高度随着行的内容而变化(解决多行文字的问题)  tr td renderer
一.JS常用编码规范
路漫漫其修远兮
01-11 337
1.命名规范   a.变量、函数、参数尽量采用Camel命名    b.类名采用Pascal命名   c.不要是使用javascript保留字 2.常用规范   a.尽量避免声明全局变量，如果需要声明全局变量应使用命名空间在js顶部定义    正例：varListVar={       isFullScreen:false,   status: [],   operate:{
js通用 方法
路漫漫其修远兮
09-06 308
//过滤string中的特殊字符 function ConvertToJsonString(val) {     val = val.replace(new RegExp("\\\\",["g"]),"\\\\");     val = val.replace(new RegExp("\"",["g"]),"\\\"");     val = val.replace(new RegExp
javascript调用python函数
最新发布
07-11
在JavaScript中调用Python函数有几种方法。以下是其中一种常见的方法： 1. 使用Ajax请求：通过Ajax请求将数据发送到服务器，并在服务器端使用Python执行相应的函数。服务器端可以使用Python的Web框架（如Flask或...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值