单页应用程序问题答案

【问题标题】：Single Page Application Issues单页应用程序问题
【发布时间】：2017-04-28 04:18:39
【问题描述】：

我正在通过在按钮单击事件上加载 div 元素内的 HTML 页面来创建单页应用程序。

例如：

function loadHome(){
         document.getElementById("home-pane").innerHTML='<object type="text/html" data="pages/home.html"></object>';                 
         $("#about-pane").hide();
         $("#blog-pane").hide();
         $("#forum-pane").hide();
         $("#contact-pane").hide();
         $("#home-pane").show();  
};

因此，应用程序的 URL 不会改变。如果是单页申请，恐怕我没有资格使用 Google Ads。请建议我一个替代解决方案，以便我能够在不同的点击事件（主页、关于、联系人、博客等）上生成不同的 URL，并能够通过单独的链接访问这些页面。

我对所有这些东西有点陌生，但我很乐意实施您的所有建议并获得额外的收入来源。

【问题讨论】：

使用 pushState：developer.mozilla.org/en-US/docs/Web/API/…
Modify the URL without reloading the page的可能重复

标签： javascript jquery html single-page-application adsense

【解决方案1】：

根据 cmets 中 @Rory 的建议，您可以使用 History API

我要做的是，在 onclick 中，只需 pushState 一个指向历史记录的新 URL 然后附加一个在 URL 更改时触发的侦听器。该侦听器将查看 URL 并根据它决定要呈现哪个“页面”。

【讨论】：