Как сделать динамическую или сгенерированную HTML-страницу сохраняемой? - PullRequest
Новая
       14

Как сделать динамическую или сгенерированную HTML-страницу сохраняемой?

5 голосов
/ 09 января 2012

Я все еще немного новичок в додзё, JavaScript и HTML-кодировании.Я унаследовал владение HTML-страницей, которая закодирована с использованием dojo 1.4.2 (будет обновляться в будущем) и JavaScript.По сути, HTML-страница содержит форму, которая изначально отображается для пользователя.После того, как пользователь заполняет форму и отправляет ее, форма заменяется сгенерированным контентом на основе его ответов.

Это делается с помощью ответов в форме, чтобы показать или скрыть различные элементы div, которые уже содержатсяв файле HTML.Таким образом, форма скрыта и раскрыто некоторое подмножество других элементов div.

Мы бы хотели, чтобы эта сгенерированная страница была сохранена пользователем как статическая HTML-страница.Поэтому, по сути, мы хотим сохранить в файле только отображенные элементы div, а не всю страницу.В настоящее время сохранение просто сохраняет локальную копию, которая потребует от пользователя повторной отправки формы в каждом представлении.

Мне сказали, что это можно сделать путем передачи данных в службу (возможно, JSP), которая будетсправиться с этим и вернуться в браузер.Однако я не знаком с этим и не смог найти никаких примеров.Есть ли способ сделать это, и есть ли у кого-нибудь примеры или документация, на которые я мог бы указать?

В идеале, я хотел бы вставить кнопку сохранения, которая сохраняет сгенерированный контент, просматриваемый в браузере безфактически создает статический HTML, который останется на сервере.

Заранее спасибо.

Ответы [ 4 ]

3 голосов
/ 25 апреля 2012

Как насчет букмарклета , подобного этому? 

javascript:document.location='data:text/html,'+document.all[0].innerHTML;

Он работает, получая доступ к HTML-представлению текущего DOM, а затем перенаправляет на новую страницу это построено из разметки HTML с использованием схемы URI данных .

Новая страница может быть легко сохранена с помощью обычного пункта меню браузера.Обратите внимание, что относительные URL-адреса не выдержат этого преобразования, поэтому сохраненная страница может потерять свои ссылки на таблицу стилей / сценарий / изображение.

1 голос
/ 09 января 2012

Вы можете использовать флэш-плагин для загрузки динамически создаваемых данных.Я написал небольшой скрипт здесь , который делает свое дело.

Вот пример скрипта.

Просто бросьте три вещи в dist , где бы вы ни находились.Включите в голову скрипты swfobject.js и bhd.js.Включите немного html-кода в тело: <div id="dl_button"></div>

При загрузке страницы запустите такой скрипт: 

var dlBtn = new BHD.Button({
  // id of the element to replace with this button (required)
  id:'dl_button',
  // button image
  sprite:'buttons.png'
},function(){
  // set default filename
  dlBtn.setFile('untitled.html');
  // set file contents
  dlBtn.setData('<html>' + document.documentElement.innerHTML + '</html>');
});

Ваш "buttons.png" должен выглядеть примерно так (спрайт с 3 состояниями, расположенными по вертикали):

button sprite

Если все было сделано правильно, нажатие кнопки должно предложить пользователю загрузить копию текущего состояния страницы.

1 голос
/ 10 января 2012

Используя что-то вроде jQuery, легко получить весь визуализированный HTML-контент: 

$(document).ready(function(){   
   var rendered = $('html').html();   // store this in some variable   
});

Существует проблема, связанная с тем, что вы хотите сохранить страницу, что не так просто сделать в JavaScript из-за ограничений безопасности браузера, которые не позволяют браузеру получить доступ к локальной файловой системе.

Internet Explorer может быть исключением, если используется ActiveX или execCommand (http://4umi.com/web/javascript/filewrite.php). В противном случае вам придется использовать какой-либо сторонний инструмент / плагин (например, Flash), как указывал GGG.

1 голос
/ 09 января 2012

Вы можете ввести механизм, который вносит изменения в страницу в соответствии с параметрами URL (т. Е. Содержимым проанализированной строки запроса).

Т.е. с учетом URL, содержащего часть запроса (например, * 1004).* Element s, отображенные на p1 или p2 , будут отображаться, другие - нет.

...