js打开新页面的几种方式

2023-06-08前端开发
743

open方式

1.点击某一个链接之后跳转到新页面显示

window.open(‘http://www.baidu.com’,’_blank’);

2.需要刷新当前页面或者覆盖当前页面

window.open(‘http://www.baidu.com’,’_self’);

location方式

javascript中的 location.href 有很多种用法,主要如下。
self.location.href=“/url” 当前页面打开URL页面
location.href=“/url” 当前页面打开URL页面
window.location.href=“/url” 当前页面打开URL页面,前面三个用法相同。
this.location.href=“/url” 当前页面打开URL页面
parent.location.href=“/url” 在父页面打开新页面
top.location.href=“/url” 在顶层页面打开新页面
如果页面中自定义了frame,那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址

此外,window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时,window.location.Reload()会提示是否提交,window.location.href=window.location.href;则是向指定的url提交数据

如果要关闭当前窗口,并且在新窗口打开某一链接:
var a = document.createElement('a')
a.setAttribute('href', href)
a.setAttribute('target', '_blank')
a.setAttribute('id', 'startTelMedicine')
a.onclick = function () {
//关闭窗口的方法
window.opener = null
window.open('', '_self', '')
window.close()
}
// 防止反复添加
if (document.getElementById('startTelMedicine')) {
document.body.removeChild(document.getElementById('startTelMedicine'))
}
document.body.appendChild(a)
a.click()

如果无法关闭当前弹框 说明可能有父节点,可以试试:window.parent.close();
 
The End

相关推荐

js拖拽排序插件Sortable.js如何使用
由于项目功能需要,要实现对table中的行实现拖拽排序功能,找来找去发现Sortable.js能很好的满足这个需求,而且它还是开源的,于是乎就开始学习使用Sortable.js 特点 轻量级但功能强大 移动列表项时有动画 支持触屏设备和大多数浏览器(IE9及以下除外) 支持...
2025-06-12 前端开发
161

xm-select多选下拉框实现拼音、首字母搜索匹配
最近项目中遇到需要下拉框能实现根据首字母进行模糊搜索,下拉框使用的是xm-select,而xm-select支持中文的搜索,后端接口也仅支持中文的。因此需要借助其他插件来完成功能。最终实现的效果如下: 涉及到的基础文件:引用 pinyin.js 和 initials.js。再引用 l...
2025-06-06 前端开发
89

Layui treetable复选框联动解决方案
我们都知道layui treetable.js没有checked做联动。我们要实现Layui treetable复选框联动要怎么操作呢?实现的最终效果如下: 1. 在当前HTML文档checked监听函数中增加以下代码: //联动 table.on('checkbox(quan_list)', function(obj){ //console.log(obj);...
2025-06-06 前端开发
163

layui.open属性打开一个弹出层
核心方法 var index = layer.open({ type : 2, title : title, maxmin : true, offset: '100px', area : [ '600px', '500px' ], content : prefix + url// iframe的url }); layer.full(index); //最小化 type - 基本层类 类型:Number,默认:0 layer提供了5...
2025-02-25 前端开发
82

layui xm-select插件怎么使用
xm-select是基于layui的多选解决方案,前身formSelects, 由于渲染速度慢, 代码冗余, 被放弃了xm-select使用了新的开发方式, 利用preact进行渲染, 大幅度提高渲染速度, 并且可以灵活拓展。 xm-select: 基于Layui, 下拉选择框的多选解决方案 通过一个简单的小例...
2024-12-25 前端开发
308

JavaScript JS获取url地址后面参数的方法
1、通过对象遍历参数 function GetUrlRequest() { var url = location.search; //获取url中"?"符后的字串 var tRequest = new Object(); if (url.indexOf("?") != -1) { //判断 URL 中是否包含查询字符串 var str = url.substr(1); //如果 URL 中包含查询字符...
2024-12-20 前端开发
134