2

我正在尝试使用 AngularJS 作为我网站的主视图来创建 SPA。我在服务器端使用 ServiceStack，因此可以根据访问它的内容干净地提供 HTML 或 JSON 请求。我主要担心的是使用脚本拦截器，阻止 AngularJS 正确呈现页面。到目前为止，我的主要工作方式是渲染静态页面，并注入一个小脚本，如果它检测到是否启用了 Javascript，则重定向到 AngularJS 驱动的页面。这很好用，因为当用户从静态页面开始时，每个 URL 都可以正常工作，但是我遇到了一些障碍。

  1. 如果 JavaScript 被禁用，浏览包含“?View=SPA”的链接会破坏页面
  2. 这会导致加载的第一个页面被加载两次。

我正在寻找替代方案，但到目前为止我还没有找到任何干净的解决方案。我正在考虑将“？View=SPA”作为 POST 变量包含在内，但我仍然不确定该实现。

有什么想法吗？

4

2 回答 2

0

如果 JavaScript 被禁用，浏览包含“?View=SPA”的链接会破坏页面

默认隐藏这些链接：

a[href*='SPA'] { display: none; }

这会导致加载的第一页被加载两次

在浏览器检查页面上使用 cookie加载 iframe 中的第一页或重定向到它以避免这种情况。

参考

在 Google Analytics 中跟踪非 JavaScript 访问

于 2014-09-30T15:45:53.203 回答
0

我不会重定向到其他页面，而是在同一个 HTML 文件中实现这两种情况，如下所示：

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <style>.hideIfNoScript {display: none}</style>
  </head>
  <body ng-app ng-init="msg = 'hello world'">
    <input class="hideIfNoScript" ng-model="msg" />
    <p class="hideIfNoScript">{{msg}}</p>
    <noscript>
        <p>Content without javascript</p>
    </noscript>
    <script type="text/javascript">
        var myEl = angular.element( document.querySelectorAll( '.hideIfNoScript' ) );
        myEl.removeClass('hideIfNoScript');
    </script>
  </body>
</html>

头部部分中的 CSS 类 hideIfNoScript 确保在禁用 javascript 时，所有具有此类的 HTML 标记都不会显示给用户。

noscript 标记显示替代内容。

如果启用了 javascript，则正文部分末尾的小脚本会使这些元素可见。在这种情况下，noscript 标签的内容是隐藏的。

于 2015-05-08T15:57:36.110 回答