contentEditable 仅在关闭并重新打开浏览器后工作

Question

我在这里关注 contentEditable 演示：https : //codepen.io/Shokeen/pen/eJRRVw。我的代码与 CSS 和 JS 完全相同，但我对下面的 HTML 做了一些细微的更改：

<div id="wrapper">
<section>
<h1 class="headline">contentEditable Demonstration</h1>

<button id="editBtn" type="button">Edit Document</button>
<div id="editDocument">    
  <h1 id="title">A Nice Heading.</h1>
  <p>Last Edited by <span id="author">Monty Shokeen</span></p>      
  <div id="content">{{temp_df | safe}}</div>
</div>

基本上，我用 div id="content" 行替换了段落 id="content" 行，其中 temp_df 是使用 Flask 框架从 Python 导入的 Pandas 数据 frame.to_html。理想情况下，将显示一个可编辑的表格，就像上面代码笔中的所有其他可编辑项目一样。但是，当我运行它时，表格根本不显示。经过一些测试，我发现有趣的是，如果我运行该程序，在浏览器中打开它（不显示表格），然后关闭浏览器，然后重新打开浏览器，表格显示出来。我已经在多个浏览器中尝试过这个，所以它可能不是任何浏览器独有的问题。在整个过程中，我还在我的终端中包含了这些消息。

1 - 当我运行 Flask 程序时

2 - 当我点击我网站上的按钮来显示表格时（表格不显示）

3 - 当我关闭浏览器并在新浏览器中重新打开程序时（现在显示表格）

Answer 1

按照描述修改的 CodePen 演示似乎可以工作。这是我所做的：

1. 用您问题中的 HTML 替换 HTML。
2. 替换{{temp_df | safe}}为简单的 HTML 表格。

因此，似乎没有足够的信息来完全回答您的问题。您的问题中未描述的内容可能会导致意外行为。

一些想法：

1. 您网站上的按钮的行为显然与 CodePen 演示中的按钮不同。你的按钮有什么作用？
2. 什么 HTML 会temp_df导致？
3. 浏览器开发控制台中是否有任何 JavaScript 错误/警告？
4. CodePen 演示的任何部分是否被不当复制？（复制粘贴错误。）

这是我最好的猜测：检查与localStorage. 这是我们所展示的代码的一部分，在不同运行之间运行的可能性最高。

原始 CodePen 演示用作localStorage临时“数据库”以在浏览器中存储信息。但是，我认为您的网站想要从不是localStorage.

只需删除与 相关的所有代码localStorage即可解决您的问题。