Question

我正在尝试构建一个Google Chrome扩展程序，其中包含弹出窗口中的一个按钮。

单击此按钮后，我想要一个特定的HMTL div（在我的情况下是一个表格），初始CSS显示标记为＆＃34; none＆＃34;被设置为＆＃34;阻止＆＃34;以便在弹出窗口中显示div。在我的popup.js文件中，我使用了一个事件监听器来处理这个按钮点击。

我面临的问题是，一旦我点击按钮，显示的div就会出现，并在下一刻被隐藏。它不会保持可见，看起来像初始＆＃34;显示：无＆＃34;设置再次接管。请在下面找到我的代码并帮我解决此问题。

Manifest.json：

private Date ToDate(String aDate) {
    if(aDate==null) return null;
    ParsePosition pos = new ParsePosition(0);
    SimpleDateFormat simpledateformat = new SimpleDateFormat("yyyy-MM-dd");
    Date stringDate = simpledateformat.parse(aDate, pos);
    return stringDate;
}

Popup.html：

{
  "manifest_version": 2,

  "name": "Google Chrome Extension",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "icons": {
    "64": "icon.png"
  }
}

Popup.js：

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <style type="text/css">

      body {        
        margin: 10px;
        white-space: nowrap;
      }

      #container {
        align-items: center;
        display: flex;
        justify-content: space-between;
      }
      #displayTable {
        display: none;
        border-collapse: collapse;
        width: 100%;
      }      
      #myTable td, #myTable th {
        border: 1px solid #ddd;
        padding: 8px;
      }
      #myTable th {
        background-color: #ddd;
      }
    </style>

     <script src="popup.js"></script>

  </head>

  <body>
    <h1>Google Chrome Extension</h1>
    <div id="container">
      <form>
        Provide input:<br>
        <input type="text" id="inputText" maxlength="7"><br>
        <button id="shoot">Shoot</button>
      </form>
    </div>
    <div id="displayTable">
      <table id="myTable">
        <tr>
          <td>Column1</td>
          <td>Column2</td>
          <td>Column3</td>
        </tr>
        <tr>
          <td id = "col1"></td>
          <td id = "col2"></td>
          <td id = "col3"></td>
        </tr>
      </table>
    </div>
  </body>
</html>

Answer 1

因为按钮位于表单中，所以它正在提交表单并重新加载popup.html。最简单的方法就是将表单更改为div。

如果您需要保留表单，则需要阻止表单提交，因此请将代码修改为：

document.addEventListener('DOMContentLoaded', function () {
    var btn = document.getElementById('shoot');
    btn.addEventListener('click', getTable);
    var formElement = document.querySelector('form');
    formElement.addEventListener('submit', function(event) {
        event.preventDefault();
        return false;
    });
});

即使在Chrome扩展程序中单击按钮后更新CSS显示标记以阻止，HTML div也不会保持可见

1 个答案: