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); 

说明:前进和后退,界面无刷新。

 

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

与君共勉:最实用的自律是攒钱,最养眼的自律是健身,最健康的自律是早睡,最改变气质的自律是看书,最好的自律是经济独立 。

您的一个点赞,一句留言,一次打赏,就是博主创作的动力源泉!

↓↓↓↓↓↓写的不错,对你有帮助?赏博主一口饭吧↓↓↓↓↓↓

posted @   Marydon  阅读(780)  评论(0编辑  收藏  举报
编辑推荐:
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
阅读排行:
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 全网最简单!3分钟用满血DeepSeek R1开发一款AI智能客服,零代码轻松接入微信、公众号、小程
点击右上角即可分享
微信分享提示
sorry,本博客所有代码禁止复制,原创代码需扫码支付方可获取!
关闭

1、先加好友再付费,点我加好友;

2、代码不能满足你的需求?加好友付费定制你的专属代码!

3、付费标准及方式,点我查看详情。