javascript之跳转页面的几种方法?

文章目录

  • 前言
  • 代码演示及解释
    • 使用location.href属性
    • 使用location.assign()方法
    • 使用location.replace()方法
    • 使用window.open()方法
    • 使用document.URL方法
  • 总结


前言

本章学习的是JavaScript中的跳转页面的几种方法

代码演示及解释

使用location.href属性

可以直接将一个新的URL赋值给location.href属性,即可实现页面跳转

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.href="djh.html";}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果:

点击前:
在这里插入图片描述
点击后:
在这里插入图片描述

使用location.assign()方法

与location.href类似,也可以将一个新的URL作为参数传递给location.assign()方法,实现页面跳转

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.assign("djh.html");}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果:

点击前:

在这里插入图片描述

点击后:
在这里插入图片描述

使用location.replace()方法

与location.assign()方法类似,但不会在浏览器的历史记录中留下当前页面的记录,实现页面跳转

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){location.replace("djh.html");}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果:

点击前:

在这里插入图片描述

点击后:
在这里插入图片描述

使用window.open()方法

可以在新的浏览器窗口或标签页中打开一个URL,实现页面跳转

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){window.open("djh.html","点击后","titlebar=0,location=no");}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果:

点击前:

在这里插入图片描述

点击后:
在这里插入图片描述

使用document.URL方法

可以将一个新的URL作为参数传递给document.URL='url’方法,实现页面跳转

代码演示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function fun4(){document.URL="djh.html"}</script>
</head>
<body>
<input type="button" value="去往新页面" onclick="fun4()">
</body>
</html>

运行结果:

点击前:

在这里插入图片描述

点击后:
在这里插入图片描述

总结

关键单词作用
assign(url)加载一个新的URL,并在浏览器历史记录中生成新的记录。
replace(url)加载一个新的URL,并替换当前的历史记录。
href可以直接将一个新的URL赋值给location.href属性,即可实现页面跳转
open()可以在新的浏览器窗口或标签页中打开一个URL,实现页面跳转
URL可以直接将一个新的URL赋值给 document.URL=‘url’ 的方法,即可实现页面跳转

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593534.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

企业如何做好客户管理?有哪些关键因素?

客户管理是建立和维护客户关系的重要组成部分&#xff0c;对于企业的发展至关重要。下面就让我们来看看在做好客户管理时有哪些关键因素吧。 第一个关键因素是提供优质的客户服务。无论是线上还是线下&#xff0c;当客户需要帮助时&#xff0c;他们希望能够得到有效且及时的支持…

sqlserver根据分组的内容分别查询出匹配的一条信息

需求场景&#xff1a; 我写了条分组语句&#xff0c; select name from car_machine_command group by name 然后该表有很多条相关的数据&#xff0c;我只想拿各个分组的一条数据看看即可 解决&#xff1a;可以使用窗口函数&#xff08;Window Function&#xff09;和 ROW_NU…

Dora-rs 机器人框架学习教程(1)—— Dora-rs安装

1、dora简介 Dora-rs[1] 是一个基于 Rust 实现的化机器人框架&#xff0c;其具有极高的实时性能。Dora-rs使用Rust语言做数据流的传输和调度管理&#xff0c;可以大大减少了数据的重复拷贝和传输。它提供了Rust语言和Python语言之间的无缝集成&#xff0c;减少了跨语言的性能代…

阿里云服务器Valheim端口2456、2457和2458放行设置

使用阿里云服务器搭建Valheim英灵神殿需要开启2456-2458端口&#xff0c;阿里云服务器默认只开放了22核3389端口&#xff0c;开通2456端口是在安全组中配置的&#xff0c;阿里云服务器网aliyunfuwuqi.com来详细说下阿里云服务器安全组开通端口流程&#xff1a; 阿里云服务器安…

中国供应链,出海大时代

尽量优化、打通跨境电商每一个参与方的物流、商流、信息流、资金流是电商供应链出海的解题之法。这个过程中数智化便是打通这些节点的钥匙。 作者|斗斗 编辑|皮爷 出品|产业家 “速卖通加持&#xff0c;阿里国际零售商业收入同比上涨73%”“拼多多发布Q3财报同比增长94%…

7. 解决赋值的问题

388 // assignment operator invoked // object assigned to itself // all done // free old string // get space for new string CPrimer Plus(第五版)中文版 StringBad headline1 ("Celery Stalks at Midnight") : StringBad knot: knot - headlinel: 初始…

基于Java SSM框架实现中国古诗词学习平台项目【项目源码】

基于java的SSM框架实现中国古诗词学习平台系统演示 JSP技术介绍 JSP技术本身是一种脚本语言&#xff0c;但它的功能是十分强大的&#xff0c;因为它可以使用所有的JAVA类。当它与JavaBeans 类进行结合时&#xff0c;它可以使显示逻辑和内容分开&#xff0c;这就极大的方便了用…

Sam Altman的一天被曝光!每天15小时禁食、服用小剂量安眠药,尽可能避免开会

Sam Altman在经历了几天混乱的管理重组后&#xff0c;重新回到了OpenAI的CEO位置。在日常生活中&#xff0c;奥特曼与许多科技行业高管一样&#xff0c;痴迷于延长自己的寿命。 据报道&#xff0c;他还为应对末日场景&#xff08;致命合成病毒的释放、核战争和人工智能攻击等&…

P59 生成式对抗网络GAN-理论介绍 Theory behind GAN

Object Normal Distribution 的数据 经过 Generator 后生成分布更加复杂的PG. 真实数据的分布为 Pdata , 希望 PG和Pdata 越近越好 LOSS 是 两者之间的分布距离 问题: 如何计算 divergence? Sampling is goog enough Discriminator 希望V越大越好 y~Pdata 代表从 Pdata里…

Vue3 watch 的使用,如何监听一个对象中的属性值的变化 vue3 + ts + vite

Vue3 watch 的使用&#xff0c;如何监听一个对象中的属性值的变化 由 vue2 转到 vue3 ts vite 之后都不会写这些玩意了。搜了下&#xff0c;找到了答案&#xff1a; vue2 的 watch <script>export default {watch: {$route.query.id(newValue){// 可以这样监听路由的…

vue 实现拐弯时间线,弯曲时间线,弯曲任务步骤条

需求&#xff1a; 实现可拐弯的步骤条功能 实现后效果如下&#xff1a; 代码部分&#xff1a; 创建步骤条组件Steps.vue <template><div><divstyle"width: 100%; display: flex; position: relative; margin-top: 20px"><div style"wi…

为什么大学c语言课不顺便教一下Linux,Makefile

为什么大学c语言课不顺便教一下Linux&#xff0c;Makefile&#xff0c;git&#xff0c;gdb等配套工具链呢? 在开始前我有一些资料&#xff0c;是我根据自己从业十年经验&#xff0c;熬夜搞了几个通宵&#xff0c;精心整理了一份「Linux的资料从专业入门到高级教程工具包」&…

FreeRTOS学习笔记

前言 本笔记基于B站正点原子的视频讲解&#xff0c;和个人的理解应用情况。应该适合用来回忆复习FreeRTOS的基本内容&#xff0c;避免在应用时突然忘了某个知识点要查很久。还有就是B站正点原子的讲解视频主要是对FreeRTOS的移植应用讲解&#xff0c;而我重点只听应用部分&…

平方根,又叫二次方根,表示为〔√ ̄〕

正在加载中... 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a; 平方根&#xff0c;又叫二次方根&#xff0c;表示为〔√&#xffe3;〕&#xff0c;如&#xff1a;数学语言为&#xff1a;√&#xffe3;164。语言描述为&…

五、Spring AOP面向切面编程(基于注解方式实现和细节)

本章概要 Spring AOP底层技术组成初步实现获取通知细节信息切点表达式语法重用&#xff08;提取&#xff09;切点表达式环绕通知切面优先级设置CGLib动态代理生效注解实现小结 5.5.1 Spring AOP 底层技术组成 动态代理&#xff08;InvocationHandler&#xff09;&#xff1a;…

Javascript 正则表达式零宽断言

在介绍正则表达式零宽断言这个概念之前&#xff0c;先看一下以下这道有关 javascript 正则表达式的题目&#xff1a; 登录注册流程是前端最常见的业务流程之一&#xff0c;注册流程少不了密码强弱度校验&#xff0c;请实现对密码的校验&#xff0c;要求满足&#xff1a; 包含大…

RocketMQ5.0延时消息时间轮算法

前言 RocketMQ 相较于其它消息队列产品的一个特性是支持延时消息&#xff0c;也就是说消息发送到 Broker 不会立马投递给消费者&#xff0c;要等待一个指定的延迟时间再投递&#xff0c;适用场景例如&#xff1a;下单后多长时间没付款系统自动关闭订单。 RocketMQ 4.x 版本的延…

一文搞懂手机卡的定向流量到底是什么!

最近有一些小伙伴对于手机卡流量中包含的定向流量这个概念不是很明白&#xff0c;而且也不知道具体如何使用&#xff0c;今天这个视频&#xff0c;葫芦弟就仔细给大家讲解一下&#xff0c;希望能解开小伙伴们心中的疑惑。废话不多说&#xff0c;我们直接进入正题&#xff01; 首…

linux基本系统配置 - 系统语言、区域和字符集设置详细(rhel8)

最近学到linux语言、字符集等环境配置&#xff0c;感觉这个地方不好理解&#xff0c;所以花了2天之间查了各种网上查了资料&#xff0c;再在自己的系统(rhel8)上验证了以后&#xff0c;写下了这个文章。希望对大家有用。有不足支持还望批评指正。谢谢。 一、关于locale&#x…

Web开发:接口的定义和接口实现设计

一、设计程序 using System;public interface IPrintable //接口定义1 {void Print();void Print2(); }public interface IPrintable2 : IPrintable //接口定义2 {void Print3(); }public class MethodAchieve : IPrintable, IPrintable2 //接口实现1 {public void Print(){Co…