Получить исходный код из HTML, созданного JavaScript

Я работаю над простой веб-формой для учителей в моем здании, чтобы генерировать HTML-страницы со встроенными видео для локального использования (наши заменители не могут попасть в Интернет для воспроизведения видео; это обходной путь).



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



Я попытался получить доступ к содержимому с помощью document.getElementById('main').innerHTML, но поскольку информации нет в DOM он возвращает ошибку.



<html>

<head>

<script type="text/javascript">

function createNewWindow () {

  var userName = document.getElementById('user_name').value

  var videoSrc = document.getElementById('video_src').value

  var newPage = "<html><head><link rel='stylesheet' type='text/css' media='screen' href='style.css' /><title>"

  newPage += userName;

  newPage += "</title></head>";

  newPage += "<body><div id='main'><div id='content'><div class='video'>";

  newPage += "<video controls><source src='" + videoSrc;

  newPage += "' type='video/webm'/>";

  newPage += "</video></div <!--video-->>"

  newPage += "<input type='submit' value='Get Code' onclick='alert(document.getElementById(main).innerHTML);'"

  newPage += "</body></html>";

  var j = window.open('');

  j.document.write(newPage);

  j.document.close();

}

</script>

</head>

<body>

<form action="">

<p>

User name: <input type="text" id="user_name">

Video file: <input type="text" id="video_src">

<input type="submit"

  value="Create new page"

  onclick="createNewWindow();"

  >

</p>

</form>

</body>

</html>


Я сначала попытался использовать execCommand для загрузки контента, но запуск сценариев командного уровня на школьных компьютерах заблокирован, поэтому решение, описанное в этом посте SO , не будет работать для меня.



Я застрял на поиске простого способа для непрограммистов легко сохранить сгенерированную страницу в виде HTML (избегая Inspect Element, Firebug и т. д.). Есть идеи?

487   2  

2 ответов:

Переменная newPage уже содержит этот html-текст, поэтому вы можете создать html-страницу и сохранить ее вместо (или вместе с) открытия нового окна: 

function createNewWindow() {
    var userName = document.getElementById('user_name').value
    var videoSrc = document.getElementById('video_src').value
    var newPage = "<html><head><link rel='stylesheet' type='text/css' media='screen' href='style.css' /><title>"
    newPage += userName;
    newPage += "</title></head>";
    newPage += "<body><div id='main'><div id='content'><div class='video'>";
    newPage += "<video controls><source src='" + videoSrc;
    newPage += "' type='video/webm'/>";
    newPage += "</video></div <!--video-->>"
    newPage += "<input type='submit' value='Get Code' onclick='alert(document.getElementById(main).innerHTML);'"
    newPage += "</body></html>";

    var downlink = document.getElementById('downlink');
    downlink.href = 'data:text/plain;charset=utf-8,' + encodeURIComponent(newPage);

    var event = new MouseEvent('click');

    downlink.dispatchEvent(event);
}
a {
    display: none;
}
<form action="">
    <p>User name:
        <input type="text" id="user_name">Video file:
        <input type="text" id="video_src">
        <input type="button" id="createHtml" value="Create and download page" onclick="createNewWindow();">
    </p> 
  
    <a id="downlink" download="html_page.html"></a>

</form>
0  
2015-09-29 14:26:48

Если вы хотите, чтобы вновь созданное окно показывало вам HTML всей страницы, вам нужно использовать onclick="document.тело.родительский дом.outerHTML " , так как это позволит получить весь HTML-контент, взятый из тега html и внутри него.

Вот исправленный код: 

<html>
<head>
<script type="text/javascript">
function createNewWindow () {
  var userName = document.getElementById('user_name').value
  var videoSrc = document.getElementById('video_src').value
  var newPage = "<html><head><link rel='stylesheet' type='text/css' media='screen' href='style.css' /><title>"
  newPage += userName;
  newPage += "</title></head>";
  newPage += "<body><div id='main'><div id='content'><div class='video'>";
  newPage += "<video controls><source src='" + videoSrc;
  newPage += "' type='video/webm'/>";
  newPage += "</video></div <!--video-->>"
  newPage += "<input type='submit' value='Get Code' onclick='alert(document.body.parentNode.outerHTML)' />"
  newPage += "</body></html>";
  var j = window.open('');
  j.document.write(newPage);
  j.document.close();
}
</script>
</head>
<body>
<form action="">
<p>
User name: <input type="text" id="user_name">
Video file: <input type="text" id="video_src">
<input type="submit"
  value="Create new page"
  onclick="createNewWindow();"
  >
</p>
</form>
</body>
</html>

Если вы все еще хотите извлечь только содержимое элемента "main", вам нужно исправить эту строку: 

newPage += "<input type='submit' value='Get Code' onclick='alert(document.getElementById(main).innerHTML);'"

К этому: 

 newPage += "<input type='submit' value='Get Code' onclick='alert(document.getElementById(\"main\").innerHTML);' />"
0  
2015-09-29 14:52:00

Comments

    Ничего не найдено.
Click here to cancel reply.