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

发布于 2025-01-08 00:48:29 字数 326 浏览 2 评论 0原文

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

如果浏览器中启用了 JavaScript，是否有任何方法可以阻止服务器在初始页面加载时加载特定的静态内容？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

半边脸i 2025-01-15 00:48:29

您可以考虑使用 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 复制这些标记的内容并将它们插入到 DOM 中。

noscript 标签的 innerHTML 属性将返回 HTML 编码字符串。但是您可以使用方便的 dandy 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>

或者，如果“首屏”内容确实包含大量图像/视频，您可能只想考虑延迟加载内容。

You might consider using the noscript tag.

<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>

You can then use javascript to copy the contents of these <noscript> tags on page load and insert them into the DOM.

The innerHTML property of a noscript tag will return an encoded string of HTML. But you can use the handy dandy Encoder script to convert it to something the DOM will like.

  <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>

Alternatively, if the "below the fold" content is really image/video heavy, you might just want to consider Lazy Loading the content.

回复收藏 0 原文

她比我温柔 2025-01-15 00:48:29

如果你想避免在客户端启用 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 中，用户将恢复到静态页面。

If you want to avoid loading data in the case of a client with JS enabled, then you might have to combine server-side and client-side techniques.

This could be used as a rough guide. Disclosure - I've not tested any of this!

For example, if your site structure looked like this:

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

Then page1.jsp could look like this (apologies if you don't know JSP and jQuery, but this is mostly pseudo-code anyway):

<%!
  // 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>

A user browsing to page1.jsp would get the static version initially, though a JS enabled browser would switch to the JS enabled version as soon as possible.

As we attach click handlers to all the links, we can control the loading of the next page. If JS is switched off at some point, the js=true parameter will not be appended to each href and the user will revert to a static page.

回复收藏 0 原文

~没有更多了~