Question

我有一个页面，用户可以在其中单击按钮以加载iframe（叠加该页面）。为了使它看起来像我实际上将它们带到该页面，我还使用页面的URL调用history.pushState（）（提供的代码将使这一点更加清楚）。现在，如果按浏览器上的“后退”按钮，则不会立即触发onpopstate事件。仅在第二次单击时才这样做。

HTML

<button class="d">Apple</button>
<button class="d">Banana</button>
<button class="d">Orange</button>
<button class="d">Pineapple</button>

<iframe src="" style="position:absolute; width:0; height:0; left:0; top:0;"></iframe>

JavaScript / jQuery

$(document).ready(function() {
    window.onpopstate = function(event) {
        $("iframe").prop("src", "");
        $("iframe").css("width", "0").css("height", "0");
    };

    $(".d").on('click', function() {
        window.history.pushState({},"Thanks","http://localhost/a/details.php?p=" + $(this).text());
        $("iframe").prop("src", "http://localhost/a/details.php?p=" + $(this).text());
        $("iframe").css("width", "100%").css("height", "100%");
    });
});

我要执行的操作是，在地址栏中显示带有新URL的iframe（此部分正在工作），然后单击“后退”按钮，在隐藏iframe并重置后将我带回到旧页面网址。

所有文件的基本服务器为http://localhost/a/

后退按钮不适用于包含动态加载的iframe的history.pushState

0 个答案: