如何从第一页的按钮重新加载第二页？

Question

我在第一页按钮，当我点击第一页的按钮时，我想刷新第二页？

我一直在使用这段代码，但没有工作：

var url_home = "{{ url('/') }}";

$(document).ready(function()
{  
    $("#refreshDIV").click(function()
    {
        $("#refreshDIV").reload(url_home);
    });
});

Answer 1

只要两个页面同时打开，您就可以使用本地存储在浏览器中完成此操作。

在您的第一页 ，可以设置本地存储象下面这样：

$("#refreshDIV").click(function()
{
    localStorage.setItem('refreshOtherPage', '0');
    localStorage.setItem('refreshOtherPage', '1');
});

然后，在第二页，你可以添加一个监听器脚本来自动重新加载页面：

//Fired from page ONE tab

    $(window).on('storage', function (e)
    {
        var storageEvent = e.originalEvent;

        if ((storageEvent.key == 'refreshOtherPage')
            && (storageEvent.oldValue == '0')
            && (storageEvent.newValue == '1'))
        {
          // DO WHATEVER YOU WANTED TO DO WHEN THAT BUTTON WAS CLICKED HERE
        }
    });

Answer 2

看来你混合了javascript和jquery。 jquery中不存在reload()函数。 但是，您即将回答您的问题。 但是你必须将你的'第二页'放入div＃id。

<div id="page1"><button id="reload" ...></div>
<div id="page2">the second page, no page headers</div>

而你的jquery

var url_home = "{{ url('/') }}";

$(document).ready(function()
{  
    $("button#reload").click(function()
    {
        //font awesome spinner while loading, temporarily replaces #page2
        $("#page2").html('<div class="fas fa-sync fa-spin fa-2x fa-fw"></span>'); 
        $("#page2").load(url_home);
    });
});

您可以通过用boostrap <a>按钮替换它来使按钮动态化并捕获url let url_home = $(this).attr('href'); ，不要忘记使用preventDefault()并触发$("a#reload">如果你选择这个选项。

Answer 3

如果我理解正确，您可以在首次启动新选项卡时命名链接的目标属性。 然后，每次单击用于启动选项卡的链接时，它都会为您重新加载该选项卡中的页面。

在页面A中，您可以像这样添加指向页面B的链接：

<a href="/page-b" target="page_b">Foo</a>

现在单击该链接，它将在新选项卡中打开页面B.

再次单击它将重新加载页面B.

当有人直接访问/page-b时，这不起作用。

无需在服务器端编写任何Javascript或其他内容。 但是，如果必须动态创建按钮，则可以调整此方法以满足您的需求。 希望这可以帮助！

如果您想重新加载同一网页的一部分，那么可以通过AJAX轻松实现。