• 注册
  • 前端后端 前端后端 关注:1 内容:70

    JavaScript 中 href/reload/replace (页面跳转/替换/刷新) 的区别

  • 查看作者
  • 打赏作者
  • 帅气冲天

    href 方法:该方法指定URL进行跳转

    window.location.href的用法

    javascript 中的 location.href 有很多种用法,主要如下:

    self.location.href="/url";        // 当前页面打开URL页面
    location.href="/url";             // 当前页面打开URL页面
    windows.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提交数据

    reload 方法:该方法强迫浏览器刷新当前页面。

    语法:location.reload   ([bForceGet])  

    参数: bForceGet, 可选参数

    默认为 false – 从客户端缓存里取当前页; true – 则以 GET 方式,从服务端取最新的页面, 相当于客户端点击 F5“刷新”

    刷新页面函数

    window.focus();                    // 刷新窗口
    document.execCommand("Refresh");   // 刷新窗口
    self.location.reload();            // 刷新当前窗口
    parent.location.reload();          // 刷新父窗口
    aaa.location.reload();             // 弹出窗口刷新父窗口
    window.location.reload();          // 强制刷新页面,从服务器重新请求!

    使用 window.location.replace() or window.location.href() 来重新加载此页面不出现提示框

    replace 方法:该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,你不能通过“前进”和“后退”来访问已经被替换的URL。

    语法: location.replace(URL) 

    参数: URL

    在实际应用的时候,重新刷新页面的时候,我们通常使用: location.reload() 或者是 history.go(0) 来做。因为这种做法就像是客户端点F5刷新页面,所以页面的method=”post”的时候,会出现“网页过期”的提示。那是因为Session的安全保护机制。可以想到:当调用 location.reload() 方法的时候, aspx页面此时在服务端内存里已经存在, 因此必定是 IsPostback 的。如果有这种应用: 我们需要重新加载该页面,也就是说我们期望页面能够在服务端重新被创建,我们期望是 Not IsPostback 的。这里,location.replace() 就可以完成此任务。被replace的页面每次都在服务端重新生成。你可以这么写: location.replace(location.href)


    <a onclick="javascript:window.location.href=window.location.href;">
    <a onclick="javascript:window.location.reload();">

    测试效果一样,表单没有提交。

    <input type="submit" onclick="javascript:window.location.reload();" value="单击" />
    <input type="submit" onclick="javascript:window.location.href=window.location.href;" value="单击" />

    都提交数据

    window.location.Reload();         // 是刷新.(如果有数据提交的话,会提示是否提交的(是和否选项))
    window.location.href=window.location.href; // 是定向url提交数据

    最好不要用 location.reload(),而用 location=location 比较好,还有在模式窗口(showModalDialog和showModelessDialog)前者不能用。


    页面实现跳转的九种方法实例:

    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>navigate</title>
    <script language="javascript">
        setTimeout('window.navigate("top.html");',2000);
        setTimeout('window.document.location.href="top.html";',2000);
        setTimeout('window.document.location="top.html";',2000);
        setTimeout('window.location.href="top.html";',2000);
        setTimeout('window.location="top.html";',2000);
        setTimeout('document.location.href="top.html";',2000);             
        setTimeout('document.location="top.html";',2000);
        setTimeout('location.href="top.html";',2000);
        setTimeout('location.replace("top.html")',2000);
        //window对象
            //document对象
                //location对象
                    //href属性
                    //1.window.document.location.href
                    //2.window.document.location
                    //3.window.location.href
                    //4.window.location
                  
                    //5.document.location.href
                    //6.document.location
                    //7.location.href
                    //8.window.navigate
                    //9.location.replace
                    //只要使用location方法,和任意的window对象,location对象,href属性连用,都可以页面的跳转
    </script>
    </head>
    
    <body>
    页面将在2秒后跳转
    </body>
    </html>

    请登录之后再进行评论

    登录

    我关注的论坛

    暂没有数据

  • 发布内容
  • 做任务
  • 偏好设置
  • 直达底部
  • 帖子间隔 侧栏位置: