Get source from HTML created by JavaScript

Question

I'm working on a simple web form for teachers in my building to generate HTML pages with embedded videos to use locally (our substitutes can't get on the Internet to play videos; this is a workaround).

I'm using a script to take parameters from a form and dynamically build the HTML. I know the server is building the page, not the client, but is there no way for them to save the source?

I tried accessing the content with document.getElementById('main').innerHTML, but because there's no information in the DOM, it returns an error.

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

I first tried using execCommand to download the content, but running command-level scripts on school computers is blocked, so the solution described in this SO post won't work for me.

I'm stuck on finding a simple way for non-programmers to save the generated page as HTML easily (avoiding Inspect Element, Firebug, etc). Any ideas?

document.getElementById(\'main\').innerHTML and no, they cannot themselves save the source on your server unless you allow them to send the html to your server — mplungjan
– mplungjan, Commented Sep 29, 2015 at 10:57
possible duplicate of How to open and save text in html to a file using javascript in HTML — Liam
– Liam, Commented Sep 29, 2015 at 10:59
Seeing as how you're generating all the HTML in your JavaScript code, would an option be to also append the HTML into a pre element in the page which the user can easily copy from? — bunnmatt
– bunnmatt, Commented Sep 29, 2015 at 11:01
correct me if i'm wrong.you just want to display a form and after submitting the form it'll generate the HTML page ?? — Shrinath
– Shrinath, Commented Sep 29, 2015 at 11:01
@Liam I think this is not a duplicate actually. The window.open()/document.write() approach in the code snippet here will work, and surprisingly none of the answers at stackoverflow.com/questions/3223915/… even suggest using that. (afaict the problem in the OP’s code was just the quoting issue that @mplungjan noted.) — sideshowbarker
– sideshowbarker, Commented Sep 29, 2015 at 11:06

Ori Drori · Accepted Answer · 2015-09-29 11:26:48Z

0

The variable newPage already contains that html text, so you can create an html page, and save it instead of (or together with) opening a new window:

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>

answered Sep 29, 2015 at 11:26

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Brian Over a year ago

This is perfect...it was the route I was heading after reading last night, so I appreciate the worked solution. Cheers!

Miki Berkovich · Accepted Answer · 2015-09-29 11:52:00Z

If you want the newly generated window to show you the HTML of the entire page, you need to use onclick="document.body.parentNode.outerHTML", as this will get the whole HTML content taken from the html tag and within it.

Here's the corrected code:

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

If you'd still like to extract only the content of the "main" element, you need to correct this line:

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

to this one:

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

Collectives™ on Stack Overflow

Get source from HTML created by JavaScript

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related