Question

我有两个html页面。一个是display.html，另一个是test.html。在test.html中，我有一个按钮：

<button id="btn" class="btn btn-default commonButton" type="button">Go</button>

在另一页面上，我正在显示一些内容。这两个页面的javascript代码都在同一个JS文件中。

我想知道的是，如果我单击test.html中的按钮，如何重新加载/刷新我的另一个页面display.html？

我正在做这样的事情

$("#btn").on('click',function() {
  window.location = 'display.html';
});

这会将我重定向到该页面，而不是我要执行的操作。

第1页上有按钮

 <button id="btn" class="btn btn-default commonButton" type="button">
         </button>

第1页JS代码

Imagehandeler
function Imagehandeler() 
{
    $.ajax({
    $("#btn").click(function() {
                localStorage.setItem('doRefresh', 'yes');
});
// ajax callinge here 
}); //ajax closing
} //function closing

现在在第2页JS

    fullCode();
    function fullCode()
    {
        window.addEventListener('storage', function(e) {  
            var canIRefresh = storage.getItem('doRefresh');
            if(canIRefresh == 'yes'){
                console.log(canIRefresh)
              localStorage.setItem('doRefresh', 'no');
              location.reload();
            }
            });
// Some codes to displaying data
}

现在这就是我的想法

Answer 1

对于您的情况，我有个主意，但我之前没有尝试过。向localstorage添加一个值以指示页面刷新。并聆听本地存储的价值变化。当值更改时，刷新页面并将值恢复到初始状态。如下所示：

localStorage.setItem('doRefresh', 'yes');

在“其他页面”中，收听本地存储：

 window.addEventListener('DOMContentLoaded', (event) => { 
    window.addEventListener('storage', function(e) { 
    var canIRefresh = storage.getItem('doRefresh'); 
    console.log(canIRefresh); 
    if(canIRefresh == 'yes'){ 
    console.log(canIRefresh) 

    localStorage.setItem('doRefresh', 'no'); 

    } 
    }); 
  });

Answer 2

使用window.location.href = path;

单击按钮如何刷新/重新加载页面

2 个答案: