在Chrome DevTools中的“渲染”下，有一个选项“显示潜在的滚动瓶颈”。
启用此功能后，我在屏幕上带有overflow:scroll的一些div元素在顶部显示一个标记，显示“滚动重绘”。
我找不到有关此功能的大量文档，并且我不知道它是否是我可以实际修复或改进的东西，或者仅仅是事实说明-div包含内容，并且确实可以滚动。
当我突然决定尝试这样做时，我一直在搞一个JavaScript控制台：
F
令人惊讶的是，它们相等：
为什么会发生？ 它们显然是不同的数字（即使F也短了一位数字）
如果将F添加到0xFFFF...FF中，它们将不再相等：0x100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000 == 0xFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF
这是预期的行为吗？
是否可以将对象属性名称作为字符串获取
person = {};
person.first_name = 'Jack';
person.last_name = 'Trades';
person.address = {};
person.address.street = 'Factory 1';
person.address.country = 'USA';
我想这样使用它：
var pn = propName( person.address.country ); // should return 'country' or 'person.address.country'
var pn = propName( person.first_name ); // should return 'first_name' or 'person.first_name'
注意：此代码正是我要寻找的。 我了解这听起来甚至很愚蠢，但事实并非如此。
这就是我要做的。
的HTML
person = {};
person.id_first_name = 'Jack';
person.id_last_name = 'Trades';
person.address = {};
person.address.id_address = 'Factory 1';
person.address.id_country = 'USA';
extPort.postMessage
(
{
message : MSG_ACTION,
propName( person.first_name ): person.first_name
}
};
- - - - - - - - - - - 回答 - - - - - - - - - - - -
感谢ibu。 他指出了正确的方法，我使用了递归函数
var res = '';
function propName(prop, value) {
for (var i in prop) {
if (typeof prop[i] == 'object') {
if (propName(prop[i], value)) {
return res;
}
} else {
if (prop[i] == value) {
res = i;
return res;
}
}
}
return undefined;
}
var pn = propName(person, person.first_name); // returns 'first_name'
var pn = propName(person, person.address.country); // returns 'country'
演示：[http://jsbin.com/iyabal/1/edit]
概述和原始问题
window.name是有趣的野兽。 MDN的描述暗示了最初的意图：
窗口的名称主要用于设置超链接和表单的目标。 Windows不需要名称。
因此，这意味着我们可以在此窗口中打开控制台，并编写：
var win = window.open('http://google.com', 'el goog');
...然后让它通过弹出窗口阻止程序，该阻止程序应在名为“ el goog”的窗口中打开google.com。 由于同源策略，我无法访问window.name的winow.name属性，但是如果我在新窗口中打开控制台并键入name，则会得到"el goog"。
如果将窗口发送回从其打开的域（在本例中为stackoverflow.com），则可以获取winow.name属性，并且该属性没有更改。
win.location.replace(location.href);
win.name; // "el goog"
这意味着我们可以通过设置窗口的winow.name属性来拥有一种跨域会话存储。
如果google.com在将窗口发送回原始域之前更改了winow.name的值，我们将看到新值，而不是“ el goog”。 这可以用作跨域数据传输，其实用程序类似于JSONP或CORS。
我做了一些搜索以尝试找到更多信息，显然dojo认为这是合法的交通工具。 但是，以某种方式，这并不能使我完全放心。 所以我的问题是，是否有信誉良好的网站使用winow.name作为数据传输？ 我认为这很容易发现，因为他们的文档会说“向JSONP的查询字符串添加'回调'，或者为window.name添加'whatever'”，但是我从未见过这样的东西。 有人真的在野外发现了这个吗？
替代问题
可能是没有人真正使用这种技术的情况。 如果是这样，那么（如Rob W所指出的）上述问题是无法回答的。 因此，我的另一个问题是，这种方法有什么问题？ 这可能有助于解释为什么它并未真正被采用。
如我所见，与JSONP相比，这种方法至少有两个好处。
使用JSONP，您可以信任来自国外的脚本来在您的域上运行。 使用winow.name，恶意网站包含的任何脚本都将在其自己的域上运行。
使用JSONP，无法传递大数据（任何对于URL而言太大的数据），也无法进行HTTP POST。 使用winow.name，我们可以发布任何大小的任意数据。
有什么缺点？
示例实施
这是客户端实现的一个非常简单的示例。 这不处理POST请求，仅处理GET。
function fetchData(url, callback) {
var frame = document.createElement('iframe');
frame.onload = function() {
frame.onload = function() {
callback(frame.contentWindow.name);
frame.parentNode.removeChild(frame);
}
frame.src = 'about:blank';
}
frame.src = url;
document.body.appendChild(frame);
}
// using it
fetchData('http://somehost.com/api?foo=bar', function(response) {
console.log(response);
});
我设置了一个小提琴在这里进行测试。它使用此脚本作为测试服务器。
这是一个稍长的示例，可以发出POST请求：[http://jsfiddle.net/n9Wnx/2/]
摘要
据我所知，winow.name尚未成为一种数据传输工具。 我想知道我的看法是否正确（因此是原始问题），如果这样，我想知道为什么会这样。 我列出了window.name似乎比JSONP具有的一些优势。 谁能识别出可能导致无法采用该技术的一些弊端？
更重要的是，谁能给我一个可靠的理由，为什么我不应该使用winow.name作为数据传输？
这个问题已经在这里有了答案：
我习惯了Dojo的承诺，在这里我可以执行以下操作：
promise.isFulfilled();
promise.isResolved();
promise.isRejected();
有没有一种方法可以确定ES6承诺是否得到履行，解决或拒绝？ 如果没有，是否有办法使用Object.defineProperty(Promise.prototype, ...)来填充该功能？
我只想禁用某些情况下用户单击某个元素的功能。 这是我正在使用的一些代码：
$('#navigation a').bind('click',function(e){
var $this = $(this);
var prev = current;
current = $this.parent().index() + 1; // store the position in current
if (current == 1){
$("#navigation a:eq(1)").unbind("click"); // i want to disable the ability to click this element if current is 1
}
if (current >= 2){
$("#navigation a:eq(1)").bind("click"); // this is wrong, but I want to rebind the click if current is greater than 1.
}
}
所以可以说我已经向Array类添加了一些原型方法：
Array.prototype.containsKey = function(obj) {
for(var key in this)
if (key == obj) return true;
return false;
}
Array.prototype.containsValue = function(obj) {
for(var key in this)
if (this[key] == obj) return true;
return false;
}
然后创建一个关联数组并尝试遍历它的键：
var arr = new Array();
arr['One'] = 1;
arr['Two'] = 2;
arr['Three'] = 3;
for(var key in arr)
alert(key);
这将返回五个项目：
-One -Two -Three -containsKey -containsValue
但我只想（期待？）三个。 我要解决这个错误吗？ 有没有办法“隐藏”原型方法？ 还是我应该做些不同的事情？
我的TranslationDetail组件在打开时会传递一个ID，并根据此ID在类构造函数中触发外部api调用，以接收状态数据，并将此数据显示在TranslationDetail上。
//Routing:
<Route path="/translation/:id" component={TranslationDetail}/>
//Class:
class TranslationDetail extends Component {
constructor(props){
super(props);
this.props.fetchTrans(this.props.params.id);
}
如果我手动输入网址，那么一切正常。 万一我想使用react-router例如 用于显示网址下方的下一项的确会更改，但不会触发api调用，并且数据将保持不变。
<button
type="button"
onClick={() =>
browserHistory.push(`/translation/${Number(this.props.params.id)+1}`)}>
Next
</button>
请记住，我是一个初学者。 发生这种情况的原因是我认为构造函数只运行一次，因此不会触发进一步的api调用。
我该如何解决？我是否需要列出道具并在更改时调用函数？ 如果是，怎么办？
我希望我的数字总是四舍五入到闭合的上限数字，如下所示：
1.2 => 2
1.4 => 2
2.5 => 3
2.9 => 3
如何使用JavaScript做到这一点？
我有一个全新创建的Angular 4 CLI应用程序。 运行此命令后：
npm install bootstrap@4.0.0-beta jquery popper.js --save
并像这样编辑.angular-cli.json：
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.slim.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js"
],
Chrome控制台仍然存在问题：
Uncaught Error: Bootstrap dropdown require Popper.js (https://popper.js.org)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:17548)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:23163)
at eval (eval at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9), <anonymous>:6:50902)
at eval (<anonymous>)
at webpackJsonp.../../../../script-loader/addScript.js.module.exports (addScript.js:9)
at Object.../../../../script-loader/index.js!../../../../bootstrap/dist/js/bootstrap.min.js (bootstrap.min.js?f885:1)
at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
at Object.2 (scripts.bundle.js:66)
at __webpack_require__ (bootstrap a2f1d85ef068872b0530:54)
at webpackJsonpCallback (bootstrap a2f1d85ef068872b0530:25)
我该如何解决？
var vidID = video.getId();
将以下行放在我的控制台中：
<object type="application/x-shockwave-flash" class="video" data="http://www.youtube.com/v/vyFAF-J3jzM" width="308" height="100" id="video" style="visibility: visible; ">…</object>
因此，“视频”拥有整个dom对象。 如何使用JavaScript查询该对象的ID？
像var vidID = video.getId();
注意：我在问题中保留了最新版本的小书签，该版本效果很好，并且基于Jacob的回答。 如果您正在寻找要使用的书签，请使用该书签。 如果您只想要适用于chrome的惊人功能，请参见leosok的绝妙答案。
我希望能够使用JavaScript小书签来反转页面上所有元素的颜色。 我知道要反转颜色，您需要从255（xFF）中减去每个RGB十六进制值，但是除此之外，我不确定如何进行操作。
我该怎么做？
使用jQuery是可以接受的，并且只需要在Chrome上运行即可，尽管如果可以在Firefox中运行则更佳。
这不包括图像-背景，文本和链接颜色应全部反转。 基本上任何从CSS获得颜色的东西。
更新这是一个更新的小书签，可解决嵌套元素的问题，并将在许多不同的站点（包括该站点）上运行
更新2添加了对透明度的支持，可处理具有默认背景色rgba（0，0，0，0）的元素。 现在应该有更多的站点在使用更新的站点。
javascript: (function ($) {
function load_script(src, callback) {
var s = document.createElement('script');
s.src = src;
s.onload = callback;
document.getElementsByTagName('head')[0].appendChild(s);
}
function invertElement() {
var colorProperties = ['color', 'background-color'];
var color = null;
for (var prop in colorProperties) {
prop = colorProperties[prop];
if (!$(this).css(prop)) continue;
if ($(this).data(prop) != $(this).css(prop)) continue;
if (($(this).css(prop) === 'rgba(0, 0, 0, 0)') || ($(this).css(prop) === 'transparent')) {
if ($(this).is('body')) {
$(this).css(prop, 'black');
continue;
} else {
continue;
}
}
color = new RGBColor($(this).css(prop));
if (color.ok) {
$(this).css(prop, 'rgb(' + (255 - color.r) + ',' + (255 - color.g) + ',' + (255 - color.b) + ')');
}
color = null;
}
}
function setColorData() {
var colorProperties = ['color', 'background-color'];
for (var prop in colorProperties) {
prop = colorProperties[prop];
$(this).data(prop, $(this).css(prop));
}
}
function invertColors() {
$(document).live('DOMNodeInserted', function(e) {
var $toInvert = $(e.target).find('*').andSelf();
$toInvert.each(setColorData);
$toInvert.each(invertElement);
});
$('*').each(setColorData);
$('*').each(invertElement);
$('iframe').each(function () {
$(this).contents().find('*').each(setColorData);
$(this).contents().find('*').each(invertElement);
});
}
load_script('http://www.phpied.com/files/rgbcolor/rgbcolor.js', function () {
if (!window.jQuery) load_script('https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js', invertColors);
else invertColors();
});
})(jQuery);
现在可以在我尝试过的大多数网站上使用。 但是，背景图像可能会带来问题。
相关：JavaScript KeyCode与CharCode
这是一些您可以在家中或在jsfiddle中尝试的代码：
el.addEventListener( 'keyup', function( e ) {
console.log( 'Keyup event' );
console.log( e.keyCode );
} );
el.addEventListener( 'keypress', function( e ) {
console.log( 'Keypress event' );
console.log( e.keyCode );
} );
为什么keyCode不同？
我能理解为什么只应该使用按键，但是我不明白的是，给定键盘上的相同击键，两个按键事件如何给出不同的keyCodes。
PS：我不用担心对旧版浏览器的支持，我在Chrome中尝试了此操作，感到很惊讶，并且找不到解释。
如何在JavaScript中格式化/整理/美化HTML？ 我尝试过搜索/替换尖括号（<，>）并进行相应的缩进。 但是，当HTML内是JS或CSS等时，当然不会考虑它。
我要这样做的原因是我制作了一个既具有所见即所得又具有源代码视图的内容编辑器（CMS）。 所见即所得编辑器编写的代码问题通常是一行。 因此，我想要一个可以按需将其格式化为更具可读性的JavaScript。
这是我到目前为止所拥有的：
function getIndent(level) {
var result = '',
i = level * 4;
if (level < 0) {
throw "Level is below 0";
}
while (i--) {
result += ' ';
}
return result;
}
function style_html(html) {
html = html.trim();
var result = '',
indentLevel = 0,
tokens = html.split(/</);
for (var i = 0, l = tokens.length; i < l; i++) {
var parts = tokens[i].split(/>/);
if (parts.length === 2) {
if (tokens[i][0] === '/') {
indentLevel--;
}
result += getIndent(indentLevel);
if (tokens[i][0] !== '/') {
indentLevel++;
}
if (i > 0) {
result += '<';
}
result += parts[0].trim() + ">\n";
if (parts[1].trim() !== '') {
result += getIndent(indentLevel) + parts[1].trim().replace(/\s+/g, ' ') + "\n";
}
if (parts[0].match(/^(img|hr|br)/)) {
indentLevel--;
}
} else {
result += getIndent(indentLevel) + parts[0] + "\n";
}
}
return result;
}
注意：我使用的是Google Maps API的v3
我正在尝试向放置在地图上的每个标记添加一个信息窗口。 目前，我正在使用以下代码执行此操作：
for (var i in tracks[racer_id].data.points) {
values = tracks[racer_id].data.points[i];
point = new google.maps.LatLng(values.lat, values.lng);
if (values.qst) {
var marker = new google.maps.Marker({map: map, position: point, clickable: true});
tracks[racer_id].markers[i] = marker;
var info = new google.maps.InfoWindow({
content: '<b>Speed:</b> ' + values.inst + ' knots'
});
tracks[racer_id].info[i] = info;
google.maps.event.addListener(marker, 'click', function() {
info.open(map, marker);
});
}
track_coordinates.push(point);
bd.extend(point);
}
问题是，当我单击一个标记时，它仅显示最后添加的标记的信息窗口。 同样为了清楚起见，信息窗口出现在最后一个标记旁边，而不是单击的标记。 我以为我的问题出在addListener部分，但不是肯定的。 有任何想法吗？
分页最好是什么？ 服务器端还是使用JavaScript动态进行？
我正在研究一个大量使用ajax并动态提取数据的项目，所以我一直在使用dom的javascript分页系统上工作-但我开始认为处理所有内容会更好 服务器端。
每个人的想法是什么？
是否有好的库可用于在javascript中处理树？ 为了清楚起见，我正在寻找树，因为数据结构中没有显示模型。
我想知道一旦完成任务，javascript中的对象是否有可能删除自身。
例如，我有以下对象...
var myObject = Object.create(baseObject);
myObject.init = function() {
/* do some stuff... */
delete this;
};
myObject.init();
这样行吗？ 如果没有，还有其他方法吗？
我想在内容更改时创建具有自定义行为的列表。 我尝试为此创建一个指令，但是我对如何将ng-transclude与ng-repeat指令结合起来感到迷茫。 有人可以让我走上正轨吗？
HTML：
<div ng-app="myApp">
<div ng-controller="ctrl">
<mylist items="myItem in items">
<span class="etc">{{myItem}}</span>
</mylist>
</div>
</div>
Javascript：
angular.module('myApp', [])
.controller('ctrl', function ($scope) {
$scope.items = ['one', 'two', 'three'];
})
.directive('mylist', function () {
return {
restrict:'E',
transclude: 'element',
replace: true,
scope: true,
template: [
'<ul>',
'<li ng-repeat="WhatGoesHere in items" ng-transclude></li>',
'</ul>'
].join(''),
link: function (scope, element, attr) {
var parts = attr.items.split(' in ');
var itemPart = parts[0];
var itemsPart = parts[1];
scope.$watch(itemsPart, function (value) {
scope.items = value;
});
}
}
});
我已经在这里工作了一部分
条件：
element[0].querySelectorAll('ul>li')或类似的东西来完成它，它只需要在Chrome上运行）。我正在使用WAMP在运行APACHE v2.2.22，PHP 5.3.13和MySQL v5.5.24的本地计算机（Windows 7 Ultimate x64）上开发站点。 我正在使用Chrome v 22.0.1229.94开发。 我的网站上有很多javascript，但是Chrome一直在无情地阻止javascript在页面上运行。
点击地址栏中的“此页面上的已阻止javascript”小图标，包括选中了“始终允许Localhost允许Java在本地主机上”的下拉菜单，并且我在Chrome的设置中也有一个JavaScript例外，明确地表示始终允许JavaScript在“ [[ http：// localhost'。]
允许使用Cookie，已选中“允许所有网站运行JavaScript”，我也不知道为什么Chrome不允许运行JavaScript。
总体而言，我想找出一个解决方案对项目来说并不是必须的，因为IE9和Firefox 16.1都允许JavaScript，并且我可以利用它们。 我很想知道是否有什么办法可以在Chrome中修复，因为我想继续在Chrome中进行开发。