javascript jquery自动刷新页面 - 如何使用jQuery刷新页面?




jquery刷新当前页面 重新加载 (19)

它是JavaScript中最短的。

location = '';

如何使用jQuery刷新页面?


问题应该是,

如何使用JavaScript刷新页面

window.location.href = window.location.href; //This is a possibility
window.location.reload(); //Another possiblity
history.go(0); //And another

你被宠坏了选择。


即使没有jQuery,这应该适用于所有浏览器:

location.reload();

如果你正在使用jQuery并想要刷新,那么尝试在javascript函数中添加你的jQuery:

我想在点击一个h3时隐藏页面中的iframe,对我来说它有效但我无法点击允许我查看iframe的项目,除非我手动刷新浏览器...不理想。

我尝试了以下方法:

var hide = () => {
    $("#frame").hide();//jQuery
    location.reload(true);//javascript
};

将简单的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);

您可以使用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>

window.location.reload()将从服务器重新加载,并将再次加载所有数据,脚本,图像等。

因此,如果您只想刷新HTML, window.location = document.URL将返回更快,流量更少。 但如果URL中存在哈希(#),则不会重新加载页面。


你可能想用

location.reload(forceGet)

forceGet是一个布尔值和可选项。

默认值为false,从缓存重新加载页面。

如果要强制浏览器从服务器获取页面以除去缓存,请将此参数设置为true。

要不就

location.reload()

如果你想快速轻松地进行缓存。


使用JavaScript刷新页面有很多方法:

  1. location.reload()
  2. history.go(0)
  3. location.href = location.href
  4. location.href = location.pathname
  5. location.replace(location.pathname)
  6. location.reload(false)

    如果我们需要再次从Web服务器中提取文档(例如文档内容动态更改),我们会将参数传递为true

您可以继续创作列表:

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>


具有不同缓存相关行为的三种方法:

  • location.reload(true)

    在实现location.reload()forcedReload参数的浏览器中,通过获取页​​面的新副本及其所有资源(脚本,样式表,图像等)来重新加载。 不会从缓存中提供任何资源 - 从服务器获取新的副本,而不在请求中发送任何if-modified-sinceif-none-match标头。

    相当于用户在可能的浏览器中进行“硬重载”。

    请注意,Firefox(请参阅location.reload() )和Internet Explorer(请参阅MSDN )支持将true传递给location.reload()但不是普遍支持,不是W3 HTML 5规范的一部分 ,也不是W3草案HTML 5.1规范的一部分 ,也不是WHATWG HTML生活标准

    在不受支持的浏览器中,例如Google Chrome, location.reload(true)行为与location.reload()相同。

  • location.reload()location.reload(false)

    重新加载页面,获取页面HTML本身的新的非缓存副本,并对浏览器缓存的任何资源(如脚本)执行RFC 7234重新验证请求, 即使它们是fresh ,RFC 7234允许浏览器提供服务他们没有重新验证。

    确切地说,在执行location.reload()调用时,浏览器应该如何利用其缓存,就我所知,我没有指定或记录; 我通过实验确定了上述行为。

    这相当于用户只需按下浏览器中的“刷新”按钮即可。

  • location = location (或无限多种其他可能的技术,涉及分配location或其属性)

    仅在页面的URL不包含fragid / hashbang时才有效!

    重新加载页面,无需从缓存中重新获取或重新验证任何 fresh资源。 如果页面的HTML本身是新鲜的,这将重新加载页面而根本不执行任何HTTP请求。

    这相当于(从缓存角度来看)用户在新选项卡中打开页面。

    但是,如果页面的URL包含哈希值,则无效。

    同样,据我所知,此处的缓存行为未指定; 我通过测试确定了它。

总而言之,您想要使用:

  • location = location最大限度使用缓存的位置, 只要页面的URL中没有哈希值,在这种情况下这将不起作用
  • location.reload(true)获取所有资源的新副本而不重新验证(虽然它不受普遍支持,并且在某些浏览器(如Chrome)中与location.reload()行为没有区别
  • location.reload()忠实再现用户点击“刷新”按钮的效果。

要使用jQuery重新加载页面,请执行以下操作:

$.ajax({
    url: "",
    context: document.body,
    success: function(s,x){
        $(this).html(s);
    }
});

我使用的方法是Ajax jQuery。 我在Chrome 13上测试了它。然后我将代码放在将触发重新加载的处理程序中。 URL"" ,表示此页面


如果当前页面是由POST请求加载的,您可能想要使用

window.location = window.location.pathname;

代替

window.location.reload();

因为如果在POST请求加载的页面上调用, window.location.reload()将提示确认。


不需要 jQuery中的任何东西,使用纯JavaScript重新加载页面,只需在location属性上使用reload函数,如下所示:

window.location.reload();

默认情况下,这将使用浏览器缓存(如果存在)重新加载页面...

如果您想强制重新加载页面,只需将值传递给重载方法,如下所示......

window.location.reload(true);

此外,如果您已经在窗口范围内 ,您可以摆脱窗口并执行:

location.reload();

这里的所有答案都很好。 由于问题指定了使用jquery重新加载页面,我只是想为未来的读者添加更多内容。

jQuery是一个跨平台的JavaScript库,旨在简化HTML的客户端脚本。

Wikipedia

所以你会明白jquery或jquery的基础是基于javascript 。 因此,对于简单的事情,使用纯javascript会更好。

但是如果你需要一个jquery解决方案,那就是一个。

$(location).attr('href', '');

使用onclick="return location.reload();" 在按钮标签内。

<button id="refersh-page" name="refersh-page" type="button" onclick="return location.reload();">Refesh Page</button>

这是一个使用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直接像$.get('',function(data){$(document.body).html(data)}) 会导致css / js文件被缓存破坏 ,即使你使用cache: true ,这就是我们使用parseHTML的原因
  • parseHTML不会找到一个body标签,所以你的整个身体需要进入一个额外的div,我希望这一天的知识可以帮助你,你可以猜到我们如何为这个div选择id
  • 使用http-equiv="refresh"以防万一javascript / server hiccup出现问题,那么页面将无需重新加载而无需拨打电话
  • 这种方法可能以某种方式泄漏内存, http-equiv刷新修复了这一点

我发现

window.location.href = "";

要么

window.location.href = null;

也刷页面。

这使得重新加载删除任何哈希的页面变得非常容易。 当我在iOS模拟器中使用AngularJS时,这非常好,所以我不必重新运行应用程序。


jQuery Load函数也可以执行页面刷新:

$('body').load('views/file.html', function () {
    $(this).fadeIn(5000);
});

简单的Javascript解决方案:

 location = location; 

<button onClick="location = location;">Reload</button>


$.contains()你想要什么?

jQuery.contains( container, contained )

如果第二个参数提供的DOM元素是第一个参数提供的DOM元素的后代,无论是直接子$.contains()$.contains()方法都返回true。 否则,它返回false。 仅支持元素节点; 如果第二个参数是文本或注释节点, $.contains()将返回false。

注意 :第一个参数必须是DOM元素,而不是jQuery对象或纯JavaScript对象。





javascript jquery refresh reload