将页面连同内容一起保存为HTML

save page as html along with contents

本文关键字：一起 保存 HTML      更新时间：2023-09-26

我有一个简单的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;
}

最简单的解决方法是，如果用户在input元素中输入文本，然后在提交之前将页面打印为PDF (Menubar > File > Print > Save as PDF或类似的)，则其内容包含在生成的PDF文件中。这有帮助吗?

否则，您可以编写一个函数在button的click上执行，并让该函数首先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中。

相关文章：