Question

假设我有一个单页网站，我想等到加载下面的任何内容（使用ajax），直到用户点击链接转到同一页面上的该内容。但是，我不希望禁用JavaScript的用户只看不到任何内容。使用ajax加载内容的全部原因是初始页面加载速度更快，因此以任一方式加载内容然后隐藏，直到用户点击将毫无意义。我确信如果启用了JavaScript，只能加载内容，但如果在浏览器中启用JavaScript，是否可以不加载特定的“静态”或服务器端生成的内容？

如果在浏览器中启用了JavaScript，有没有办法阻止服务器在初始页面加载时加载特定的静态内容？

Answer 1

您可以考虑使用noscript标记。

<body>
  <h1>Above the fold header</h1>
  <video src="fancy-cat.mp4" ... />

  <div id="below-the-fold">
   <noscript>
     <!-- Users with Javascript disabled get this content -->
     <h2>My cat plays piano</h2>
     <video src="piano-cat.mp4" ... />

     <h2>My cat knows how to use the toilet</h2>
     <video src="potty-cat.mp4" ... />
   </noscript>
  </div>

然后，您可以使用javascript在页面加载时复制这些<noscript>标记的内容，并将它们插入到DOM中。

noscript标记的innerHTML属性将返回HTML的编码字符串。但您可以使用方便的花花公子Encoder脚本将其转换为DOM所需的内容。

  <script src="http://www.strictly-software.com/scripts/downloads/encoder.js"></script>
  <script>
    $(window).load(function() {
      // Copy the 'noscript' contents into the DOM
      $("noscript").each(function() {
        $(this).after(Encoder.htmlDecode($(this).html()));
      });  
    });
  </script>
</body>

或者，如果“首屏”内容实际上是图像/视频重叠，您可能只想考虑Lazy Loading内容。

Answer 2

如果您想在启用JS的客户端的情况下避免加载数据，那么您可能必须结合服务器端和客户端技术。

这可以作为粗略指南。披露 - 我没有测试任何这个！

例如，如果您的网站结构如下所示：

/
    page1.jsp
    fragment1_1.jsp
    fragment1_2.jsp
    page2.jsp
    fragment2_1.jsp
    fragment2_2.jsp
    ...

然后page1.jsp看起来像这样（如果您不了解JSP和jQuery，请道歉，但这主要是伪代码）：

<%!
  // Define a method to help us import fragments into the current page.
  // Conditional import of fragment based on isJSEnabled
  void myImport (String fragment, boolean isJSEnabled, HttpServletResponse res) {
    if (!isJSEnabled) {
      // output fragment contents directly to response
      String contents = // get contents of fragment
      res.getWriter().write(contents);
    }
  }
%>

<%
  // How to work out if JS is enabled on the server-side?
  // Not sure it can be done. So need to be told by the browser somehow.
  // Maybe a request parameter. So if param not present, assume no JS.
  boolean isJSEnabled = (null != req.getParameter("js"));
%>

<html>
<head>
<script>
// Try and redirect to JS version of page as soon as possible,
// if we're not already using the JS version of the page.
// This code does not take into account any existing request parameters for
// the sake of brevity.
// A browser with JS-enabled that was incrementally downloading and parsing
// the page would go to the new URL.
if (window.location.href.indexOf("js=true") < 0) {
  window.location.href += "?js=true";
}
</script>
</head>
<body>
  <h1 class="fragment_header" data-fragment-id="fragment1_1">Fragment 1</h1>

  <div>
  <%
    // Conditionally import "fragment1_1".
    myImport("fragment1_1", isJSEnabled);
  %>
  </div>

  <h1 class="fragment_header" data-fragment-id="fragment1_2">Fragment 2</h1>

  <div>
  <%
    // Conditionally import "fragment1_2".
    myImport("fragment1_2", isJSEnabled);
  %>
  </div>

  <script>
    // For each fragment header, we attach a click handler that loads the
    // appropriate content for that header.
    $(".fragment_header").click(function (evt) {
      var header = $(evt.target);
      // Find the div following the header.
      var div = header.next("div");
      if (div.children().length < 1) {
        // Only load content if there is nothing already there.
        div.load(header.attr("data-fragment-id") + ".jsp");
      }
    });

    $("a").click(function (evt) {
      // Stop the browser handling the link normally.
      evt.preventDefault();

      // Rudimentary way of trying to ensure that links clicked use the
      // js=true parameter to keep us is JS mode.
      var href = anchor.attr("href");
      var isLocalHref = // logic to determine if link is local and should be JS-ified.
      if (isLocalHref) {
        href = href + "?js=true";
      }
      window.location.href = href;
    });
  </script>
</body>
</html>

浏览到page1.jsp的用户最初会获得静态版本，尽管支持JS的浏览器会尽快切换到启用JS的版本。

当我们将点击处理程序附加到所有链接时，我们可以控制下一页的加载。如果在某些时候关闭JS，则js = true参数不会附加到每个href，用户将恢复为静态页面。

除非启用JavaScript，否则我是否可以静态加载网页上的数据？

2 个答案: