Question

我正在为我的建筑中的教师制作一个简单的网络表单，以生成带有嵌入式视频的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下载内容，但是学校计算机上运行的命令级脚本被阻止，因此解决方案described in this SO post对我不起作用。

我一直在寻找一种简单的方法让非程序员轻松地将生成的页面保存为HTML（避免使用Inspect Element，Firebug等）。有什么想法吗？

Answer 1

变量newPage已包含该html文本，因此您可以创建一个html页面，并保存它而不是（或与之一起）打开一个新窗口：

＆＃13;

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);
}

＆＃13;

a {
    display: none;
}

＆＃13;

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

＆＃13;

Answer 2

如果您希望新生成的窗口显示整个页面的HTML，则需要使用 onclick =＆＃34; document.body.parentNode.outerHTML＆＃34; ，因此将获取从 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>

如果您仍然只想提取＆＃34; main＆＃34;的内容。元素，你需要更正这一行：

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);' />"

从JavaScript

2 个答案: