前端页面设置重置按钮或刷新按钮

最新推荐文章于 2023-10-24 11:24:51 发布

jq1223

最新推荐文章于 2023-10-24 11:24:51 发布

阅读量3.8k

点赞数 2

分类专栏： html 文章标签： html

本文链接：https://blog.csdn.net/jq1223/article/details/112568056

版权

html 专栏收录该内容

8 篇文章

订阅专栏

博客围绕HTML展开，但具体内容缺失。HTML是前端开发重要技术，用于构建网页结构。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


下面以三个页面分别命名为frame.html、top.html、bottom.html为例来具体说明如何做。 
frame.html 由上(top.html)下(bottom.html)两个页面组成，代码如下： 

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> frame </TITLE> 
</HEAD> 
<frameset rows="50%,50%"> 
<frame name=top src="top.html"> 
<frame name=bottom src="bottom.html"> 
</frameset> 
</HTML> 

现在假设top.html (即上面的页面) 有七个button来实现对bottom.html (即下面的页面) 的刷新，可以用以下七种语句，哪个好用自己看着办了。
top.html 页面的代码如下： 

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE>top.html </TITLE> 
</HEAD> 
<BODY> 
//七种方式
1.  <button onclick="window.parent.frames[1].location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置1</button>
2.  <button onclick="window.parent.frames.bottom.location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置2</button>
3.   <button onclick="window.parent.frames['bottom'].location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置3</button>
4.   <button onclick="window.parent.frames.item(1).location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置4</button>
5.    <button onclick="window.parent.frames.item('bottom').location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置5</button>
6.    <button onclick="window.parent.bottom.location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置6</button>
7.   <button onclick="window.parent['bottom'].location.reload()" class="layui-btn layui-btn-sm layui-btn-primary"><i class="layui-icon layui-icon-refresh"></i>重置7</button>
</BODY> 
</HTML> 

下面是bottom.html页面源代码，为了证明下方页面的确被刷新了，在装载完页面弹出一个对话框。 

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> bottom.html </TITLE> 
</HEAD> 
<BODY onload="alert('666666666666！')"> 
<h1>This is the content in bottom.html.</h1> 
</BODY> 
</HTML> 

解释： 
1.window指代的是当前页面，例如对于此例它指的是top.html页面。 
2.parent指的是当前页面的父页面，也就是包含它的框架页面。例如对于此例它指的是framedemo.html。 
3.frames是window对象，是一个数组。代表着该框架内所有子页面。 
4.item是方法。返回数组里面的元素。 
5.如果子页面也是个框架页面，里面还是其它的子页面，那么上面的有些方法可能不行。 
附： 
Javascript刷新页面的几种方法： 
1 history.go(0) 
2 location.reload() 
3 location=location 
4 location.assign(location) 
5 document.execCommand('Refresh') 
6 window.navigate(location) 
7 location.replace(location) 
8 document.URL=location.href 

二、自动刷新页面 
1.页面自动刷新：把如下代码加入<head>区域中 
<meta http-equiv="refresh" content="20"> 
其中20指每隔20秒刷新一次页面. 
2.页面自动跳转：把如下代码加入<head>区域中 
<meta http-equiv="refresh" content="20;url=http://www.jb51.net"> 
其中20指隔20秒后跳转到http://www.jb51.net页面 
3.页面自动刷新js版