如何使用jQuery刷新页面?
如何使用jQuery刷新页面?
Answers:
$('#something').click(function() {
location.reload();
});
该reload()
函数采用一个可选参数,可以将其设置true
为强制从服务器而不是从缓存重新加载。该参数默认为false
,因此默认情况下该页面可能会从浏览器的缓存中重新加载。
window.location.href=window.location.href;
和 location.href=location.href;
工作。
window.location.reload(true);
将很难刷新,否则默认情况下为假
有多种使用JavaScript刷新页面的无限方式:
location.reload()
history.go(0)
location.href = location.href
location.href = location.pathname
location.replace(location.pathname)
location.reload(false)
如果需要再次从Web服务器提取文档(例如,文档内容动态变化的地方),则将参数传递为
true
。
您可以继续执行具有创意的列表:
window.location = window.location
window.self.window.self.window.window.location = window.location
var methods = [
"location.reload()",
"history.go(0)",
"location.href = location.href",
"location.href = location.pathname",
"location.replace(location.pathname)",
"location.reload(false)"
];
var $body = $("body");
for (var i = 0; i < methods.length; ++i) {
(function(cMethod) {
$body.append($("<button>", {
text: cMethod
}).on("click", function() {
eval(cMethod); // don't blame me for using eval
}));
})(methods[i]);
}
button {
background: #2ecc71;
border: 0;
color: white;
font-weight: bold;
font-family: "Monaco", monospace;
padding: 10px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.5s ease;
margin: 2px;
}
button:hover {
background: #27ae60;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
(reload()/(false))
较慢。嗯。有趣。:)以及1和6与reload()
默认参数相同false
。
location.href = location.href
是我通常使用的,但感谢其他人。很有用!+1
我想有很多方法可以起作用:
window.location.reload();
history.go(0);
window.location.href=window.location.href;
window.location.href=window.location.href;
将做什么,如果你的URL对最终A#/ hashbang example.com/something#blah
:
location.reload()
和之间的区别history.go(0)
是什么,那就没有了。的HTML 5规范的相关部分w3.org/TR/html5/browsers.html#dom-history-go明确地决定了它们是等效的:“当go(delta)
被调用方法中,如果参数的方法进行省略或具有如果值为零,则用户代理必须像location.reload()
调用该方法一样起作用。”
要使用jQuery重新加载页面,请执行以下操作:
$.ajax({
url: "",
context: document.body,
success: function(s,x){
$(this).html(s);
}
});
我在这里使用的方法是Ajax jQuery。我在Chrome 13 上进行了测试。然后将代码放入处理程序中,该处理程序将触发重新加载。该URL是""
,这意味着这个页面。
context
参数,$.ajax
并期望它以某种方式执行某种魔术。它所做的只是设置this
回调函数的值。网址为的Ajax ""
会命中您当前使用的网址,从而通常会加载完整的HTML(包括<html>
和<head>
和<body>
),并且此答案中的任何内容都不会过滤掉您不需要的内容。
如果当前页面是通过POST请求加载的,则可能要使用
window.location = window.location.pathname;
代替
window.location.reload();
因为window.location.reload()
如果在由POST请求加载的页面上调用,则会提示您进行确认。
window.location = window.location
但是@mrmillsy 也不完美;如果当前URL中有一个虚假的(hashbang),则不会执行任何操作。
问题应该是
如何使用JavaScript刷新页面
window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another
您选择太多了。
三种与缓存相关行为不同的方法:
location.reload(true)
在实现forcedReload
参数为的浏览器中location.reload()
,通过获取页面及其所有资源(脚本,样式表,图像等)的新副本来重新加载。不会从缓存中提供任何资源-从服务器获取新副本,而不发送任何if-modified-since
或if-none-match
在请求中标头。
等效于用户在可能的情况下在浏览器中执行“硬重装”。
请注意,在Firefox(请参阅MDN)和Internet Explorer(请参阅MSDN)中支持传递true
到,但不被普遍支持,也不属于location.reload()
,也不是W3 HTML 5规范,W3 HTML 5.1规范草案或WHATWG HTML Living Standard的一部分。。
在不支持的浏览器(例如Google Chrome浏览器)中, location.reload(true)
其行为与相同location.reload()
。
location.reload()
要么 location.reload(false)
重新加载页面,获取页面HTML本身的新的非缓存副本,并对浏览器缓存的任何资源(例如脚本)执行RFC 7234重新验证请求,即使它们是新鲜的RFC 7234也会允许浏览器提供服务他们没有重新验证。
location.reload()
据我所知,确切地说,浏览器在执行调用时应如何利用其缓存;我通过实验确定了上述行为。
这等效于用户只需在其浏览器中按下“刷新”按钮即可。
location = location
(或无限多种其他涉及分配给 location
其属性)仅在页面的URL不包含虚假/散列的情况下有效!
重新加载页面,而无需重新获取或重新验证任何 新内容缓存中的资源。如果页面的HTML本身是最新的,这将重新加载页面,而不执行任何HTTP请求。
从缓存的角度来看,这等效于用户在新标签页中打开页面。
但是,如果页面的URL包含哈希,则该哈希将无效。
再次,据我所知,这里的缓存行为是不确定的。我通过测试确定了它。
因此,总而言之,您要使用:
location = location
为了最大程度地利用缓存,只要页面的URL中没有哈希,在这种情况下将无法使用location.reload(true)
来获取所有资源的新副本而无需重新验证(尽管它不受普遍支持,并且location.reload()
在某些浏览器(如Chrome)中也不会有所不同)location.reload()
以忠实地再现用户单击“刷新”按钮的效果。location = location
如果URL中存在散列,则无法使用。对于使用fragids的任何网站-甚至对于有人链接到页面可能会在URL上添加fragid的任何网站-都会使其失效。
window.location.reload()
将从服务器重新加载,并再次加载所有数据,脚本,图像等。
因此,如果您只想刷新HTML,它们window.location = document.URL
将以更快的速度返回并且流量更少。但是,如果URL中包含井号(#),它将不会重新加载页面。
location.reload()
即使没有参数也可以强制重新验证缓存的资源,同时window.location = document.URL
很高兴在不影响服务器的情况下只要不刷新就可以提供缓存的资源。
jQuery Load
函数还可以执行页面刷新:
$('body').load('views/file.html', function () {
$(this).fadeIn(5000);
});
由于这个问题很笼统,让我们尝试总结答案的可能解决方案:
简单的普通JavaScript解决方案:
最简单的方法是以适当的方式放置一线解决方案:
location.reload();
许多人在这里缺少的是,因为他们希望得到一些“要点”,因为reload()函数本身提供了一个布尔值作为参数(详细信息:https : //developer.mozilla.org/en-US/docs/Web / API / Location / reload)。
Location.reload()方法从当前URL重新加载资源。它的可选唯一参数是布尔值,当它为true时,它将导致始终从服务器重新加载页面。如果为false或未指定,浏览器可能会从其缓存中重新加载页面。
这意味着有两种方法:
解决方案1:强制从服务器重新加载当前页面
location.reload(true);
解决方案2:从缓存或服务器重新加载(基于浏览器和您的配置)
location.reload(false);
location.reload();
而且,如果您想将其与jQuery结合使用以监听事件,我建议您使用“ .on()”方法代替“ .click”或其他事件包装器,例如,更合适的解决方案是:
$('#reloadIt').on('eventXyZ', function() {
location.reload(true);
});
这是一个使用jQuery异步重新加载页面的解决方案。它避免了由引起的闪烁window.location = window.location
。本示例显示了一个页面,该页面如仪表板一样不断重新加载。它经过了实战测试,并在时代广场的信息显示电视上运行。
<!DOCTYPE html>
<html lang="en">
<head>
...
<meta http-equiv="refresh" content="300">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script>
function refresh() {
$.ajax({
url: "",
dataType: "text",
success: function(html) {
$('#fu').replaceWith($.parseHTML(html));
setTimeout(refresh,2000);
}
});
}
refresh();
</script>
</head>
<body>
<div id="fu">
...
</div>
</body>
</html>
笔记:
$.ajax
直接使用like $.get('',function(data){$(document.body).html(data)})
会导致css / js文件被缓存破坏,即使您使用cache: true
,这也是我们使用的原因parseHTML
parseHTML
找不到body
标签所以您的整个身体需要再增加一个格,我希望这一点知识有一天能对您有所帮助,您可以猜测我们如何为此选择IDdiv
http-equiv="refresh"
如果万一javascript / server打h出现问题,请使用此方法,然后页面仍会重新加载,而您不会接到电话http-equiv
刷新修复了我发现
window.location.href = "";
要么
window.location.href = null;
还可以刷新页面。
这使得重新加载页面消除任何哈希值变得非常容易。当我在iOS模拟器中使用AngularJS时,这非常好,这样我就不必重新运行该应用程序。
您可以使用 JavaScript location.reload()
方法。此方法接受布尔参数。true
或false
。如果参数为 true
; 该页面始终从服务器重新加载。如果是false
; 这是默认值或带有空参数的浏览器会从缓存中重新加载页面。
带true
参数
<button type="button" onclick="location.reload(true);">Reload page</button>
带default
/ false
参数
<button type="button" onclick="location.reload();">Reload page</button>
使用jQuery
<button id="Reloadpage">Reload page</button>
<script type="text/javascript">
$('#Reloadpage').click(function() {
location.reload();
});
</script>
采用
location.reload();
要么
window.location.reload();
如果您使用的是jQuery并希望刷新,请尝试在javascript函数中添加jQuery:
我想在单击oh an时从页面中隐藏iframe h3
,对我来说这是可行的,但是我无法单击允许我查看iframe
除非手动刷新浏览器,否则我不理想。
我尝试了以下方法:
var hide = () => {
$("#frame").hide();//jQuery
location.reload(true);//javascript
};
将普通Jane javascript与jQuery混合应该可以。
// code where hide (where location.reload was used)function was integrated, below
iFrameInsert = () => {
var file = `Fe1FVoW0Nt4`;
$("#frame").html(`<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/${file}\" frameborder=\"0\" allow=\"autoplay; encrypted-media\" allowfullscreen></iframe><h3>Close Player</h3>`);
$("h3").enter code hereclick(hide);
}
// View Player
$("#id-to-be-clicked").click(iFrameInsert);
这里的所有答案都很好。由于该问题指定了如何使用jQuery的,我只是想为将来的读者添加更多内容。
jQuery是跨平台的 JavaScript库,旨在简化HTML的客户端脚本。
〜维基百科〜
因此,您将了解 jQuery的, 要么 jQuery的 是基于 javascript。所以纯粹javascript 在简单的事情上会更好。
但是,如果您需要 jQuery的 解决方案,这是一个。
$(location).attr('href', '');
有很多方法可以重新加载当前页面,但是以某种方式使用这些方法,您可以看到页面已更新,但缓存值很少,因此,请克服该问题,或者如果您希望进行艰难的请求,请使用以下代码。
location.reload(true);
//Here, it will make a hard request or reload the current page and clear the cache as well.
location.reload(false); OR location.reload();
//It can be reload the page with cache
<i id="refresh" class="fa fa-refresh" aria-hidden="true"></i>
<script>
$(document).on('click','#refresh',function(){
location.reload(true);
});
</script>
可能最短(12个字符)-使用历史记录
history.go()
您可以用两种方式编写它。第一种是重新加载页面的标准方法,也称为简单刷新
location.reload(); //simple refresh
另一个叫做硬刷新。在这里,您传递布尔表达式并将其设置为true。这将重新加载页面,破坏较旧的缓存并从头开始显示内容。
location.reload(true);//hard refresh
$(document).on("click", "#refresh_btn", function(event)
{
window.location.replace(window.location.href);
});
以下是几行代码,您可以使用这些代码使用jQuery重新加载页面。
它使用jQuery包装器并提取本地dom元素。
如果您只想在代码上使用jQuery,并且不关心代码的速度/性能,请使用此功能。
只需从1到10进行选择即可,或者在此之前根据模式和答案添加更多内容。
<script>
$(location)[0].reload(); //1
$(location).get(0).reload(); //2
$(window)[0].location.reload(); //3
$(window).get(0).location.reload(); //4
$(window)[0].$(location)[0].reload(); //5
$(window).get(0).$(location)[0].reload(); //6
$(window)[0].$(location).get(0).reload(); //7
$(window).get(0).$(location).get(0).reload(); //8
$(location)[0].href = ''; //9
$(location).get(0).href = ''; //10
//... and many other more just follow the pattern.
</script>