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

首先准备一个测试页面:

 <!--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. thinkphp条件查询和模糊查询的一些方法

    #文章管理 public function adminArticle(){ $adminArticle=M("article"); $arr_seach=$this->sea ...

  2. strcat、strcpy、memcpy 的使用注意

    char *p = "hello";//5 个长度 ; //char *str = (char *)malloc(sizeof(char)*len); ] = "niha ...

  3. js的extend和fn.extend使用

    $.fn.extend扩展的是一个jQuery对象函数,$.extend扩展的是一个jQuery全局函数 <!DOCTYPE html> <html> <head> ...

  4. 使用EXECUTE IMMEDIATE来生成含有绑定变量的SQL

    一个SQL,通过SPM固定它的执行计划,可以通过DBMS_SPM.LOAD_PLANS_FROM_CURSOR_CACHE实现.也可以通地此功能在不修改原SQL的情况下对其加HINT来固定执行计划.D ...

  5. Mininet实验 源码安装Mininet

    参考:MiniNet实验1 安装命令: sudo apt-get update sudo apt-get upgrade sudo apt-get install git(安装过git就可以忽略此步) ...

  6. Unable to establish connection to tokens

    安装openstack后遇到的第一个问题. 执行命令nova list得到如下结果: [root@localhost ~(keystone_admin)]# nova list No handlers ...

  7. apple mobile device服务无法启动,错误1053 解决

    我不想安装iTunes,于是下了iTunes64安装包,解压后得到6个文件 安装完 AppleMobileDeviceSupport64.msi 发现服务启动不起来,提示错误1053,网上搜了下发现出 ...

  8. 使用 U盘 重装 Mac OSX

    一.制作 U 盘系统启动盘 1.从 App Store 上下载 OS Application.(这里需要注意,取消下载完的自动更新,并存储下这个 OS.Application 文件,因为系统更新完后, ...

  9. LeetCode Generalized Abbreviation

    原题链接在这里:https://leetcode.com/problems/generalized-abbreviation/ 题目: Write a function to generate the ...

  10. 游戏制作之路:游戏引擎选择、Mac下和Windows下UnrealEngine 4体验对比、文档及其他

    UnrealEngine 4和Unity3d的选择 订阅了UrealEngine4(UE4)开发者.我开始做网站用的是ASP.NET和C#,之后做网站虽然换用更方便的PHP(因为做的都是小网站).我想 ...