zoukankan      html  css  js  c++  java
  • js操作当前窗口

    CreateTime--2017年7月21日09:58:34
    Author:Marydon

    js操作当前窗口

    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> 

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

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

  • 相关阅读:
    July 22nd 2017 Week 29th Saturday
    July 21st 2017 Week 29th Friday
    社交类APP原型模板分享——QQ
    专访UI中国认证设计师卤大湿 | 一位UI大师关于UI设计的思考
    第十届Mockplus ▪ UXPA用户体验西南赛区决赛成功举行
    【附案例】UI交互设计不会做?设计大神带你开启动效灵感之路
    旅游类APP原型模板分享——爱彼迎
    有了这款自动标注/切图神器,攻城狮终于可以省心了
    设计师升职加薪必须知道的10个设计网站
    官网类原型模板分享——Apple
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/7216252.html
Copyright © 2011-2022 走看看