当我添加 firebase ZEAE18BC41E1434DD98FA2DD989531DAZ8 时 javascript function 不工作

Question

I want add to firebase SDK in external JavaScript file and link my JavaScript file with index.html and I want to create all functions in an external JavaScript file but after putting code of SDK my function is not working and no output appears in the console.

//main.js的代码

import { initializeApp } from "firebase/app";
    
    // Your web app's Firebase configuration
    const firebaseConfig = {
      apiKey: "AIzaSyBbXn11EFZ-B4UutkGbbvFFhddnqWFpDWc",
      authDomain: "test-app-c0aed.firebaseapp.com",
      projectId: "test-app-c0aed",
      storageBucket: "test-app-c0aed.appspot.com",
      messagingSenderId: "797893271922",
      appId: "1:797893271922:web:5fc8bade62add0ca573deb"
    };
    
    // Initialize Firebase
    const app = initializeApp(firebaseConfig);
    
    const provider = new firebase.auth.GoogleAuthProvider();
    
    // event and function for login button
    document.getElementById('login').addEventListener("click",login);
    function login()
    {
        console.log('login');
        firebase.auth().signInWithPopup(provider).then( res => {
            console.log(res);
        })
    
    }
    // event and function for log out button
    document.getElementById('logout').addEventListener("click",logout);
    function logout(){
        console.log('logout');
    }

//索引代码.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>

<body>
    <div class="container">
        <div id="dashboard">
            <div id="userDetails">
                <p>Welcome to dashboard</p>
            </div>
            <div id="logout">
                <button id="logoutButton">Logout</button>
            </div>
        </div>
        <div id="loginForm">
            <button id="login">SignInWithGoogle</button>
        </div>
    </div>
    <script src="main.js"></script>
</body>

</html>

Answer 1

尝试将 type="module" 添加到脚本<script type="module" src="main.js"></script>并使用本地服务器来托管 index.html 因为当您打开 index.html 时模块将无法工作在浏览器file://

当我添加 firebase ZEAE18BC41E1434DD98FA2DD989531DAZ8 时 javascript function 不工作

问题描述

1 个解决方案

解决方案1
0 2022-08-16 21:25:25

当我添加 firebase ZEAE18BC41E1434DD98FA2DD989531DAZ8 时 javascript function 不工作

问题描述

1 个解决方案

解决方案1 0 2022-08-16 21:25:25

解决方案1
0 2022-08-16 21:25:25