javascript - 将页面连同内容一起保存为 html

Question

我有一个简单的 JS 函数，让用户输入他们的名字和姓氏，然后 onclick 显示他们的全名。

当用户将页面保存为html并重新打开它时，是否可以将用户提交的内容包含在文本字段中？

function getFullName() {

    var firstName, lastName, fullName;

    firstName = document.Application.txtFirstName.value; 
    lastName  = document.Application.txtLastName.value;
    fullName  = firstName + " " + lastName;
    document.Application.txtFullName.value = fullName;
}

Answer 1

最简单的解决方法是，如果用户在 input 元素中输入文本，然后在提交之前将页面打印为 PDF(菜单栏 > 文件 > 打印 > 另存为 PDF 等)，它们的内容包含在生成的 PDF 文件中。那会有帮助吗？

否则，您可以编写一个在单击按钮时执行的函数，并首先使用该函数 preventDefault (防止它重新加载页面并清除表单字段，如果其 type="submit")，然后让它将他们的名字写入变量并提示他们保存页面:

http://jsbin.com/yelun/1/edit

<form id="nameForm">
  First Name<br />
  <input type="text" name="first" /><br />
  <br />
  Last Name<br />
  <input type="text" name="last" /><br />
  <br />
  <button type="submit" onclick="processForm(event)">Submit</button>
</form>

var processForm = function(event) {
  event.preventDefault();
  var form = document.getElementById('nameForm');
  var firstName = form.first.value;
  var lastName = form.last.value;
  var fullName  = firstName + ' ' + lastName;
  alert('Hello, ' + fullName + '. Please now save this page as HTML via your browser\'s `File` menu.');
};

此外，您可以尝试将按钮包装在 a 或 area 元素中，将该元素的 href 设置为您网页的URL，并添加 download attribute到该元素。这不是我可以在通用在线沙箱中轻松演示的东西，而是 download 属性:

…indicates that the author intends the hyperlink to be used for downloading a resource.

本质上，它使浏览器下载链接位置，而不是将浏览器导航到链接位置。

如果您无法根据自己的喜好将按钮或其文本包装在a或区域中，您可以创建、样式、编写一个 div 使其看起来像一个 button，并将该 div 包装在 a 或 区域中。