javascript怎样以绝对地址的方式取得frame

itparadise 2011-04-12 05:15:58
如题,当我并不知道当前是哪一个页面时,不能以什么window.parent.frames...的形式取,因为当前页面是动态的,我根本不知道当前页面与我需要的frame关系是什么,能否以绝对路径的方式取到
...全文
256 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
toury 2011-04-13
  • 打赏
  • 举报
回复
给你个演示吧:
1、主框架TOP页 index.html

<!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>
<title>globe var test</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<SCRIPT LANGUAGE=javascript>
var hash={
var1: '1',
var2: '2',
json: {"id":"topbarF","src":"topbar.html"},
$ : function(id){
return document.getElementById(id);
},

doc : function(id){
var _w=document.getElementById(id);
var _d=_w.contentDocument||_w.contentWindow.document;
return _d;
}
}

</SCRIPT>

</head>

<frameset rows="82,1,*,5" cols="*" frameborder="NO" border="0" framespacing="0">
<frame id="topF" src="top.html" scrolling="NO" noresize marginwidth="0" marginheight="0" frameborder="NO" >
<frame id="topbarF" src="topbar.html" scrolling="NO" noresize marginwidth="0" marginheight="0" frameborder="NO" >
<frameset id="midF" cols="180,5,*,5,110" frameborder="NO" border="0" framespacing="0">
<frame id="leftF" src="left.html" noresize scrolling="auto" frameborder="NO" marginwidth="0" marginheight="0">
<frame id="leftbarF" src="leftbarswitch.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize BORDERCOLOR="#6699CC">
<frame id="mainF" src="main.html" marginwidth="0" marginheight="0" noresize scrolling="AUTO" frameborder="NO">
<frame id="rightbarF" src="rightbarswitch.html" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" noresize BORDERCOLOR="#6699CC">
<frame id="rightF" src="right.html" marginwidth="0" marginheight="0" noresize scrolling="AUTO" frameborder="NO">
</frameset>
<frame id="bottomF" src="bottom.html" marginwidth="0" marginheight="0" scrolling="NO" frameborder="NO" noresize>
</frameset>
<noframes><body bgcolor="#FFFFFF" text="#000000">您的浏览器不支持框架</body></noframes>
</html>

2、left.html

<!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=gb2312" />
<title>test</title>

<style type="text/css">
*{ padding:0; margin:0; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:blue;}
body{background-color:#ccc; }
li{cursor:pointer;margin:15px}
</style>
<script type="text/javascript">

var doc=top.hash.doc;
var $=function(id){ return document.getElementById(id); }

function getData(id){
var o=doc('bottomF').getElementById(id);
doc('mainF').getElementById('show').innerHTML+="<span>一级框架总数</span>:<span>"+o.value+"<span><br>";
}

function getGlobeVarData(id){
var _type=typeof eval(id);
var _data=_type=='String'?_data:_type.toString();
doc('mainF').getElementById('show').innerHTML+="<span>公共变量"+id.replace('top.hash','')+"</span>:<span>"+_data+"<span><br>";
}

</script>
</head>

<body>
<div id='a'>
<ul>
<li onclick="getData('numFrame')">获取隐藏域数据</li>
<li onclick="getGlobeVarData('top.hash.json')">获取公共变量</li>
<li onclick="getGlobeVarData('top.hash.json')">获取公共变量</li>
</ul>
<div>
</body>
</html>


3、bottom.html

<!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=gb2312" />
<title>test</title>

<style type="text/css">
*{ padding:0; margin:0; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
body{background-color:#CCC;}
</style>
<script type="text/javascript">
window.onload=function(){
document.getElementById('numFrame').value=top.frames.length;
}
</script>
</head>

<body>
<input type="hidden" id='numFrame' />
</body>
</html>

4、main.html

<!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=gb2312" />
<title>test</title>
<!--script src="http://code.jquery.com/jquery-latest.min.js" ></script-->
<style type="text/css">
*{ font-size:12px;}
body{ margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; background-color:#fff; }
span {width:100px; background:yellow; margin:20px}
</style>
<script type="text/javascript">

</script>
</head>

<body>
<div id='show'></div>
</body>
</html>

5、right.html

<!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=gb2312" />
<title>test</title>

<style type="text/css">
*{ padding:0; margin:0; font-size:12px; font-family:Arial, Helvetica, sans-serif;}
body{background-color:#ccc; }
</style>
<script type="text/javascript">

</script>
</head>

<body>
<iframe id="r" src="righttest.html" ></iframe>
</body>
</html>

6、righttest.html

<!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=gb2312" />
<title>test</title>

<style type="text/css">
*{ padding:0; margin:0; font-size:14px; font-family:Arial, Helvetica, sans-serif; color:blue;}
body{background-color:#fff; }
li{cursor:pointer;margin:15px}
</style>
<script type="text/javascript">

var doc=top.hash.doc;
var $=function(id){ return document.getElementById(id); }

function getData(id){
var o=doc('bottomF').getElementById(id);
doc('mainF').getElementById('show').innerHTML+="<span>一级框架总数</span>:<span>"+o.value+"<span><br>";
}

function getGlobeVarData(id){
var _type=typeof eval(id);
var _data=_type=='String'?_data:_type.toString();
doc('mainF').getElementById('show').innerHTML+="<span>公共变量"+id.replace('top.hash','')+"</span>:<span>"+_data+"<span><br>";
}

</script>
</head>

<body>
这是二级框架网页
<div id='a'>
<ul>
<li onclick="getData('numFrame')">获取隐藏域数据</li>
<li onclick="getGlobeVarData('top.hash.json')">获取公共变量1</li>
<li onclick="getGlobeVarData('top.hash.doc')">获取公共变量2</li>
</ul>
<div>
</body>
</html>

toury 2011-04-13
  • 打赏
  • 举报
回复
我不是上天派来救你的,但我怀疑你是上天派来折磨我的。哈哈

你忽略了8楼【顶层页面】的解释,害我白写了这么多,哼。。。。。。

itparadise 2011-04-13
  • 打赏
  • 举报
回复
你是上天派来救我的么,我以为top指的是top框架,原来top是dom对象
itparadise 2011-04-12
  • 打赏
  • 举报
回复
显示bottomBarF is not defined
itparadise 2011-04-12
  • 打赏
  • 举报
回复

function ajaxRequest(url, data, callback, type) {
alert(bottomBarF.cacheF.validationCache);
//
if ( jQuery.isFunction( data ) ) {
callback = data;
data = {};
}

return jQuery.ajax({
type: "POST",
url: url,
data: data,
success: function(data) {
if(data.success)
callback(data);
},
dataType: type
});
};
这是contentF框架页面中,外部js调用bottomBarF框架的cacheF框架
toury 2011-04-12
  • 打赏
  • 举报
回复
你不可以简化吗?3分钟的时间就够了呀。
我给你的方案都是成熟的,而且以前我都用过。既然你嫌麻烦,我只能和你说这些啦(一个比一个懒);哈哈
itparadise 2011-04-12
  • 打赏
  • 举报
回复
不好意思,我在庞大的项目中搞测试,太复杂,发不了,不过我说的很明白哟
toury 2011-04-12
  • 打赏
  • 举报
回复
无代码无真相。你把测试代码发上来
itparadise 2011-04-12
  • 打赏
  • 举报
回复
刚刚验证,发现top.xxx方式访问不到,我是从content页面(也就是同级别的frame)的外部js访问的,top is no defined
toury 2011-04-12
  • 打赏
  • 举报
回复
如果是数组之类的东东可以考虑方案1;
如果是字串之类的东东可以考虑方案2;

当然,你也可以把数组、JSON之类的数据转为字串格式,从而选用方案2
toury 2011-04-12
  • 打赏
  • 举报
回复
top.xxxxxxxxxxx中,top就直接到了顶层页面。所以我没有使用parent.xxxxx给你举例
itparadise 2011-04-12
  • 打赏
  • 举报
回复
也许我这个缓存数据是复杂对象,我就是需要规避服务器端的形式,能客户端缓存就好
itparadise 2011-04-12
  • 打赏
  • 举报
回复
那就到了正题,我一个框架页面,也许有上中下左右frame,还有嵌套iframe,如何在不定的页面里(有可能是left、right,或是嵌套的frame里),直接找到需要找到top的frame,有无一种绝对路径定位的形式
toury 2011-04-12
  • 打赏
  • 举报
回复
3、服务端变量实现:
可通过服务端的session()或application()保存一样不经常变化的数据,客户端需要时,只要
var aaa='<%=session("xxx")%>' 这样的形式就可以获得
toury 2011-04-12
  • 打赏
  • 举报
回复
如果是框架网页,你可以:
1、JS实现:
TOP页面
<script>
var itparadise=false;
var toury=false;
//这两个变量就可以实现你的需求
</script>
子页面加载时:
<script>
//改变父页面的全局变量
top.itparadise=location.href
top.toury=true;
</script>

2、隐藏域实现:

在某个frame(比如id='aaa')中设置隐藏域:
<script>
window.onload=function(){
document.getElementById("itparadise").value="1234567"
document.getElementById("toury").value="保存你的数据"
}
</script>
<input type='hidden' id="itparadise" />
<input type='hidden' id="toury" />

这样,可在其他的frame页面中取值:
var aaa=top.document.getElementById("aaa").document.getElementById("itparadise").value
var bbb=top.document.getElementById("aaa").document.getElementById("toury").value
itparadise 2011-04-12
  • 打赏
  • 举报
回复
对,也许是frame,也许是iframe
toury 2011-04-12
  • 打赏
  • 举报
回复
框架网页?
itparadise 2011-04-12
  • 打赏
  • 举报
回复
帮帮我啊
下载无需扣分,具有一定收藏价值,特此奉献! 目录如下。 javascript主页弹出窗口技巧.html div span layer的区别.html email地址的分割.html ENTER键可以让光标移到下一个输入框.html IE地址栏前换成自己的图标 .html TEXTAREA自适应文字行数的多少.html title显示日期.html 不准粘贴.html 不能为空和邮件地址的约束.html 不要滚动条.html 光标是停在文本框文字的最后.html 关闭输入法.html 删除时确认.html 判断上一页的来源.html 去掉图片链接点击后,图片周围的虚线.html 取得控件的绝对位置.html 取消选取、防止复制.html 可以在收藏夹中显示出你的图标 .html 各种样式的光标.html 回车键换行.html 在打开的子窗口刷新父窗口的代码里如何写.html 在网页中用按钮来控制前页,后页和主页的显示.html 在规定时间内跳转.html 在页面中如何加入不是满铺的背景图片,拉动页面时背景图不动.html 如何设定打开页面的大小.html 屏蔽功能键Shift,Alt,Ctr.html 屏蔽鼠标右键.html 怎么判断是否是字符.html 怎样让表单没有凹凸感.html 改变表格的内容 .html 日期减去天数等于第二个日期.html 显示个人客户端机器的日期和时间.html 显示所有链接 .html 最小化、最大化、关闭窗口.html 查看某网址的源代码 .html 查看网页源代码.html 检查一段字符串是否全由数字组成.html 检测某个网站的链接速度.html 永远都会带着框架.html 流动边框效果的表格.html 电子邮件处理提交表单.html 确认后提交.html 网页不会被缓存.html 网页将不能被另存为.html 网页是否被检索.html 脚本永不出错.html 自动的为你每次产生最後修改的日期了.html 获得一个窗口的大小.html 让弹出窗口总是在最上面.html 跑马灯 .html 选择了哪一个Radio .html 防止复制.html 防止被人frame.html 页面的打开移动.html 页面进入和退出的特效 .html

87,924

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