将页面与内容一起保存为 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（

Menubar > File > Print > Save as PDF

等），则其内容将包含在生成的 PDF 文件中。那会有帮助吗？

否则，您可以编写一个在

click

的

button

上执行的函数，并首先使用该函数

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

 属性

。这不是我可以在通用在线沙箱中轻松演示的东西，而是 download 属性：

…表明作者打算使用超链接来下载资源。

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

如果您无法根据自己的喜好将

button

或其文本包装在

a

或

area

中，您可以创建、设计样式并编写

div

的脚本，使其看起来像

button

，然后将其包装起来

div

中的

a

或

area

。