Можно ли статически загружать данные на веб-страницу, если не включен JavaScript? - PullRequest
Новая
       5

Можно ли статически загружать данные на веб-страницу, если не включен JavaScript?

0 голосов
/ 23 февраля 2012

Допустим, у меня есть одностраничный сайт, и я хочу дождаться загрузки любого контента ниже сгиба (используя ajax), пока пользователь не щелкнет ссылку, чтобы перейти к этому контенту на той же странице. Тем не менее, я не хочу, чтобы пользователи, у которых отключен JavaScript, просто не видели контент ниже сгиба. Основная причина загрузки контента с помощью ajax заключается в том, что начальная загрузка страницы происходит быстрее, поэтому контент загружается в любом случае, а затем скрывается до тех пор, пока пользователь не нажмет кнопку. Я уверен, что можно загружать контент, только если включен JavaScript, но возможно ли не загружать определенный «статический» или серверный контент, если JavaScript включен в браузере?

Можно ли вообще предотвратить загрузку сервером определенного статического содержимого при начальной загрузке страницы, если в браузере включен JavaScript?

Ответы [ 2 ]

2 голосов
/ 23 февраля 2012

Вы можете рассмотреть возможность использования тега 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..

Свойство innerHTML тега noscript вернет закодированную строку 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>

В качестве альтернативы, если контент «ниже сгиба» действительно тяжелый для изображения / видеоВозможно, вы просто захотите рассмотреть Ленивая загрузка содержимого.

1 голос
/ 23 февраля 2012

Если вы хотите избежать загрузки данных в случае клиента с включенным 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, и пользователь вернется к статической странице.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...