Question

我正在尝试使用AngularJS创建一个SPA作为我网站的主视图。我在服务器端使用ServiceStack，因此可以干净地提供HTML或JSON请求，具体取决于访问它的内容。我主要担心的是使用脚本阻止程序，阻止AngularJS正确呈现页面。到目前为止，我的主要工作方式是呈现静态页面，并注入一个小脚本，如果它检测到Javascript是否已启用，则会重定向到AngularJS支持的页面。这很有效，因为当用户从静态页面开始时，每个URL都能正常工作，但我遇到了几个障碍。

浏览包含“？View = SPA”的链接会在禁用JavaScript时中断页面
这会导致加载的第一页加载两次。

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

有什么想法吗？

Answer 1

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

默认隐藏这些链接：

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

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

在browser-check page上使用Cookie，该Cookie会在iframe中加载第一页或重定向到该页面以避免这种情况。

<强>参考

Track Non-JavaScript Visits In Google Analytics

Answer 2

我不会重定向到其他页面，而是在同一个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>

如果禁用了javascript，则head部分中的CSS Class hideIfNoScript会确保所有带有此类的HTML标记都不会向用户显示。

noscript标签显示替代内容。

如果启用了javascript，则body部分 end 的小脚本会显示这些元素。在这种情况下，隐藏了noscript标记的内容。

AngularJS带有noscript

2 个答案: