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

最新推荐文章于 2024-05-14 09:52:45 发布
最新推荐文章于 2024-05-14 09:52:45 发布
阅读量3.6k 收藏 8
点赞数 2
分类专栏： html 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jq1223/article/details/112568056
版权 

下面以三个页面分别命名为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版
jq1223
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
react 嵌套iframe_React嵌套iframe,使用postMassage进行交互
weixin_35523284的博客
01-13 3185
iframe是什么? 引用:MDNwindow.postMessage() 方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议(通常为https)，端口号(443为https的默认值)，以及主机 (两个页面的模数 Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控...
react-iframe-bind:在 iframe 之间共享组件
06-10
iframe 绑定 在 iframe 之间共享组件并保持同步 用法 npm install npm start open http://localhost:3000 关于 这个演示演示了一些事情： 用于在商店和组件之间进行通信的模式。 通过将父 iframe 上的组件class暴露在父级的window对象上并使用子级的React实例对其进行实例化，从而与同一域中的子class共享父 iframe 上的组件class 。 它将使用来自父存储的数据呈现，而在子上处理 DOM。 重新加载子框架时，子框架将与父框架保持同步。 并且不应在父级上留下对卸载子级的引用。 你可以不同意这样的角一条指令，但这个演示告诉你如何与共享factory I帧之间并结合消化周期一起 使用窗口消息事件与从不同域加载的 iframe 通信的组件（安全限制防止域之间共享对象）。 孩子有自己的商店，所以如果你重新加载这
vue路由传参的两种方式,实现返回上个页面不刷新
anny_mei的博客
07-17 9919
我的项目是当在新增页面(下面叫A页面)先提交一些数据,然后跳转到下一个页面(下面叫B页面)再填写数据,然后返回到新增的页面 之前我直接跳转回B页面goback(),这样的话跳转回来A页面就什么数据都没有了 解决方法有两种,一种是在地址栏里面拿参数 this.$router.push({ name:'xxxxxxxxx', // 跳转的页面名称 params:{ id:this.id || "xxxxxxxxxx" } }) 在
vue 前端按钮操作列表实时刷新
最新发布
a nice day
05-14 106
前端实现方法后列表刷新，不刷新页面
记录react项目中引入iframe通信问题以及请求多次问题
m0_53197203的博客
03-12 529
之前想在iframe加载之前实现一个loading，实现方式是使用useRef钩住iframe元素，在当前的current.onload中去改变了loading的状态，这样会使iframe页面刷新2次甚至3次，意味着会多次请求接口，并且可能造成通过postMessage传递的数据丢失。添加判断，如果有source这个来源就说明不是用户发来的提交信息，而是iframe打开的常规消息。页面中点击按钮会打开一个遮罩层，遮罩层中会通过iframe嵌入另一个域名的网站，呈现问卷调查表。
在React中优雅地利用iFrame：React `<Frame />`组件
gitblog_00065的博客
05-13 481
在React中优雅地利用iFrame：React <Frame />组件 项目地址:https://gitcode.com/ryanseddon/react-frame-component 如果你在开发Web应用时遇到过跨域或独立渲染组件的挑战，那么这个开源项目会对你产生极大的吸引力。React <Frame />组件 是一个强大的工具，它允许你在iFrame内封装你的整个...
LayUI table 刷新页面不重置页码
04-18
// 绑定刷新按钮事件 document.getElementById('refresh-btn').addEventListener('click', function(){ table.reload('example', { page: { reset: true // 添加此选项表示刷新时重置页码 } ,where: {} // ...
js短信验证码倒计时（页面刷新无效）
07-25
2. **页面刷新后的状态恢复**：为了保持页面刷新后的倒计时状态，我们可以利用浏览器的`localStorage`或`sessionStorage`来保存倒计时状态。在发送验证码请求成功时，将倒计时的开始时间存入存储： ```javascript ...
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
10-14
这使得我们可以在页面刷新或重新加载时恢复某些状态，如验证码的倒计时。 在实现验证码不清零功能时，我们需要在用户点击获取验证码按钮时启动倒计时，并将倒计时的剩余时间保存在localStorage中。当页面刷新时，...
前端学习 FreeCodeCamp html 注册表单
03-20
6. `<button>`标签：创建按钮，可以是提交、重置或其他自定义功能。 接下来，我们关注`style.css`文件。CSS（Cascading Style Sheets）用于控制网页的样式和布局。对于注册表单，我们可能需要设置以下样式： 1. ...
基于Vue实现tab栏切换内容不断实时刷新数据功能
08-30
Vue.js作为一个轻量级的前端框架，提供了强大的数据绑定和组件化能力，非常适合处理这类问题。本篇文章将详细介绍如何使用Vue来实现Tab栏切换时内容不断实时刷新数据的功能。 首先，理解产品需求：有多个Tab（例如5...
react中使用Iframe嵌入HTML页面
qq_45437679的博客
12-16 5318
react中使用Iframe安装 react-iframe插件父组件掉用子组件iframe向父组件传递数据(我用的是jq写的iframe页面) 安装 react-iframe插件 import React from "react"; import ReactDOM from "react-dom"; import Iframe from "react-iframe"; export default class FrameLoader extends React.Component { construct
react结合iframe小实践
lzc的博客
07-31 1807
通过window.open打开一个新页面，在新的页面里嵌入iframe。 路由： <Router history={history}> <Switch> <Route path="/Demo" component={Demo} /> <Route path="/iframeDemo/:id" component={IframeDemo} /> </Switch...
layui子页面获取父页面数据
ph的博客
09-03 2435
父页面定义一个全局js变量json varjson; layui.use(['laydate','form','table'], function() 然后在这行监听到的表格行数据信息，复制给json全局变量。 json=JSON.stringify(data); 最后在子页面中使用 varparent_json =eval('('+parent.json+')'); console.log(parent_json); 从父层获取值，json是父层的全局...
react项目利用iframe集成嵌套页面跳转
qq_40266497的博客
04-21 1954
import React, { PureComponent } from 'react'; import Panel from '@/components/Panel'; import styles from './card.less'; import { Layout } from 'antd'; const { Content } = Layout; import classNames from "classnames"; import layoutStyles from "@/layouts/Bas.
layui弹出层子页面获取父级页面元素
testHjy的博客
11-24 3559
需求：点击父页面内容库，弹出子页面列表，点击添加按钮，将子页面信息回填到父页面中对应的区域。同过ID找到元素，再用$(元素)转为对象，再复制即可。
vue点击按钮跳转页面
sun13047140038的博客
10-30 9241
在Vue.js中，你可以使用<router-link>或this.$router.push()来实现点击按钮跳转页面的功能，前提是你已经配置了Vue Router。在这个示例中，当用户点击按钮时，redirectToDestination 方法将通过this.$router.push()来触发页面跳转。你还可以在Vue组件的方法中使用this.$router.push()来实现页面跳转。-- 使用 router-link 创建按钮 -->-- 使用按钮触发页面跳转 -->
layui 父页面获取弹窗传递的值 和 父页面传值给子弹窗的方法
热门推荐
张小三的博客
06-08 1万+
文章已移至：
Layui弹出层取值
cedarMei的博客
04-18 1076
Layui弹出层取值 1.首先在父页面定义要传过去的值 table.on('tool(demo)', function (obj) { //obj为当前行对象 var data = obj.data; json = JSON.stringify(data); title = obj.event; //如果监听到父页面点击的是修改按钮 if (obj.event === 'edit') {
用php设计一个登录页面带重置按钮
07-09
以下是一个带有重置按钮的PHP登录页面的示例代码： ```php <?php // 检查表单是否提交 if(isset($_POST['login'])) { // 获取输入的用户名和密码 $username = $_POST['username']; $password = $_POST['password']; // 在此处添加验证用户名和密码的代码，比如与数据库中的用户信息进行比对 // 简单示例：检查用户名和密码是否匹配 if($username === 'admin' && $password === 'password') { // 登录成功，跳转到欢迎页面 header('Location: welcome.php'); exit; } else { // 登录失败，显示错误消息 $error = "Invalid username or password."; } } // 处理重置按钮的点击事件 if(isset($_POST['reset'])) { $username = ''; $password = ''; } ?> <!DOCTYPE html> <html> <head> <title>Login Page</title> </head> <body> <h1>Login</h1> <?php if(isset($error)): ?> <p><?php echo $error; ?></p> <?php endif; ?> <form method="POST" action=""> <label for="username">Username:</label> <input type="text" id="username" name="username" value="<?php echo htmlentities($username); ?>" required><br> <label for="password">Password:</label> <input type="password" id="password" name="password" value="<?php echo htmlentities($password); ?>" required><br> <input type="submit" name="login" value="Login"> <input type="submit" name="reset" value="Reset"> </form> </body> </html> ``` 在上面的代码中，我添加了一个名为`reset`的重置按钮。当用户点击重置按钮时，`$_POST['reset']`将被设置为`true`，然后我们可以在PHP代码中处理重置按钮的点击事件。在这个示例中，我将用户名和密码的值重置为空字符串。 在HTML表单中，我使用了`value="<?php echo htmlentities($username); ?>"`来设置输入字段的初始值。这样，当用户点击重置按钮时，输入字段中的值将被重置为空字符串。 请注意，这只是一个简单的示例，并不包含真实的用户验证和安全性措施。在实际项目中，请确保在处理用户输入时进行适当的验证和过滤，以防止安全漏洞。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jq1223

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值