从JavaScript创建的HTML获取源代码_Javascript_Html

从JavaScript创建的HTML获取源代码

javascript html

从JavaScript创建的HTML获取源代码,javascript,html,Javascript,Html,我正在为大楼里的老师制作一个简单的网页表单，生成带有嵌入式视频的HTML页面供本地使用（我们的替代者无法上网播放视频；这是一个解决办法）我正在使用脚本从表单中获取参数并动态构建HTML。我知道是服务器在构建页面，而不是客户端，但是他们没有办法保存源代码吗我尝试使用document.getElementById（'main'）.innerHTML访问内容，但由于DOM中没有信息，因此返回错误 <html> <head> <script type="text/jav

我正在为大楼里的老师制作一个简单的网页表单，生成带有嵌入式视频的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>


函数createNewWindow（）{
var userName=document.getElementById（'user_name'）。值
var videoSrc=document.getElementById（'video_src'）。值
var newPage=“”
newPage+=用户名；
新建页面+=“”；
新建页面+=“”；
新建页面+=“”；
newPage+=“变量newPage
已经包含该html文本，因此您可以创建一个html页面，并将其保存，而不是（或与）打开一个新窗口：

函数createNewWindow（）{
var userName=document.getElementById（'user_name'）。值
var videoSrc=document.getElementById（'video_src'）。值
var newPage=“”
newPage+=用户名；
新建页面+=“”；
新建页面+=“”；
新建页面+=“”；
newPage+=“如果希望新生成的窗口显示整个页面的HTML，则需要使用onclick=“document.body.parentNode.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>


函数createNewWindow（）{
var userName=document.getElementById（'user_name'）。值
var videoSrc=document.getElementById（'video_src'）。值
var newPage=“”
newPage+=用户名；
新建页面+=“”；
新建页面+=“”；
新建页面+=“”；
newPage+=“document.getElementById（\'main\”）.innerHTML
不，除非您允许他们将html发送到您的服务器，否则他们自己无法将源代码保存在您的服务器上。如果可以看到您如何在JavaScript代码中生成所有html，那么是否也可以选择将html附加到页面中的pre
元素中，用户可以轻松从？c复制如果我错了，请纠正我。你只想显示一个表单，提交表单后它将生成HTML页面？？？@Liam我认为这实际上不是重复的。代码片段中的window.open（）
/document.write（）方法将起作用，令人惊讶的是，甚至没有一个答案建议使用该方法。（据我所知，OP代码中的问题只是@mplungjan指出的引用问题。）这太完美了……这是我昨晚看完后要走的路线，所以我感谢有效的解决方案。干杯！
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);' />"