小编Utk*_*nos的帖子

我很惊讶地发现以下似乎不起作用,因为DOMContentLoaded事件不会触发(this.els是元素的对象).

this.els.stage_ifr.prop('src', 'templates/'+ee.globals.creating+'/item'+this.id);
this.els.stage_ifr[0].addEventListener('DOMContentLoaded', function() {
    alert('loaded!');
}, false);

该页面加载到iframe中,但没有回调.onload但是,DOM级别为零.

this.els.stage_ifr[0].onload = function() { alert('loaded!'); }; //<-- fires

解决方法是在父页面中准备一个全局可访问的jQuery延迟对象,并通过从调用iframe的页面触发的DOM-ready事件来解决它,而不是从父级侦听DOM-ready.

Paraent页面:

dfd = new $.Deferred;
dfd.done(function() { alert("frame page's DOM is ready!"); });

框架页面:

$(function() { window.parent.dfd.resolve(); });

尽管如此,知道第一种方法是什么还是很好的...

如果在其他地方被问过这个问题,我很难道歉,因为它很难说,所以我找不到任何东西.

有没有办法在画布上实现蒙版？

例如,仅使用形状(没有图像)我绘制一个带窗口的房子.我也有一个代表一个人的形状.我希望那个人出现在窗口 - 但显然只有窗口允许才能看到这个人.其余的将被掩盖.

我想要清空窗户占据的房子的一部分,这样在层中有一个真正的洞,这使得问题很容易解决.

但是我意识到你不能在画布上删除形状或部分形状,只能在旧东西上绘制新东西.所以在多层次的环境中(我在Kinetic.JS中制作游戏),我到底能做什么？

对不起,如果对此有任何解释不充分 - 对整个图形事物都是新的.

好的,这是一个奇怪的.我确定我错过了一些明显的东西.

http://jsfiddle.net/wVp8j/

HTML:

<form>
    <input type='text' required />
    <button>check field validity</button>
</form>

JS:

var field = document.querySelector('input[type=text]');
document.querySelector('button').addEventListener('click', function() {
    alert('Validates: '+field.willValidate);
    alert('Value missing: '+field.validity.valueMissing);
}, false);

如果表单在字段留空的情况下提交,则会按照您的预期抑制提交,但第一个警报会检查字段的有效性状态true.为什么？

为了进一步反驳这一点,第二次警报确认了现场存在问题,并且true正如预期的那样.

我错过了什么？

[旁注:MDN 似乎认为 willValidate是一种方法,而不是财产.]

[ 编辑 ]

正如下面的评论者指出的那样,willValidate该领域是否是验证的候选者,尽管其名称具有误导性,但该领域是否会得到验证.

如果通过JS提交表单,那么可能意味着表示字段是否将验证的唯一方法是迭代其validity对象并查看是否有任何标志设置为true.

[ 编辑2 ]

事实证明,你可以只检查validity.valid一个字段,即使valid你没有显示console.log整个有效性对象的标志.因此,这似乎是找出一个领域是否会假设验证的方式.

我有一个使用CSS3列数的报纸格式的标题网格.

http://jsfiddle.net/L6TTJ/

HTML:

<ul>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <li><h3><a href='#'>heading</a></h3><p>snippet</p></li>
    <!-- ... etc ... -->
</ul>

CSS(为简洁起见,省略了供应商前缀和非相关规则):

ul {
    column-count: 3;
    column-rule: 1px solid #ccc;
}
li { border-bottom: solid 1px #ccc; }

您可以看到它的发展方向:CSS中是否有任何方法可以定位li每列中的最后一个元素,以便删除底部边框？

我发现了这个问题,但没有答案.

我有一个链接的CSS动画,大多数工作正常:

#product {
    background: red;
    width: 10%;
    height: 10%;
    border: none;
    left: -22%;
    top: 50%;
    top: 40%;
    animation: product_across 2s linear, product_down 1s;
    animation-delay: 0s, 2s;
}
@-moz-keyframes product_across {
    from { left: -22%; }
    to { left: 98%; }
}
@-moz-keyframes product_down {
    from { top: 40%; left: 98%; }
    to { top: 98%; left: 128.5%; }
}

问题是,在第一个animation(product_across)完成后,我想要应用一个样式.没有动画,只需应用它.

CSS3是否允许这样做？我想我正在寻找一种"动画结束"属性或其他东西.

目前我正在围绕它:

@-moz-keyframes product_down {
    from { -moz-transform: rotate(45deg); top: 40%; left: 98%; }
    to { -moz-transform: rotate(45deg); …

我正在尝试安装 Jest 以与 Babel 和 Typescript 一起使用。我已严格按照此处显示的说明进行操作，但我得到：

错误：Jest：无法解析 TypeScript 配置文件 C:...jest.config.js`

...当我跑步时npm run test。

的内容jest.config.ts是：

export default {
    //lots of commented-out stuff in here - nothing at all uncommented
}

这是我所做的具体步骤：

• 初始化项目-npm init -y
• 安装笑话 -npm -i --save-dev jest
• 制作一个脚本（sum.js）和一个测试（sum.test.js）文件：

总和.js：

function sum(a, b) {
  return a + b;
}
module.exports = sum;

总和测试.js

const sum = require('./sum');
test('adds 1 + 2 to equal 3', () => {
  expect(sum(1, 2)).toBe(3);
});

• 添加 …

任何人都可以解释为什么(实际上,如果)在使用像Kinetic这样的东西时最好将画布游戏的主要部分抽象到不同的层次？

它当然感觉就像你应该的那样,到目前为止我一直是:背景的一层,玩家角色的一层,以及其他层.

然后我遇到了一个情况,我需要一个图层的形状坐在另一个图层的形状后面 - 但是将整个图层移到另一个图层后面不是一个选项,所以我不情愿地重新编码所以整个游戏都坐在一个层.

令我惊讶的是,我仍然可以做我需要的一切.我仍然可以动画或处理各个形状或组的事件.

简而言之:显式分层带来了哪些优势？单层方法可能会遇到哪些陷阱？

我的 CSP 使用消息阻止了从远程服务器加载的背景图像

内容安全策略：页面的设置阻止了自身资源的加载（“default-src * https://xxxxx.com ”）。来源：背景图片：url(' https://xxxxx ....

这是我的 CSP：

<meta http-equiv="Content-Security-Policy" content="default-src * https://xxxxx.com; script-src * 'unsafe-eval' 'unsafe-inline'; img-src 'self' data:">

...xxxxx显然我的域在哪里。

我认为它不喜欢url(...，但CSP 规范似乎没有考虑url()一个方案，所以我不知道该怎么做。有人知道吗？

[更新]

在@sideshowbarker 的评论之后，我应该指出这个调用来自一个内联style属性（不是标签）。

我有一个套件，可以记录用户的网络摄像头和麦克风。它在网页上效果很好，但在Chrome扩展程序中，该行如下：

navigator.mediaDevices.getUserMedia({video: true, audio: true})
    .then(this.record.bind(this))
    .catch(VidRA.error);

扔

NotAllowedError: Failed due to shutdown

我搜索后发现几乎没有任何东西可以解释这一点。有没有其他人遇到过这个问题，或者有人知道我能做些什么？

我已经构建了一个 Chrome 扩展程序，它可以捕获屏幕活动和麦克风输入并输出一个视频文件。由于chrome.desktopCapture无法在屏幕捕获的同时记录音频输入，我将麦克风放在自己的单独流中。所以：

//get screen stream
chrome.desktopCapture.chooseDesktopMedia(['screen'], null, (stream_id, opts) => {
    let constraints = {video: mandatory: {
        chromeMediaSource: 'desktop',
        chromeMediaSourceId: stream_id
    }};
    navigator.mediaDevices.getUserMedia(constraints).then((stream) => {
        video_stream = stream;
    });
});

//get mic stream
navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {
    audio_stream = stream;
});

然后，稍后，当我获得两个流时，在开始录制之前，我通过创建主流合并它们，并将单独的视频和音频流中的相应轨道添加到其中。

let master_stream = new MediaStream(video_stream);
master_stream.addTrack(audio_stream.getTracks()[0]);

最终，当我得到一个视频文件时，这很好用。我得到屏幕和麦克风。

问题：如果我要求 Chrome 也记录系统声音，为什么这种技术不起作用？

因此，如果我更改['screen']为['screen', 'audio']，在其他所有内容都相同的情况下，最终视频中将没有麦克风。

如果我getTracks()在 上输出master_stream，这就是我得到的：

Array(3)
    0: MediaStreamTrack {kind: "audio", id: "9ee3ee33-73ee-41e4-957c-d6fd3aaada43", label: "System Audio", enabled: …