js操作当前窗口 2025780编辑
Heaven helps those who help themselves
资深码农+深耕理财=财富自由
欢迎关注
资深码农+深耕理财=财富自由
欢迎关注

js操作当前窗口
Created by Marydon on 2017-07-21 10:08
1.打开一个新的窗口(新的标签页)
实现方式:window.open(url)
实例一:
HTML片段
<input id="test" type="button" value="打开一个新的标签页窗口" onclick="openNewTag();"/>
JAVASCRIPT部分
/** * 在当前浏览器上打开一个新的标签页 */ function openNewTag () { var url = "www.baidu.com"; url = "http://" + url; window.open(url); }
实例二:
<!-- 方式一:推荐使用 --> <a href="javascript:;" onclick="window.open('<c:url value="/uploadfile/134557/000225326/进击的巨人-三笠.jpg"/>')"> 操作js打开新的标签页 </a> <!-- 方式二 --> <a href="javascript:;" onclick="window.open('http://127.0.0.1:8060/ycyl/uploadfile/134557/000225326/进击的巨人-三笠.jpg')"> 操作js打开新的标签页 </a>
方式二:2022年6月20日09:41:55
let newtab = window.open('about:blank') newtab.location.href = 'https://www.bilibili.com/'
2.在本标签页实现本页面跳转
实现方式:window.location.href=url
实例一:
HTML片段
<input id="test" type="button" value="页面跳转" onclick="pageHref();"/>
JAVASCRIPT部分
/** * 在当前标签页跳转到其他页面 */ function pageHref () { var url = "www.baidu.com"; url = "http://" + url; window.location.href = url; }
实例二:
/** * 返回List展示页面 */ this.goback = function(){ window.location.href = baseUrl+"/telemedicine/patient/index.do?RESULT_TYPE=modelAndView9"; }
<table cellspacing="0" cellpadding="0" border="0" width="100%" height="100%"> <tbody> <tr> <td align="right"> <!-- 进行评价 --> <input type="button" onclick="consEval.save();" class="Button" style="margin-right:40px;" value="提交" onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'"/> </td> <td align="left"> <!-- 返回 --> <input type="button" onclick="consEval.goback();" class="Button" style="margin-left:40px;" value="返回" onmouseover="javascript:this.className='ButtonOver'" onmouseout="javascript:this.className='Button'"/> </td> </tr> </tbody> </table>
3.在本标签页实现父页面跳转
实现方式:parent.location.href=url
4.刷新页面
4.1 刷新本页面
// 方式一 window.location.reload(); // 方式二 window.history.go(0); // 方式三 window.location.href = window.location.href; // 方式四 window.location.replace(window.location.href);
4.2 刷新父页面
实现方式:parent.document.location.reload();
相当于按F5键
5.打印网页
实现方式:window.print();
6.关闭当前选项卡
实现方式:window.close();
说明:
1.这种方式会有提示;
2.如果只有一个选项卡,会关闭浏览器。
UpdateTime--2018年3月23日16:53:01
7.网页的前进与后退
前进
// 方式一 window.history.forward(); // 方式二 window.history.go(1);
后退
// 方式一 window.history.back(); // 方式二 window.history.go(1);
说明:前进和后退,界面无刷新。
与君共勉:最实用的自律是攒钱,最养眼的自律是健身,最健康的自律是早睡,最改变气质的自律是看书,最好的自律是经济独立 。
您的一个点赞,一句留言,一次打赏,就是博主创作的动力源泉!
↓↓↓↓↓↓写的不错,对你有帮助?赏博主一口饭吧↓↓↓↓↓↓
本文来自博客园,作者:Marydon,转载请注明原文链接:https://www.cnblogs.com/Marydon20170307/p/7216252.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程