javascript - 如何打开动态生成带有 JavaScript 的 HMTL
问题描述
我正在创建一个 JS 调查,我想打开一个<input type="file"/>
但没有打开。一些背景资料:
- 我只使用 JS
- 我正在使用 MVC 架构
- 我在 index.html 文件上动态渲染 HTML
我发布的代码比 nessary 最多,因为我正在尝试练习软件架构,并且我相信我开发代码的方式存在根本性错误,这就是对话框无法正常工作的原因。
如果您能指出我组织代码的方式中的一些缺陷,那也会很有帮助。
HTML 文件:index.html
所有动态 HTML 都将在默认类上呈现,<div id='app'>
仅用于设置主题样式
<!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">
<title>SIB Mobile</title>
<link rel="stylesheet" href="src/css/app.css">
<script type="module" defer src="src/js/app.js"></script>
</head>
<body>
<div id="app" class="default"></div>
</body>
<script src="src/pwa/idb.js"></script>
<script src="src/pwa/fetch.js"></script>
<script src="src/pwa/promise.js"></script>
</html>
app.js (主JS 文件)
这是主要的 JS 文件,它在基于 url 初始化控制器的方法 (kkk)上有一个switch case路由器。_handleRoutes(routes)
import dbConnection from '../pwa/dbConnection.js';
import homeController from './controllers/homeController.js'
import settingsController from './controllers/settingsController.js'
import downloadController from './controllers/downloadController.js';
import surveyController from './controllers/surveyController.js';
class App {
init() {
this._initWindow();
this._initServiceWorker();
this._initIndexedDB();
}
_initWindow() {
['hashchange', 'load'].forEach(ev => window.addEventListener(ev, () => {
const route = window.location.hash.slice(1);
this._handleRoutes(route);
}));
window.addEventListener('click', e => {
e.preventDefault();
if (e.target.tagName.toLowerCase() === 'a') {
const url = e.target.href.split('/');
const route = url[url.length - 1];
window.history.pushState(null, '', `#${route}`);
this._handleRoutes(route);
}
});
}
_initServiceWorker() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js')
.then(() => {
console.log('[App] Service worker registered successfully!');
})
.catch(err => console.log('[App] Faild to register sw', err));
}
}
_initIndexedDB() {
if ('indexedDB' in window) {
dbConnection.init();
}
}
_handleRoutes(route) {
switch (route) {
case "survey": surveyController.init(); break;
case "home": homeController.init(); break;
case "settings": settingsController.init(); break;
case "download": downloadController.init(); break;
default: homeController.init();
}
}
}
new App().init();
homeView.js _
这是 MCV 上的视图,负责创建要在 HTML 文件上呈现的必要标记。
我创建了一个处理程序来捕获输入文件元素上的单击事件。
它扩展了一个具有renderPage
方法和_parentElement
属性的 View 类
import View from './view.js';
class HomeView extends View {
_headerTitle = 'Header Title v1.0.0';
_generateMainMarkup() {
return `
<main class="main">
<div class="container">
<input type="file" class="input"/>
</div>
</main>
`;
}
addHandlerFileUpload(handler) {
this._parentElement.addEventListener('click', e => {
const input = e.target.closest('input');
if (!input) return;
//Open file dialog
})
}
}
/*
<div class="btn-group btn-group--column">
<a href="survey" class="btn btn--primary">novo inquerito</a>
<a href="view" class="btn btn--primary">Visualizar inqueritos</a>
<a href="stats" class="btn btn--primary">Visualizar estatisticas</a>
<a href="download" class="btn btn--primary">Carregar Dados</a>
<a href="settings" class="btn btn--primary">Definicoes</a>
</div> */
export default new HomeView();
HomeController.js _
这是Controller,它有一个init
方法和一个controlFileUpload
捕捉输入文件点击事件的方法。
import view from "../views/homeView.js";
import dbConnection from '../../pwa/dbConnection.js';
class HomeController {
_data;
_controlFileUpload(input) {
// Get uploaded file here
}
init() {
view.renderPage();
view.addHandlerFileUpload(this._controlFileUpload.bind(this));
}
}
export default new HomeController();
解决方案
我认为这是不可能的。
如果您尝试此代码,您将收到以下警告:
文件选择器对话框只能在用户激活时显示。
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const inputFile = document.querySelector('.input')
inputFile.click(); // Warning: File chooser dialog can only be shown with a user activation.
});
</script>
推荐阅读
- printing - Bartender Webservice 提供 BTXML 脚本和 ACCESS_VIOLATION 错误
- r - 在堆积的 bar_plot 上画一条线
- javascript - Google Maps API 完全没有使用 HTML5 显示
- amazon-web-services - 基于当前使用情况的 EC2 到 Lambda 转发
- r - 如何让一列rhandsontable四舍五入并只显示整数?
- ftp - 使用 file.sh 将 csv 文件从 sftp 服务器传输到 ftp 服务器
- python - 无法从网站获取 API 密钥的值
- abap - 如何将内部表分配给结构,然后分配给 ABAP 中的字段
- r - 为 nlme 中的混合效应模型计算 lme.dscore Cohen's D 周围的置信区间
- c# - 如何在打开 Domino 数据库之前检查它是否存在?