我创建了一个简单的页面，它使用 JavaScript 文件和 onClick 方法来显示不同的 div 标签。我有一个更复杂的程序，它使用 ajax 登录用户，它在浏览器中运行良好，但在弹出窗口中运行不佳
我读得越多，并且阅读了开发人员网站上的所有内容，我发现我就越感到困惑。 Chrome 扩展不允许内联 JavaScript，这很好，但我仍然不确定如何实际编写 JavaScript。我知道这与事件处理程序有关，但即使这也只是我的猜测。
任何人都可以使用这个程序并向我展示我需要更改什么才能让它在弹出窗口中使用“manifest_version”:2并且没有黑客攻击。 Google 如何期望人们使用 JavaScript？确实需要一个 hello world 程序来展示如何做到这一点。
HTML:
<!DOCTYPE HTML>
<html>
<head>
<title> Pop Up </title>
<script src = "test.js"></script>
<style type = "text/css">
#signout
{
display:none;
}
</style>
</head>
<body>
<!-- ///////////////////////////////////////////// -->
<!-- //////////////// Log In Screen ////////////// -->
<!-- ///////////////////////////////////////////// -->
<div id = "login">
<form method="post" action="">
Username:
<input type="text" name = "user" id = "user"><br>
Password:
<input type="text" name = "pass" id = "pass"><br>
<input type="button" value="submit" onClick="logInPHP()" />
</form>
</div>
<!-- ///////////////////////////////////////////// -->
<!-- //////////////// Sign Out Screen //////////// -->
<!-- ///////////////////////////////////////////// -->
<div id = "signout">
Your are Currently signed in.<br />
<a href = "#" onclick = "signOutPHP()">Sign Out</a>
</div>
</body>
</html>
Javascript:
function logInPHP(){
document.getElementById("login").style.display = "none";
document.getElementById("signout").style.display = "inline";
}
function signOutPHP(){
document.getElementById("login").style.display = "inline";
document.getElementById("signout").style.display = "none";
}
最佳答案
您不能直接在 HTML 文件中使用 onclick 属性。删除它们并将您的 JavaScript 代码包装到文档 'DOMContentLoaded' 事件监听器中。
document.addEventListener('DOMContentLoaded', function () {
document.getElementById("login").addEventListener('click', function(){
document.getElementById("login").style.display = "none";
document.getElementById("signout").style.display = "inline";
});
document.getElementById("signout").addEventListener('click', function(){
document.getElementById("login").style.display = "inline";
document.getElementById("signout").style.display = "none";
});
});
关于javascript - Chrome 扩展 - 从弹出窗口执行简单的 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14883527/