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>

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

1 - 运行Flask程序时

2 - 当我在我的网站上点击一个按钮以显示表格（表格不显示）

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

- Jonathan Chen

---

代码被编程为在浏览器重新打开后读取。没有发生奇怪的事情。 - Someone_who_likes_SE

我该如何更改它，使其在浏览器第一次打开时读取，而不是重新打开后读取？（我假设这是在JS中）。谢谢。 - Jonathan Chen

你能提供更多关于代码的细节吗？ - Epic Chen

你想要更详细了解哪些部分？除了 Python 之外，所有的代码（HTML、CSS、JS）都已经在上面的 CodePen 中了。除非你想看 Python 的代码？ - Jonathan Chen

Answer 1

这个CodePen演示页面已经按照描述进行了修改，它似乎可以正常工作。 我的操作步骤如下：

1. 使用您提供的HTML替换原本的HTML。
2. 用简单的HTML表格替换{{temp_df | safe}}。

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

一些想法：

1. 您网站上的按钮显然与CodePen演示页面上的按钮行为不同。 您的按钮是做什么的？
2. temp_df返回的HTML是什么？
3. 浏览器开发人员控制台中是否有任何JavaScript错误/警告？
4. 是否有任何部分的CodePen演示页面被错误地复制了？（复制粘贴错误。）

这是我最好的猜测：检查与localStorage相关的代码。 那是我们看到的代码部分，它在运行时可能会产生不同的结果。

原始的CodePen演示页面使用localStorage作为“数据库”来在浏览器中存储信息。 然而，我假设您的网站希望从一个不是localStorage的真正的数据库中读取和写入数据。

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

- Leftium

---

谢谢，现在它可以工作了。回答你的问题：我的按钮只是一个表单提交按钮，temp_df会生成一个HTML表格（从Pandas数据帧呈现，更多信息请参见https://pandas.pydata.org/docs/reference/api/pandas.DataFrame.to_html.html），没有错误，也没有复制粘贴错误。 - Jonathan Chen