Questions tagged «javascript»

我正在使用带有手柄的服务器端渲染的Nodejs后端。doc从车把读取一组对象后，其中包含键“ content”和“ from”。但是，当我尝试用于#each遍历对象数组时，会出现错误“ Handlebars：访问已被拒绝以解析属性”来自”，因为它不是其父级的“拥有属性”。 我试图将我在doc数组中获取的数据进行console.log（），一切似乎都很好。 从某种角度来说，这是猫鼬查询，我已将对象doc作为键添加到res.render参数中。 Confession.find() .sort({date: -1}) .then(function(doc){ for(var i=0; i < doc.length; i++){ //Check whether sender is anonymous if (doc[i].from === "" || doc[i].from == null){ doc[i].from = "Anonymous"; } //Add an extra JSON Field for formatted date doc[i].formattedDate = formatTime(doc[i].date); } res.render('index', {title: 'Confession Box', success:req.session.success, …

15 javascript  node.js  mongodb  express  handlebars.js 

我需要遍历一个JavaScript对象，将其视为具有自定义键的数组。我知道这不受完全支持，因为属性没有内在的顺序，但是由于我总是对属性进行重新排序，因此我发现这种方法简单可靠。 当键是数字或可以转换为数字的字符串时，会发生此问题。 当我运行此代码时： var test1 = {4294966222:"A",4294966333:"A",4294966111:"A"}; var test2 = {4294968222:"A",4294968333:"A",4294968111:"A"}; for (var k in test1) {console.log(k);} console.log("---"); for (var k in test2) {console.log(k);} 运行代码段隐藏结果展开摘要 输出为： 4294966111 4294966222 4294966333 --- 4294968222 4294968333 4294968111 意思是： （test1）如果键低于2 ^ 32（4,294,967,296），则会自动对它们进行重新排序，从小到大 （test2）如果键大于2 ^ 32，则不会重新排序。 问题是：为什么会这样？ 由于我测试过的所有浏览器（Google Chrome 79.0，Mozilla Firefox 71.0，Microsoft Edge 44.18362，Internet Explorer 11.535）都同意此输出，因此必须有一些正式规范。 …

15 javascript 

我们可以使用它window.location.replace来避免历史记录，并定位页面锚，而无需重新加载页面，但不能在iframe中使用吗？ 问题是违反了CSP（内容安全策略），script-src 'unsafe-inline'必须启用该状态。除非我没有定义CSP，即使我定义了一个CSP并允许script-src 'unsafe-inline'它仍然给出相同的违规错误。在ie11 / chrome / ff中得到相同的结果。 iframe位于同一域（位于同一目录中）。 在控制台中定位iframe并在控制台中使用window.location.replace('/samepage.html#onpage_anchor')。 有用。 它以页面锚为目标，而无需重新加载页面和历史记录。 将相同的代码内联在锚链接上，它可以工作。 在外部脚本中使用相同的代码，获取csp违规错误。 如果不在iframe中，则效果很好。 我试图创建一个CSP允许的动作，但即使是在最宽松的内容安全策略可能会允许它。 编辑：所以我将示例放到允许多个文件的插件上，这样我就可以使用引用父/子页面的正确hrefs。 有关示例的示例的注释： 这些示例中未重现该问题。 该脚本即使在iframe中也可以完美运行。但是，相同的代码在我的本地服务器上不起作用，或者当我在VPS上实时运行该代码时。 我怀疑在plunker上不会触发CSP违规，因为plunker通过某种抽象层将内容呈现给浏览器。 第一次单击父级中的手风琴链接时，它会刷新。这是因为页面最初加载的方式没有引用index.html。后续点击将按预期工作，而无需重新加载页面。在iframe中这不是问题，因为它最初会引用child.html 这些是显示代码而无需进行任何更改即可使其工作的很好的示例（如需要更改href使其在stackoverflow代码段中工作，如下所述）。这也很好，因为它显示了javascript应当正常工作。但这并没有显示出实际的问题。您仍然需要在编辑器中加载它，然后在本地服务器或实时托管环境中运行它，才能看到真正的问题。 柱塞示例 有脚本： 无历史记录 无脚本： 有历史记录 简化的代码示例 一键输入的简单手风琴。足以重现问题。 单击打开/关闭将展开/折叠手风琴，不需要JS。JS应该做完全相同的事情，但是没有历史记录。工作正常，但不能在iframe中使用。 代码段注释： 您可以运行该代码段以了解我所描述的内容，但实际上并不能证明问题所在。 该代码段的行为与实际浏览器中的行为不同，JavaScript无法正常工作。 该代码段显示了代码，但应在iframe中运行以查看问题。在iframe外部运行它，以查看差异以及其工作原理。 由于链接如何与JS配合使用（替换整个url），因此它们实际上必须像这样，href="https://stackoverflow.com/thispage.html#ac1"而不是 href="#ac1"像它们出现在代码段中一样（不能以代码段中的实际html页面为目标）。因此，如果您在编辑器中尝试此操作 （请这样做），请记住将链接更改为此格式， this_document.html#anchor以使它们仍然是相同的页面定位点，但是page.html包含在链接中。 显示代码段 $(document).ready(function() { // anchor links without history $.acAnch = function(event) …

15 javascript  html  iframe  browser-history  content-security-policy 

如果我有一系列物品，例如， const array = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18 ] 我该如何映射它，以便呈现屏幕/页面， 1 6 11 16 2 7 12 17 3 8 13 18 4 9 14 5 10 15 我能够使它与 const chunkSize = 5; array .map((e, …

15 javascript 

我创建了一个Web应用程序，该应用程序使用history pushState和replaceState方法来浏览页面，同时更新历史记录。 该脚本本身几乎可以完美运行；它将正确加载页面，并在需要抛出页面时抛出页面错误。但是，我注意到一个奇怪的问题，该问题pushState会将多个重复的条目（并替换之前的条目）推送到历史记录中。 例如，假设我（按顺序）执行以下操作： 加载index.php（历史记录为：索引） 导航到profile.php（历史记录将是：Profile，Index） 导航到search.php（历史记录为：搜索，搜索，索引） 导航至dashboard.php 最后，这是我历史上将要发生的事情（按照最新到最旧的顺序）： 仪表 板 仪表板仪表板 搜索 索引 这样做的问题是，当用户单击前进或后退按钮时，他们将被重定向到错误的页面，或者必须单击多次才能返回一次。那，如果他们去检查他们的历史记录就没有意义了。 这是我到目前为止的内容： var Traveller = function(){ this._initialised = false; this._pageData = null; this._pageRequest = null; this._history = []; this._currentPath = null; this.abort = function(){ if(this._pageRequest){ this._pageRequest.abort(); } }; // initialise traveller (call replaceState on load instead …

15 javascript 

如何将小时和分钟格式的浮点数求和？ 那些。如果计算两个这样的数字0.35+3.45，则应为= 4.20，而不是3.80 var arr = [0.15, 0.2, 3.45, 0.4, 2, 0.3, 5.2, 1, 1.4, 1.1, 2.4, 1, 3.4] var sum = 0.0; arr.forEach(function(item) { console.log(sum); sum += parseFloat(item); }); 运行代码段Hide results展开摘要 结果应该是这样的： 0 0.15 0.35 4.20 5.0 7.0 7.30 12.50 13.50 15.30 16.40 19.20 20.20

14 javascript 

这赏金已经结束。这个问题的答案有资格获得+500声望奖励。赏金宽限期在23小时内结束。 Ferit希望引起更多关于这个问题的注意。 如何在不假定宽高比的情况下使iframe响应？例如，内容可以具有任何宽度或高度，在渲染之前是未知的。 注意，您可以使用Javascript。 例： <div id="iframe-container"> <iframe/> </div> 调整大小iframe-container以使其内容几乎不能容纳在里面而没有多余的空间，换句话说，有足够的空间容纳内容，因此无需滚动即可显示内容，但没有多余的空间。容器完美地包裹了iframe。 假设内容的纵横比为16：9，这说明了如何使iframe响应。但是在这个问题上，纵横比是可变的。

14 javascript  html  css  iframe  responsive-design 

我有对象数组，我只用位置数组。我的目标是将这些locations数组合并为一个数组，但是我这样做并没有得到空数组。这是我的方法： let results = [{ id: '1', locations: ['aaaa', 'bbbbbb', 'cccccc'] }, { id: '2', locations: [] }, { id: '3', locations: ['ddd', 'aaadsad', 'sefd'] }, { id: '4', locations: ['ffff', 'eeee', 'sfdsfsd'] }, ]; const locationIds = [].concat.apply([], ...results.filter(s => s.locations && s.locations.length > 0).map(({ locations }) => ({ …

14 javascript  arrays  typescript 

当我输入最后一个数字时，第一个数字在text-box（消失）里面，这增加了一个额外的空间。 在外部单击后text-box，看起来不错，这是我键入最后一个字符时所需的。 #number_text { padding-left: 9px; letter-spacing: 31px; border: 0; background-image: linear-gradient(to right, #e1e1e1 70%, rgba(255, 255, 255, 0) 0%); background-position: left bottom; background-size: 38px 1px; background-repeat: repeat-x; width: 220px; box-sizing: border-box; outline:none; } <input type="text" id="number_text" maxlength="6" pattern="\d{6}" value="1234" > 运行代码段隐藏结果展开摘要 帮助我摆脱这个问题。谢谢

14 javascript  jquery  html  css 

我在本地主机（Windows 7，Chrome v79.0.3945.130（64位））上测试了html / js代码，并且大约50％的时间代码更改未反映在浏览器中（我可以通过Dev Tools / Sources查看） ）。 互联网上有很多建议，但似乎都行不通： 右键单击重新加载，然后选择“清空高速缓存和硬重新加载”-在30％的情况下无济于事。 在Chrome开发者工具的“网络”标签中禁用缓存-无效。 <meta http-equiv="Cache-control" content="no-cache">在标题中添加-没有帮助。 替换<script src="common.js"></script>为<script src="common.js?blabla"></script>-在60％的情况下有帮助，但每次更改都是一件繁琐的事后，您需要这样做。此外，它不适用于html更改。 将文件复制到新文件（如index.html到index2.html）并替换代码中的文件名-总是可以的，但要花很多时间。 当我将代码提交到github.io时，存在完全相同的问题 请帮助我做到这一点，以便该站点立即反映出代码更改。 编辑：我创建了一个文件index3.html，并只在其中放置“ hello world”。在浏览器中打开文件。更改为“ hello world2”-浏览器更新了内容。更改为“ hello world3”-即使多次重载和“空缓存和硬重载”后，浏览器仍显示“ hello world2”。我改为“ hello world4”-浏览器仍然显示“ hello world2”。在4个小时内，我更改为“ hello world5”-浏览器仍然显示“ hello world2”。我使用基本记事本编辑了此文件。 Edit2：人们一直在问我正在使用什么服务器。这看起来像是问题的一部分。不幸的是，我不知道，我也不知道我需要做什么来检查它。到目前为止，这是我发现的所有内容： 我有inetpub/wwwroot放置html和js文件，然后在的浏览器中打开index.html的目录http://localhost/。 Devs Tools中的“我的网络”面板如下所示：image link。 服务器设置非常快，不需要安装任何其他软件。即我不使用node.js。 inetpub/wwwroot当我打开iisstart.htm时，http://localhost/iisstart.htm它显示为IIS7。

14 javascript  html  server  browser-cache 

我收到了很多用户的抱怨，他们在使用基于jQuery的选项卡时感到很烦，当他们在浏览器上回弹时，他们没有转到上一个选项卡，而是转到了上一页。我添加了以下上一个/下一个按钮，但还不够。如何重新配置​​按钮，以便用户单击浏览器后退箭头时可以转到上一个选项卡，而不是上一个页面。您可以在这里进行测试。 $('#quicktabs-registration_steps').append('<div class="prevnext"><a class="tablink-prev btn" href="#">Prev</a><a class="tablink-next btn btn-lg btn-primary" href="#">Continue</a></div>'); $('.tablink-prev').click(function () { var index = $('.quicktabs-tabs li.active').index(); $('.quicktabs-tabs li').eq(index).removeClass('active'); if (index == 0) { index = 1; } $('.quicktabs-tabs li').eq(index - 1).addClass('active'); $('.quicktabs-tabs li').eq(index - 1).find('a').click(); return false; }); $('.tablink-next').click(function () { var length = $('.quicktabs-tabs').first().children().size();; var index …

14 javascript  jquery 

可迭代与迭代器相同还是不同？ 从规范中看来，一个可迭代对象是一个对象，例如，obj它obj[Symbol.iterator]引用一个函数，以便在被调用时返回一个对象，该对象具有next可以返回该{value: ___, done: ___}对象的方法： function foo() { let i = 0; const wah = { next: function() { if (i <= 2) return { value: (1 + 2 * i++), done: false } else return { value: undefined, done: true } } }; return wah; // wah is iterator …

14 javascript  ecmascript-6  iterator  iterable 

我正在处理HTML表并html-to-paper在vue.js中使用该表将其打印到打印机，我正在做的工作是单击添加以创建新行，然后单击打印，我试图打印该表，但它没有任何仅显示空白单元格的数据 代码应用程序 <template> <div id="app"> <button type="button" @click="btnOnClick">Add</button> <div id="printMe"> <table class="table table-striped table-hover table-bordered mainTable" id="Table"> <thead> <tr> <th class="itemName">Item Name</th> <th>Quantity</th> <th>Selling Price</th> <th>Amount</th> </tr> </thead> <tbody> <tr v-for="(tableData, k) in tableDatas" :key="k"> <td> <input class="form-control" readonly v-model="tableData.itemname" /> </td> <td> <input class="form-control text-right" type="text" min="0" step=".01" v-model="tableData.quantity" …

14 javascript  css  vue.js  printing  vuejs2 

我想通过JS创建一些html，因此需要在JS文件中编写html，例如： function createHtmlSection() { return "<li class=\"chapter up-wrapper-btn\">" + "<div>" + "<button><i class=\"fa fa-plus\" onclick=\"addSection('up',this)\"></i></button>" + "<label contenteditable=\"true\">section 1</label>" + "</div>" + "</li>"; } 是否有工具或某种快捷方式来创建这种类型的html字符串？ 我的意思是，在这种情况下，我需要手动键入所有这些html。与+并且需要添加"符号。 可以将其转换的东西： <li class="chapter up-wrapper-btn"> <div> <button><i class="fa fa-plus" onclick="addSection('up',this)"></i></button> <label contenteditable="true">section 1</label> </div> </li> 到我需要手动输入的第一个字符串

14 javascript  html 

我正在将MatterJs用于基于物理的游戏，但尚未找到解决方案来防止鼠标通过其他物体强行拖动物体。如果将一个主体拖到另一个主体中，则被拖动的主体可能会迫使自己进入另一个主体并通过另一个主体。我正在寻找一种可靠的方法来防止它们相交。您可以在任何MatterJS演示中观察这种效果，方法是用鼠标选择一个主体，然后尝试迫使它穿过另一个主体。这是一个典型的例子： https://brm.io/matter-js/demo/#staticFriction 不幸的是，这会根据拖放而中断任何游戏或模拟。我尝试了许多解决方案，例如在发生碰撞时打破鼠标约束，或减小约束刚度，但没有一种可靠地工作。 任何建议欢迎！

14 javascript  physics  matterjs