Question

我的目标是从现有站点创建SAP

我尝试拦截每个页面更改，以添加一些路由和一些JS加载内容。

我尝试过：beforeunload

window.addEventListener("beforeunload", function (event) {
    event.preventDefault();
});

但它似乎不起作用：事件已触发，但url和页面已更改。有什么想法吗？

Answer 1

如果通过单击链接（重定向到另一个URL）进行页面更改，只需添加 e.preventDefault（）; ：

<a class="specificAnchorLinkClass" role="link" href="something.html/myPage">Link Text</a>

function goToNewPage(e){
    e.preventDefault();
    // code to fetch/load new page
}

var specificAnchorLinks = Array.from(document.getElementsByClassName('specificAnchorLinkClass'));
specificAnchorLinks.map(x => x.addEventListener('click', goToNewPage);

我还使用了个人SPA式实现，并且我将其用于防止导航离开根页面，同时出于语义和可访问性的目的仍包括标签。

如果您想重定向到另一个页面，但使用URL本身：

function goToNewPage(e){
    e.preventDefault();
    var newUrl = // do something to modify existing url, through  window.location
    window.location.href = newUrl // navigates to the new link
}

或

function goToNewPage(e){
    e.preventDefault();
    var newUrl = // do something to modify existing url, through  window.location
    history.pushState(null, null, newUrl) // stays on the same page, but pushes the url as if navigating to a different page
}

希望有帮助！

JS：如何防止网站上的导航/更改页面？

1 个答案: