如何使用firebase和文档或窗口的导入从html文件中获取信息

n3ipq98p 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(113)

当我在包json文件中使用导入启用type：module时，我可以毫无问题地使用导入，例如从“firebase/database”导入{ ref，set，child，getDatabase，onValue，get，push，update};并访问数据，但我想与输入或文本区域的信息交互，但我不能访问那些它抛出的文档是没有定义的。！
我已经读了很多页，但由于我是新来的，我不能得到它。我不能将答案应用到我的项目中。

import { ref, set,child ,getDatabase,onValue,get,push, update} from "firebase/database";
import { getAuth, onAuthStateChanged } from "firebase/auth";
//to get info from firebase

var headbox = document.getElementById('a'); // from Html to manage info send and show it here
var bodybox = document.getElementById('b'); // error when I want to read this

虽然如果我把这些导入删除并删除包json文件中的type：module，我可以使用document.getById，但我不能使用导入，请帮帮我！我是新来的

firebase

来源：https://stackoverflow.com/questions/75089679/how-to-use-imports-for-firebase-and-document-or-window-to-get-info-from-the-html

1条答案

按热度按时间

gjmwrych1#

Firebase Web SDK理想情况下需要模块捆绑器（Webpack/Rollup）或JavaScript框架工具，如Vue、React、Angular等，因为Web SDK（或至少版本9）经过优化，可以与模块捆绑器一起使用，以消除未使用的代码（树抖动）并减少SDK大小。
听起来你最好使用CDN（内容交付网络）。

脚本语言

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js';
import { ref, set, child, getDatabase, onValue, get, push, update } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-database.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.15.0/firebase-auth.js';
        
const firebaseConfig = {
    apiKey: 'xxx',
    authDomain: 'xxx',
    projectId: 'xxx',
    storageBucket: 'xxx',
    messagingSenderId: 'xxx',
    appId: 'xxx',
    measurementId: 'xxx'
};
const firebaseApp = initializeApp(firebaseConfig);
const auth = getAuth();

window.addEventListener('DOMContentLoaded', (event) => {
    const headbox = document.getElementById('a');
    const bodybox = document.getElementById('b');
    
    onAuthStateChanged(auth, (user) => {
        if (user) {
            // user.uid
        }
    });
});

超文本标记语言

<html>
<head>
  ...
</head>
<body>
  <div id="a">Head Box</div>
  <div id="b">Body Box</div>
  <script type="module" src="your-javascript-file.js"></script>
</body>
</html>

赞(0）回复(0）举报 2023-01-14

我来回答

如何使用firebase和文档或窗口的导入从html文件中获取信息

1条答案

相关问题

热门标签

最新问答