javascript中top的作用

顶级框架与子框架交互
最新推荐文章于 2022-12-15 09:51:32 发布
原创 最新推荐文章于 2022-12-15 09:51:32 发布 · 7.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #iframe #html #框架

本文通过示例展示了如何在不同层级的HTML框架中使用JavaScript访问顶层框架对象(top)及其实现子框架间的变量共享。具体包括从b.html和c.html中访问a.html中的变量topstr。

top作用是取得最顶层框架对象 

A.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>prototype test</title>
</head>
<body>
<iframe src="b.html"></iframe>
<script language="javascript">
var topstr = "my top";
    alert(a.html='+top.location.href);
</script>

</body>
</html>B.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>prototype test</title>
</head>
<body>
<iframe src="c.html"></iframe>
<script language="javascript">

alert('b.html='+top.location.href+";a.html.topstr="+top.topstr);//top.topstr可取a.html(顶层框架参数)的topstr变量
</script>

</body>
</html>

C.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>prototype test</title>
</head>
<body>

<script language="javascript">

alert('c.html='+top.location.href+";a.html.topstr="+top.topstr);//top.topstr可取a.html(顶层框架参数)的topstr变量
</script>

</body>
</html>

 

b.html中的top=parent c.html中的top=parent.parent

js中top的作用深入剖析
12-10
每一个WINDOW对象，不论他是常规HTML页面。框架集页面。子框架还是孙子框架，都具有一个TOP属性。这个属性返回对载入浏览器得最顶层WINDOE对象得引用； 。如果WINDOW对象是常规HTML页面，TOP就是SELF 。。。。。。。顶层框架及页面， 。。。。。。。。 。。。。。。。子框架，TOP指向框架得父亲，也就是说，下面两个表达式是等效的； SELF.TOP SELF.PARENT 。如果WINDOW对象是子框架，TOP指向框架得祖父。也就是说下面两个表达式是等效得 self.top self.parent.parent 这可能提醒了你一个减少按键得好方法,尤其是当你认为能为能仅
Js中_关于top、clientTop、scrollTop、offsetTop
08-18
Js中_关于top、clientTop、scrollTop、offsetTop.doc
js中top的作用
热门推荐
舞动de人生
07-19 1万+
每一个WINDOW对象，不论他是常规HTML页面。框架集页面。子框架还是孙子框架，都具有一个TOP属性。这个属性返回对载入浏览器得最顶层WINDOE对象得引用； 。如果WINDOW对象是常规HTML页面，TOP就是SELF 。。。。。。。。。。。顶层框架及页面， 。。。。。。。。 。。。。。。。。。。。子框架，TOP指向框架得父亲，也就是说，下面两个表达式是等效的； SELF.
JS中的top是什么？
weixin_30482181的博客
04-27 1889
<iframe/>或者<frame>里面用主页面的东西，就是top.xxx如：<script>　　function func(){ ... };</script><input type='text' id='t' /><iframe scr='a.html'/>//a.html简单内容如下<script> ...
基于Python、HTML、JavaScript和CSS的豆瓣TOP250电影可视化设计源码
最新发布
10-05
JavaScript脚本在前端交互中起着至关重要的作用，它负责实现动态数据加载、用户交互事件处理以及页面动态效果的渲染，增强用户的视觉体验。CSS样式表则定义了整个网页的设计风格，包括颜色、布局、字体等，使得网页...
js中top的作用深入剖析.docx
01-21
在JavaScript中，`top`属性是一个非常重要的概念，特别是在处理窗口和框架结构时。`top`属性主要用于获取或设置浏览器窗口或框架集中的最顶层窗口引用。这个属性在多框架网页布局和交互中起着关键作用，让我们深入...
javascript-exercises:我自己的TOP javascript练习解决方案
03-12
这些是一系列JavaScript练习，旨在与“ The Odin Project”的课程一起使用。 它们从简单开始，但随着您的逐步发展而变得越来越复杂并参与其中。 最终将有一个建议的完成顺序，但是由于我们仍在进行更多练习，因此该...
javascript实现的支持放大显示效果的TOP排行源码
05-18
在JavaScript编程领域，实现支持放大显示效果的TOP排行源码是一项常见的需求，尤其在前端开发中，这样的功能常用于数据可视化或用户交互增强。本文将深入探讨如何利用JavaScript实现这一功能，并结合ECMAScript（ES...
JS中的top
wangkaiming123456的专栏
12-15 1477
/在a.html中取input的值。或者里面用主页面的东西，就是top.xxx。top.func();//在a.html中执行func()//a.html简单内容如下。
js中top、parent、frame
weixin_34128839的博客
11-10 339
引用方法top：   该变量永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令，就可以用top变量。分割窗口指:frameset或者iframe中。。 parent：   该变量指的是包含当前分割窗口的父窗口。如果在一个窗口内有分割窗口，而在其中一个分割窗口中又包含着分割窗口，则第2层的分割窗口可以用parent变量引用包含它的父分割窗口。附：Window对象、Pare...
javascript top理解
Mark的专栏
07-10 1734
event.screenY鼠标距离屏幕顶端event.clientY鼠标距离文档顶端window.screenTop文档顶端距屏幕顶端高度window.screen.height屏幕高度document.documentElement.clientHeight整个文档高度document.documentElement.offsetHeight整个文档高度
JS top关键字
weixin_33711641的博客
05-13 1480
2019独角兽企业重金招聘Python工程师标准>>> ...
javascript中top、clientTop、scrollTop、offsetTop的讲解
sxzxiaofeng168的博客
08-10 425
javascript中top、clientTop、scrollTop、offsetTop的讲解 scrollHeight: 获取对象的滚动高度。 **scrollLeft:**设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 **scrollTop:**设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 **scrollWidth:**获取对象的滚动宽...
Js中 关于top、clientTop、scrollTop、offsetTop的用法
Jruott的专栏
05-26 939
Js中 关于top、clientTop、scrollTop、offsetTop的用法 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth   (包括边线的宽); 网页可见区域高： document.body.offs
js中top.location.href、parent.location.href用法
renxing518的博客
10-16 825
window.location.href、location.href是本页面跳转 parent.location.href是上一层页面跳转 top.location.href是最外层的页面跳转 举例说明： window.location.href、location.href： 例: window.location.href= 'wapsend1.asp?zimu=A
JavaScript中Top-Down编程模式解析
接下来，我将详细解释在JavaScript中，"Top Down"方法如何被应用和实施。 首先，"Top Down"在JavaScript编程中通常指的是一种编码风格，它从主要的函数或模块开始，然后继续定义更小的、更具体的函数或对象，这些...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值