我正在尝试构建一个由弹出窗口中的按钮组成的 Google Chrome 扩展程序。
单击此按钮后，我希望将初始 CSS 显示标记为“无”的某个 HMTL div(在我的例子中为表格)设置为“ block ”，以便该 div 在弹出窗口中可见。在我的 popup.js 文件中，我使用了一个事件监听器来处理这个按钮点击。
面临的问题是，一旦我单击按钮，可见的 div 就会出现，并在下一刻被隐藏。它不会保持可见，看起来像初始的“显示:无”设置再次接管。请在下面找到我的代码并帮助我解决此问题。
list .json:
{
"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.html:
<!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>
弹出.js:
document.addEventListener('DOMContentLoaded', function () {
var btn = document.getElementById('shoot');
btn.addEventListener('click', getTable);
});
function getTable() {
var col1 = document.getElementById('inputText').value;
var col2 = 0;
var col3 = 0;
document.getElementById('col1').innerHTML = col1;
document.getElementById('col2').innerHTML = col2;
document.getElementById('col3').innerHTML = col3;
document.getElementById('displayTable').style.display="block";
}
最佳答案
因为按钮在一个表单中，它正在提交表单并重新加载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;
});
});
关于javascript - 在 chrome 扩展程序中单击按钮后，即使将 CSS 显示标记更新为阻止，HTML div 也不会保持可见，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47492115/