Question

我创建了一个简单的页面，它使用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";
}

Answer 1

您不能直接在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";
    });
});

Chrome扩展程序 - 从弹出窗口执行简单的javascript

1 个答案: