准备面试题目的时候遇到了页面刷新,就整理了一下,网上查找,大概就是八种方法,但是自己测试的时候出现了几个问题,跟大家分享:

首先准备一个测试页面:

 <!--html代码-->
<h1 id="test">页面刷新</h1>
<button onclick="fresh()">刷新</button
 //script
var h1 = document.getElementById('test');
function test(){
h1.style.color = "red";
h1.innerText = "我变化了";
}
setInterval(test, 1000);

准备工作完成,开始页面刷新方法:

1.可以正常使用的五种方法:

 //第一种方法
function fresh(){
window.location.reload();//强迫浏览器刷新当前页面,默认参数为false,表示从客户端缓存里取当前页。如果指定为true,则以GET方式从服务端取最新的页面,相当于客户端点击F5。
}
 //第二种方法
function fresh(){
history.go(0);
}
 //第三种方法
function fresh(){
location = location;
}
 //第四种方法
function fresh(){
location.assign(location);//assign()方法加载一个新的文档。
}
 //第五种方法
function fresh(){
location.replace(location);//通过指定URL替换当前缓存在历史里(客户端)的项目,所以使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL。
}

2.只在ie可以执行的两种方法:

 //第六种方法
function fresh(){
document.execCommand('Refresh');//是只有IE提供的方法,叫浏览器方法。
}
 //第七种方法
function fresh(){
window.navigate(location);//只在ie可以执行,不适用于火狐等其他浏览器。
}

3.网上很容易找到,但是个人认为是错误的一种方法:

 //错误方法
function fresh(){
document.URL=location.href;//错误用法,document.URL只能读不能写
}

但是也可以有替代的方法:

 //第八种方法
//window.location.href和document.location.href可以被赋值,然后跳转到其它页面
//一个窗口下只有一个window.location.href,但是可能有多个document.URL、document.location.href
function fresh(){
document.location.href = location.href;
//可以使用,document表示的是一个文档对象
}
 //第九种方法(与第八种方法是一类)
function fresh(){
window.location.href = location.href;//可以使用,window表示的是一个窗口对象
}

如有错误,请您指正!

js页面刷新之实现普通页面的更多相关文章

  1. vue中常用的两中页面刷新的方式和页面回退

    这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n) router.push(location) 想要导航到不同的 URL,则使 ...

  2. Js页面刷新前提示-jquery页面刷新事件

    //原理很简单,就是在body的onbeforeunload事件绑定函数,代码如下: document.body.onbeforeunload = function (event) { var c = ...

  3. html-javascript前端页面刷新重载的方法汇总

    记得我在兴安得力实习要转正的时候,我领导象征性的给我出了一套测试题目,里面就有js闭包和页面刷新等题目.今天把很久之前的测试题目之一,js页面刷新的方法以及页面自动刷新跳转和返回上一页和下一页等方法总 ...

  4. 【转】Hbuilder MUI 页面刷新及页面传值问题

    文章来源:http://www.111cn.net/sys/CentOS/67213.htm 一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面 ...

  5. MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  6. Hbuilder MUI 页面刷新及页面传值问题

    一.页面刷新问题 1.父页面A跳转到子页面B,B页面修改数据后再跳回A页面,刷新A页面数据 (1).父页面A代码 window.addEventListener("pageflowrefre ...

  7. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  8. js中页面刷新和页面跳转的方法总结

    .js中cookie的基本用法简介 2009-12-15 js中页面刷新和页面跳转的方法总结 文章分类:Web前端 关键字: javascript js中页面刷新和页面跳转的方法总结 1.histor ...

  9. 使用ajax和js无刷新改变页面内容和地址栏URL

    发现一个可以改变地址栏,而不导致页面刷新的东东. Chrome, FF测试通过,不支持IE. 实现目标 页面的跳转(前进后退,点击等)不重新请求页面 页面URL与页面展现内容一致(符合人们对传统网页的 ...

随机推荐

  1. sql 执行 delete 的时候,结合子查询 exists ,怎样支持别名呢?

    在做一个数据删除的时候,条件需要用到关联其他表,用到子查询,但是查询的时候使用 别名 没有问题,但是删除就有语法错误,在网上查询后得到了完美解决: --查询出来需要删除的数据 select * fro ...

  2. Ansible (一)

    epel rpm -ivh http://mirrors.ustc.edu.cn/fedora/epel/6/x86_64/epel-release-6-8.noarch.rpm yum -y ins ...

  3. mysql导数据库用到的语句

    将字段格式为2013-08-09 13:22:55转换为时间戳 UPDATE `AttendClass` SET `regdate` = unix_timestamp(regDate2) WHERE ...

  4. Read4096

    Given API: int Read4096(char* buf); It reads data from a file and records the position so that the n ...

  5. Object对象类

    Object对象类是所有类的祖先,他是默认自动继承的 Java为什么要做一个对象类呢?对象类的目的就是归一了类型,他就是把所有的类所有的对象归纳成为 Object类型.因为对象他认为对象应该拥有一些什 ...

  6. CSS权威指南 - 内边距 边框 和 外边距

    九十年代的完全用表格布局,简单的段落边框都需要用表格.CSS让布局更方便. 基本元素框 basic element boxes 如同第七章基本视觉格式化那一章讲到,每个文档元素会生成一个元素框,这个框 ...

  7. WPF TabControl 隐藏标头

    1. 将每个 TabItem 的 Visibility 属性设置为 Visibility.Collapsed 即可隐藏标头 <TabItem Visibility="Collapsed ...

  8. Json与类对象转换

    Json在js,jquery中可以直接使用,比如下串: { "from":"en" ,"to":"zh" ," ...

  9. 【Android测试】【第十五节】Instrumentation——官方译文

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处. 转载请注明出处:http://www.cnblogs.com/by-dream/p/5482207.html 前言 前面介绍了不少Android ...

  10. Python开发【第九章】:线程、进程和协程

    一.线程 线程是操作系统能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流,一个进程中可以并发多个线程,每条线程并行执行不同的任务 1.t ...