jjzjj

javascript - appendChild()复选框: remember selections with browser back button

coder 2025-03-27 原文

在此先感谢任何尝试帮助我的人。

我有一个表单，我根据一系列条件通过appendChild()将复选框添加到-作为供用户选择的选项。

当用户选中这些框中的任何一个，然后单击“继续”按钮以将选择发布到另一页时，然后单击后退按钮-用户选中的复选框，现在被忘了，浏览器(不再选中)。

如果我使用php编写复选框，或者仅使用静态复选框-当用户选中其中任何一个复选框，然后单击“继续”按钮以将选择发布到另一页时，然后单击“后退”按钮-选定的复选框被记住了(仍处于选中状态)

我的问题是:

当我使用 appendChild()创建复选框时，浏览器为什么会忘记用户所做的选择

但是同一浏览器会记住，当用户使用静态复选框时所做的选择

appendChild()是什么意思，不允许同一浏览器记住选中的选择？

[div id="mydiv"] here is where the checkboxes are going[div]


[script type="text/javascript"]

var newInput = document.createElement("INPUT");
newInput.id = "mycheckboxid";
newInput.name = "mycheckboxname";
newInput.type = "checkbox";

document.getElementById('mydiv').appendChild(newInput);

[/script]

最佳答案

浏览器可能会“忘记”对DOM的动态更改，因为不同的浏览器使用不同的策略来缓存网页。当您单击“后退”按钮时，其想法是浏览器可以显示其缓存的副本，而不用从原始Web服务器重新请求页面。

