JavaScript（不要与Java混淆）是一种高级，动态，多范式，面向对象，基于原型的弱类型语言，用于客户端和服务器端脚本。它的主要用途是渲染和操作网页。使用此标记可以了解有关ECMAScript及其各种方言/实现的问题（不包括ActionScript和Google-Apps-Script）。
AngularJs - 已定义模块，但仍然出现“不可用”错误
我正在尝试使用角度指令构建密码匹配机制，但似乎我错过了一些东西。我定义了 ng-app 和 ng-controller 但我仍然收到一条错误消息，指出 mod...
我有这个代码（html）： 我有这个代码（html）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Login Page</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; } .container { width: 300px; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } h2 { text-align: center; } input[type="text"], input[type="password"] { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box; } input[type="submit"] { width: 100%; padding: 10px; border: none; border-radius: 4px; background-color: #007bff; color: #fff; cursor: pointer; } input[type="submit"]:hover { background-color: #0056b3; } </style> </head> <body> <div class="container"> <h2>Login</h2> <form action="login.php" method="post"> <input type="text" name="username" placeholder="Username" required> <input type="password" name="password" placeholder="Password" required> <input type="submit" value="Login" class="loginBtn" name ="login_Btn"> </form> </div> </body> </html> 然后我有这个（.php）： <!DOCTYPE html> <html lang="en"> <body> <?php $servername = "localhost"; $username = "root"; $password = ""; $database = "my_db"; /* You should enable error reporting for mysqli before attempting to make a connection */ mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); $conn = mysqli_connect($servername, $username, $password, $database); /* Set the desired charset after establishing a connection */ mysqli_set_charset($conn, 'utf8mb4'); printf("Success... %s\n <br>", mysqli_get_host_info($conn)); if(isset($_POST['login_Btn'])){ $username=$_POST['username']; $password=$_POST['password']; $sql= "SELECT * FROM my_db.logindetails WHERE username = '$username'"; $result = mysqli_query($conn,$sql); while($row = mysqli_fetch_assoc($result)){ $resultPassword = $row['password']; if($password == $resultPassword) { header('Location:index.html'); } else { echo "<script>alert('Login unsuccesful');</script>"; } } } ?> <br> </body> </html> 问题是，当用户名和密码都错误时，我无法收到显示“登录失败”的 JavaScript 警报弹出窗口。仅当用户名正确且密码错误时才有效。此外，我想制作一个登录页面，发送一封带有代码的电子邮件，以便用户每次登录时都必须证明他可以访问他的电子邮件帐户。 请帮助我完成这个项目。 <?php $servername = "localhost"; $username = "root"; $password = ""; $database = "my_db"; /* You should enable error reporting for mysqli before attempting to make a connection */ mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); $conn = mysqli_connect($servername, $username, $password, $database); /* Set the desired charset after establishing a connection */ mysqli_set_charset($conn, 'utf8mb4'); printf("Success... %s\n <br>", mysqli_get_host_info($conn)); if(isset($_POST['login_Btn'])){ $username=$_POST['username']; $password=$_POST['password']; $sql= "SELECT * FROM my_db.logindetails WHERE username = '$username'"; $result = mysqli_query($conn,$sql); if(mysqli_num_rows($result) > 0) { while($row = mysqli_fetch_assoc($result)){ $resultPassword = $row['password']; if($password == $resultPassword) { header('Location:index.html'); } else { echo "<script>alert('Login unsuccessful');</script>"; } } } else { echo "<script>alert('Login unsuccessful');</script>"; } } ?>
AngularJS 在自定义服务中使用 Angular 模块
我有一个用于生成令牌的自定义服务，在该服务中我需要使用MD5函数，MD5函数位于模块angular-md5中 这是我的服务代码，generate_token函数使用...
我是一个十足的菜鸟，所以请原谅这个基本的问题。 我的模型有一个帖子/评论结构，如下所示： [ { "title": "很棒的帖子", “描述”：...
React 确认警报库显示“警告：React 18 不再支持 ReactDOM.render”。 [重复]
我正在尝试使用react-confirm-alert库进行确认对话框。但是，当打开反应版本升级的确认弹出窗口时，它给了我一个警告。 “警告：反应...
Angular JS - module.controller 参数[重复]
我是 Angular JS 的新手，他们在教程中指出创建控制器的方法是： angular.module('应用程序', []) .controller('TodoController', ['$scope', function ($scope) { $scope.todos...
我目前在尝试加载我的 Angular 应用程序时遇到此错误： 未捕获错误：[$injector:unpr] 未知提供者：$$HashMapProvider <- $$HashMap <- $$animateQueue <- $animate <- $
找不到模块：错误：无法从 React 18 w/TypeScript 解析“./App”
尝试升级到 React 18 时出现此错误。 我想知道这是否与我的文件类型有关？我正在使用打字稿，所以我假设应用程序和索引都必须以 .tsx 结尾？ Teh 应用程序和索引...
我怎样才能让我的正则表达式只接受右括号（如果它已经匹配左括号）
我正在尝试制作一个仅接受列出格式的电话号码的正则表达式。但是，如果我用右括号结束第一个三位数组，而在开头没有左括号，那么...
我有一个 Flask/javascript Web 应用程序，但在通过事件侦听器传递信息时遇到问题。 这是我的代码： 获取('/get_data') .then(响应=>response.json()) .然后（达...
我注意到，当单击数学方程时，我们可以选择查看 Tex 命令的源代码以及查看 mathml。有没有一种方法可以编译包含在 bet 中的 Tex Commands...
嘿，我对 Vue 非常陌生，对于这个项目，我想在禁用按钮上触发事件。有没有办法在禁用按钮上触发事件？ JsFillde 代码链接 = https://jsfiddle.net/ujjumaki/Lg...
嘿，我对 Vue 非常陌生，对于这个项目，我想在禁用按钮上触发事件。有没有办法在禁用按钮上触发事件？ JsFillde 代码链接 = https://jsfiddle.net/ujjumaki/Lg...
嘿，我对 Vue 非常陌生，对于这个项目，我想在禁用按钮上触发事件。有没有办法在禁用按钮上触发事件？ JsFillde 代码链接 = https://jsfiddle.net/ujjumaki/Lg...
我有一个包含帖子的博客。我还有一个富文本编辑器（Quill）。 是否可以检查富文本编辑器是否有空内容？ 我使用 Quill（带有 React、Express JS、MongoDB）并且我想要
堆栈： 反应 相关包：FontAwesome => 'fortawesome' 相关包：React Bootstrap => 'react-bootstrap' 我目前拥有的： 我正在构建一个个人资料页面，我希望用户...
我有一个表，我需要根据多列进行过滤，我的示例使用复选框来过滤 5 列，有些列是隐藏的，不会显示在表中，但可以...
我想实现异步加载CSS文件以获得更快的性能。不过我也想要安全性，所以我希望我的网站有 CSP。 我想实现异步加载 CSS 文件以获得更快的性能。不过我也想要安全性，所以我希望我的网站有 CSP。 <link rel="stylesheet" media="print" class="AOcssLoad" .... onload="this.onload=null;this.media='all';" /> 无需详细说明，它希望我避免像 onload 和许多其他属于元素一部分的 JS。 我希望它看起来像这样 <link rel="stylesheet" media="print" class="AOcssLoad" href="" /> 请建议一种无需上面使用的内联 JS 即可实现异步 CSS 文件的方法。 我们可以使用内联 <script> 标签或单独的 JS 文件。 我尝试了以下代码作为内联 JS。下面是 JS 的 HTML， <script nonce="" type="text/javascript" data-exclude="true"> var Script = document.getElementsByClassName("AOcssLoad"); for (var i = 0 ; i < Script.length; i++) { this.className += " Loading"; Script[i].addEventListener("load", function({ this.onload=null;this.media="all"; this.className += " OnLoad"; }); } </script> 虽然它有效，但非常不可靠。 我无法理解这个问题，但我想说它只在 50% 的情况下有效，有时只需重新加载页面就可以解决/打破问题，而对 css/html/cache 没有明显的更改。 请帮助我改进这一点，或者为此建立更好的方法。 编辑： 按照评论中的建议，我尝试了不同的方法，包括 GitHub 上其他资源的链接。 这些方法并不可靠，我想说它们的成功率不到 50%。 不过，我尝试对所有 css 文件使用 jQuery(document).ready() 和 add media="all"，但这会增加 TBT（总阻塞时间），从而影响我的网站性能 编辑2： 正如你们中的许多人在答案中反复指出的那样，使用 DOMcontentLoaded 和许多其他方法可以帮助完成我想要实现的事情。 然而，这些方法都会导致TBT（总阻塞时间）的显着增加。 如果有一种不损害 TBT 的方法，我们将不胜感激。 我建议使用 fetch().then() 并将其作为 style 元素注入： var stylesheetURLS = ["style.css", "style2.css"] stylesheetURLS.forEach(url => { fetch(url).then(response => response.text()).then(stylesheet => { var styleElement = document.createElement("style"); styleElement.textContent = stylesheet; document.head.append(styleElement); }); }); 我不确定fetch是否很慢，但如果是的话我也不会感到惊讶。 替代fetch：XMLHttpRequest var stylesheetURLS = ["style.css", "style2.css"]; stylesheetURLS.forEach(url => { var request = new XMLHttpRequest(); request.open("GET", url); request.send(); request.onload = function() { var styleElement = document.createElement("style"); styleElement.textContent = request.responseText || request.response; document.head.append(styleElement); } }); 我再次不确定这是否比fetch更快 我测试过下载一个 css 文件，下载时间超过 6 秒，我可以确认下载不会对 TBT 产生影响。正如谷歌所说，TBT 是浏览器无法用于用户输入的时间，例如当用户单击按钮或滚动时，浏览器将不会做出反应。较长的 TBT 通常是由于主线程繁忙而导致的，因为它有太多工作要做。我认为处理 CSS（将所有规则应用于 html）是您的 TBT 增加的原因，因为下载文件已经在后台完成（异步），并且不会成为较长 TBT 时间的原因。 下面是下载大文件时TBT不增加的示例： 待定： 如您所见，下载时间超过 6 秒，但还没有达到 TBT： 您可以使用基于 jQuery 的vanilla JS 函数.ready(): document.addEventListener("DOMContentLoaded", () => { document.querySelectorAll(".AOcssLoad").forEach(el => { el.media = "all" console.log(`Loaded: ${el.href}`) }) }); <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-utilities.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-reboot.min.css" /> <link rel="stylesheet" media="print" class="AOcssLoad" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-grid.min.css" /> <h1>Hello world!</h1> 但是，无论您选择哪种解决方案，请注意您都必须处理无样式内容的 Flash (FOUC)。考虑管理样式表文件的其他方法。 为什么不注射它 <script> document.write("<link rel=\"stylesheet\" media=\"print\" class=\"AOcssLoad" href=\"\" /> "); </script> 并将 <script> 标签放置在您想要放置 <link> 标签的位置的正上方。 或者只是 <link rel="stylesheet" media="print" class="AOcssLoad" href="" /> 除了 css 将异步加载并且您可以使用 csp 之外，什么都没有发生 你的脚本就是错误的，而且它根本无法工作，甚至 50% 的情况下都无法工作。 var Script = document.getElementsByClassName("AOcssLoad"); for (var i = 0 ; i < Script.length; i++) { this.className += " Loading"; // here `this` is `window` Script[i].addEventListener("load", function({ // <-- this is an Object this.onload=null;this.media="all"; // <-- this is a syntax error this.className += " OnLoad"; }); } 这是您可能想要编写的内容的重写，其中还包括检查链接是否在脚本运行之前加载，以防万一（例如缓存）。 const links = document.getElementsByClassName("AOcssLoad"); for (const link of links) { link.className += " Loading"; if(link.sheet) { // "already loaded" oncssloaded.call(link); } else { link.addEventListener("load", oncssloaded, { once: true }); } } function oncssloaded() { this.media = "all"; this.className += " OnLoad"; } <link rel="stylesheet" media="print" class="AOcssLoad" href="data:text/css,body{color:green}" /> Some green text 我知道这个帖子已经很老了，但我会把它扔掉，因为这是我目前在 WordPress 中使用的东西...... 首先，使用标准 WordPress 工具添加样式表 (wp_enqueue_style())。 然后： add_filter('style_loader_tag', 'optimize_async_style',10,4); function optimize_async_style(string $tag, string $handle, string $src, string $media): string { $nonce = wp_create_nonce(); $nonce = " nonce='{$nonce}'" : ""; $tag = "<link rel='preload' id='{$handle}-css' href='{$src}' as='style' media='{$media}'{$nonce}>\n". "<script{$nonce}>document.getElementById('{$handle}-css').addEventListener(". "'load',(e)=>{e.currentTarget.rel='stylesheet';},{once:true});". "</script><noscript>" . trim($tag) . "</noscript>\n"; return $tag; } style_loader_tag过滤器让我们可以用link更改rel='preload'标签，后跟script标签，加载后将其更改为rel='stylesheet'。这提供了样式表的异步加载。另请注意，我们为 CSP 的 link 和 script 标签分配了一个随机数。 输出应类似于： <link rel='preload' id='AOcssLoad-1' href='...' as='style' media='all' nonce='4783a68661'> <script nonce='4783a68661'>document.getElementById('AOcssLoad-1').addEventListener('load',(e)=>{e.currentTarget.rel='stylesheet';},{once:true});</script> <noscript><link rel='stylesheet' id='AOcssLoad-1' href='...' media='all' /></noscript> 然而，这是使用 id 而不是 class。
在 nextjs 应用程序中使用 Firebase 启用多个身份验证提供程序的正确方法是什么？ 2023 年 9 月 15 日后，Firebase 对所有项目启用了电子邮件枚举保护。如果用户有签名...
将变量替换为包含 HTML 的 JavaScript 字符串中数据库中的值
我从编辑器收到了一个字符串，其中包含 HTML 标签，如下所示： const htmlString = "帐户 {{帐户}} 我从编辑器收到一个字符串，其中包含 HTML 标签，如下所示： const htmlString = "<div>Account <span contenteditable="false">{{account}}</span></div>. <div>Hello <span contenteditable="false">{{hello}}</span></div>" 在此内容中，有两个格式为 {{account}} 和 {{hello}} 的变量。 在我的数据库中，我以格式存储变量数据 { key: string, value: string, isDefault: boolean }: [ { "key" : "account", "value" : "", "isDefault" : true, }, { "key" : "hello", "value" : "Hello everyone", "isDefault" : false } ] 首先，我使用一个函数来删除 HTML 标签： const blockTags = /<(div|h1|h2|h3|h4|h5|h6|p|ul|ol|li|br)[^>]*>/gi; const inlineTags = /<\/?(span|a|strong|em|b|i|u)[^>]*>/gi; let content = htmlString.replace(blockTags, '\n').replace(/<\/(div|h1|h2|h3|h4|h5|h6|p)>/gi, '\n'); content = content.replace(inlineTags, ''); content = content.replace(/<[^>]+>/g, ''); content = content.replace(/\n\s*\n/g, '\n').trim(); 然后，我提取变量： const variables = (content.match(/\{\{(.*?)\}\}/gi) || []).map((item) => item.replace(/\{\{|\}\}/g, '')); 最后，我使用一个函数将所有变量替换为数据库中的相应值，如果变量是默认值（isDefault = true），我将根据系统规则根据配置替换为动态值： const objVariables = variables.reduce((acc, { key, value, isDefault }) => { acc[key] = { value, isDefault }; return acc; }, {}); const result = content.replace(/\{\{(.*?)\}\}/g, (match, variable) => { const variableData = objVariables[variable]; if (variableData && variableData.isDefault) { if (variable === "account") { return "ACCOUNT_NAME"; } } return variableData ? variableData.value : match; }); 我想用数据库中存储的值替换 HTML 字符串中的所有变量，但我认为我的代码不是最好的解决方案，而且可能很慢。我正在寻找优化的解决方案或任何建议。 我认为你应该迭代你的变量并替换它们（如果在字符串中找到它们）...不需要删除标签。 const myVariables = [ { "key" : "account", "value" : "", "isDefault" : true }, { "key" : "hello", "value" : "Hello everyone", "isDefault" : false }, ]; let myString = myContent.innerHTML; myVariables.forEach ( variableData => { const { key, value, isDefault } = variableData; myString = myString.replace ( `{{${key}}}`, ( ( isDefault && ( key === 'account' ) ) ? 'ACCOUNT_NAME' : value ?? key ) ); } ); myContent.innerHTML = myString; <div id="myContent"> <div>Account <span contenteditable="false">{{account}}</span>.</div> <div>Hello <span contenteditable="false">{{hello}}</span></div> </div> 请注意，在上面的示例中，甚至没有触及 html。