它可以(至少)通过两种方式完成此任务:

  • 浏览器在离开页面时会缓存页面的DOM本身。再次访问(前进或后退)后，动态更改将继续存在。
  • 浏览器在加载时仅缓存页面的原始HTML(任何动态更改之前)。这具有丢失那些动态更改的效果-不会记录使用appendChild()或innerHTML对DOM的进一步修改。

    • 请注意，某些浏览器还保留修改过的表单数据，而其他浏览器则不保留。如果您的目标是在所有浏览器中实现99％以上的兼容性，那么您需要做一些工作。

    要解决此问题，您需要以某种方式保持状态。您有几种选择:
  • 将有关页面修改的数据保存到localstorage。使用在首次加载页面时随机生成的 key ，然后将其保留在页面中，这样状态更改将仅应用于页面的该实例。在页面加载时，如果此 key 已经存在，请读出更改数据并重新应用更改。较旧的浏览器不支持本地存储。
  • 使用cookie优先处理。我不建议这样做，因为它具有增加Cookie数量的缺点。在每个请求(包括ajax请求)中都发送和接收Cookies，因此您将膨胀每个请求上传输的数据。旧的浏览器可以很好地解决这个问题。
  • 放弃动态更改模型，并通过发布到服务器来进行更改。然后，当从浏览器的缓存中提取页面时，页面将包含修改后的html。您可能不希望这样做，但是我想为完整起见指出这一点。
  • 通过幕后的Ajax将有关页面修改的数据保存到服务器。这与像上一项一样实际上往返于每个更改是不同的。您仍然可以动态进行更改，但是将“建议”文件发布到服务器。然后，在每次页面加载时，从服务器请求任何调整数据。这与第一个建议类似，但是您正在使用远程服务器作为存储。这会使每个页面加载时产生额外的净流量，但流量可能很小，因为它与该页面差不多。这还会使通常不会发送的额外净流量发生(建议数据)。但是，聪明的系统体系结构可以使用此信息在计算机上持久保存用户未提交的表单数据，并且这种方式可能非常方便(假设您的用户在200个问题中进行了199次调查，然后他的权力就消失了)出去-通过这个方案，他有机会无痛地继续到他离开的地方!)。
  • 使“继续”按钮打开一个新的浏览器窗口，以保持原始页面不变。
  • 使“继续”按钮在不离开页面的情况下发布数据，并保持数据不变。您可以做一个简单的灯箱式叠加层。
  • 如果灯箱样式的重叠式广告无法正常运行，但是您确实必须显示新页面并且不希望它出现在新窗口中，请重新设计您的网站，使其与gmail类似:其中页面仅通过javascript进行更改，并且仅通过在URL的末尾使用#hash标记来控制行为。这可能很困难，但是有一些可以完成此任务的库。 (对于某些浏览器，必须诉诸轮询以查看主题标签是否已更改。)基本思想是，当您单击指向同一页面但上面带有标签(例如<a href="#about">About</a>)的链接时，浏览器将启动页面加载事件，并将新上下文插入历史记录前进/后退堆栈，但实际上不会加载新页面。然后，您为哈希代码(映射到某种命令)解析更新的URL并执行它。通过为每个链接精心选择适当的哈希码，您可以通过Javascript动态隐藏和显示适当的页面，并且该页面看起来就像是人在浏览真实的网站一样。之所以这么做，是因为页面永远不会加载，您不仅可以维护Java状态，还可以维护DOM状态-您只需隐藏用户修改过的页面，然后隐藏事件的发生意味着您再次访问该页面，将其显示出来，而这正是用户离开页面的方式。优点:如果您的站点需要Javascript才能运行，那么使用更多Javascript来实现它不会带来任何风险。缺点:完全更改您的网站架构是一项繁重的工作，在较旧的浏览器上可能很难工作。要开始使用，请参阅Unique URLs。您可以尝试jQuery hashchange plugin。如果您的网站分布广泛，则需要确保地址为search engine optimization and web usability issues。您可能想看看this SO page on detecting back button hash changes。
  • 使用与上一点相同的策略，但不要使用哈希标签，而要使用新的HTML5 history.pushState()和history.replaceState()方法-请参阅Mozilla browser history。

    • 如果您的目标不是跨99％的浏览器使用99％的兼容性，那么请告诉我们您的目标，因为可能会有捷径。

    更新:添加了一个选项＃8

    关于javascript - appendChild()复选框: remember selections with browser back button，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13533974/

    appendChildjavascriptstrong的codeback-button

    有关javascript - appendChild()复选框: remember selections with browser back button的更多相关文章

    1. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    2. ruby-on-rails - rails 上的 ruby : radio buttons for collection select - 2

      我有一个集合选择:此方法的单选按钮是什么？谢谢 最佳答案 Rails3中没有这样的助手。在Rails4中，它是collection_radio_buttons. 关于ruby-on-rails-rails上的ruby:radiobuttonsforcollectionselect，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/18525986/

    3. ruby-on-rails - 在 Label 标签中嵌套 Ruby on Rails HAML 复选框 - 2

      我有以下不起作用的代码:=form_for(resource,:as=>resource_name,:url=>session_path(resource_name),:html=>{:class=>"well"})do|f|=f.label:email=f.email_field:email=f.label:password=f.password_field:password-ifdevise_mapping.rememberable?%p=f.label:remember_me,:class=>"checkbox"=f.check_box:remember_me,:class=>"

    4. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

      我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

    5. ruby-on-rails - 嵌套形式的 HABTM 复选框 - 2

      我正在尝试以嵌套形式实现HABTM复选框。目前，我有3个模型。主题、类(class)和小组。协会如下:每个科目都有很多课。每节课都属于许多小组。现在，我正在尝试在单个创建和编辑表单上实现它们。这样一节课嵌套在主题中，每节课都有一个组复选框列表来实现HABTM关系。我在实现HABTM关系时遇到了麻烦，因为每个科目都有很多类(class)，而且我不确定如何区分不同的类(class)。为了进一步详细说明，我能够使嵌套表单正常工作，但我无法让HABTM复选框保存到正确的类(class)中。以下代码示例是我的HABTM复选框实现。目前，我已经使用“subject[lessons_attribut

    6. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

      我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

    7. ruby-on-rails - 我将 Rails3 与 tinymce 一起使用。如何呈现用户关闭浏览器javascript然后输入xss？ - 2

      我有一个用Rails3编写的站点。我的帖子模型有一个名为“内容”的文本列。在帖子面板中，html表单使用tinymce将“content”列设置为textarea字段。在首页，因为使用了tinymce，post.html.erb的代码需要用这样的原始方法来实现。.好的，现在如果我关闭浏览器javascript，这个文本区域可以在没有tinymce的情况下输入，也许用户会输入任何xss，比如alert('xss');.我的前台会显示那个警告框。我尝试sanitize(@post.content)在posts_controller中，但sanitize方法将相互过滤tinymce样式。例如

    8. ruby - 使用 Selenium WebDriver 启用/禁用 javascript - 2

      出于某种原因，我必须为Firefox禁用javascript(手动，我们按照提到的步骤执行http://support.mozilla.org/en-US/kb/javascript-settings-for-interactive-web-pages#w_enabling-and-disabling-javascript)。使用Ruby的SeleniumWebDriver如何实现这一点？ 最佳答案 是的，这是可能的。而是另一种方式。您首先需要查看链接Selenium::WebDriver::Firefox::Profile#[]=

    9. ruby - Watir-Webdriver 是否支持点击目标为 javascript 的链接？ - 2

      我是Ruby和Watir-Webdriver的新手。我有一套用VBScript编写的站点自动化程序，我想将其转换为Ruby/Watir，因为我现在必须支持Firefox。我发现我真的很喜欢Ruby，而且我正在研究Watir，但我已经花了一周时间试图让Webdriver显示我的登录屏幕。该站点以带有“我同意”区域的“警告屏幕”开头。用户点击我同意并显示登录屏幕。我需要单击该区域以显示登录屏幕(这是同一页面，实际上是一个表单，只是隐藏了)。我整天都在用VBScript这样做:objExplorer.Document.GetElementsByTagName("area")(0).click

    10. ruby-on-rails - Ruby on Rails 中的 Button_to 错误路由 - 2

      我正在尝试使用button_torails助手。我写了下面的代码:'mark-button'%>得到如下错误信息Noroutematches"/items/1/edit"但是当我刷新页面时，它会执行适当的操作。我得到的页面的URL是localhost:3000/items/1/edit这是正确的网址。如果我切换button_to命令link_to页面加载没有错误。意思是这段代码:'mark-button'%>加载正常。也许有一些特点button_to我不知道，但我迷路了。 最佳答案 我认为您可能误用了button_to。我一直认为，

    随机推荐