小编sua*_*kim的帖子
使用child_process.execSync但在控制台中保持输出
我想使用execSync在NodeJS 0.12中添加的方法,但仍然在控制台窗口中输出我运行Node脚本的输出.
例如,如果我运行具有以下行的NodeJS脚本,我希望在控制台内看到rsync命令的完整输出"live":
require('child_process').execSync('rsync -avAXz --info=progress2 "/src" "/dest"');
我明白execSync返回命令的输出,我可以在执行后将其打印到控制台,但这样我没有"实时"输出...
推荐指数
解决办法
查看次数
CSS框阴影围绕自定义形状？
那里,
我需要创建一个看起来像这样的div:
截图http://imageshack.us/a/img19/8223/bubblep.png
到目前为止我想出的是:http: //jsfiddle.net/suamikim/ft33k/
.bubble {
position: relative;
width: 80px;
height: 160px;
border: 1px solid #33A7F4;
border-radius: 9px;
margin: 100px;
-webkit-box-shadow: 0px 0px 20px 2px #33A7F4;
-moz-box-shadow: 0px 0px 20px 2px #33A7F4;
-ms-box-shadow: 0px 0px 20px 2px #33A7F4;
-o-box-shadow: 0px 0px 20px 2px #33A7F4;
box-shadow: 0px 0px 20px 2px #33A7F4;
}
.bubble:after, .bubble:before {
content: ' ';
position: absolute;
width: 0;
height: 0;
border: 17px solid transparent;
right: 100%;
}
.bubble-left:before {
border-top-color: #33A7F4;
border-right-color: #33A7F4;
top: …推荐指数
解决办法
查看次数
iOS上的IFrame高度问题(手机游戏)
示例页面源:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Page</title>
</head>
<body>
<div class="main" style="height: 100%;">
<div class="header" style="height: 100px; background-color: green;"></div>
<iframe src="http://www.wikipedia.com"
style="height: 200px; width: 100%; border: none;"></iframe>
<div class="footer" style="height: 100px; background-color: green;"></div>
</div>
</body>
</html>
问题是,height中200px距离的IFrame内联样式是在移动Safari忽略:
另外,我想通过vanilla JavaScript动态更改IFrame的高度,而这些JavaScript根本无法使用以下代码:
document.getElementsByTagName('iframe')[0].style.height = "100px"
height根据开发工具正确更改样式的值,但它被忽略,因为IFrame的实际渲染高度不会改变.
这似乎只是移动Safari中的一个问题,并且在最新版本的桌面Safari,Firefox,Chrome,Androids WebView等上正常运行.
测试页:http://devpublic.blob.core.windows.net/scriptstest/index.html
Ps.:我在browserstack上使用各种设备对此进行了测试,并且还在那里截取了屏幕截图,因为我手头没有实际的iDevice.
推荐指数
解决办法
查看次数
Firefox糟糕的RegEx性能
我使用JavaScript解析器生成器JISON为我的用户创建的一些脚本创建解析器.最近我注意到Firefox上的解析过程比我的页面支持的任何其他浏览器(IE10,最新的Chrome和Opera)要慢很多.
在对生成的解析器的源代码进行深入挖掘之后,我将问题缩小到一行代码,该代码执行一些正则表达式来对代码进行解析.当然这条线经常被执行.
我创建了一个带有一些随机字符串(大约1300个字符)和一个非常通用的正则表达式的小测试用例.此测试用例测量执行正则表达式10000次所需的平均时间(JSFiddle上的工作示例):
$(document).ready(function() {
var str = 'asdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf aösldkfj ölkasjd flöaksjdf löask dfjkasdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf aösldkfj ölkasjd flöaksjdf löask dfjkasdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf aösldkfj ölkasjd flöaksjdf löask dfjkasdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf aösldkfj ölkasjd flöaksjdf löask dfjkasdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf aösldkfj ölkasjd flöaksjdf löask dfjkasdfasdfa asdfasdf asdf asdf asdfasödlfkja asldfkj asdölkfj aslödkjf …推荐指数
解决办法
查看次数
在IFrame中滚动ExtJS 5应用程序的问题
HY,
这是我的测试页面的样子:
蓝色区域是父页面,绿色区域是运行ExtJS应用程序的IFrame(内部带有标签的简单视口).
如果站点在触摸设备(IPad,Android平板电脑等)上执行,则无法通过IFrame(绿色区域)上的"擦除"来滚动页面.必须擦除蓝色区域才能滚动页面.
这在ExtJS v4.2.1中已经正常工作(参见下面的链接).
试验场:
https://skaface.leo.uberspace.de/ScrollTest/Ext510/(使用ExtJS v5.1.1无法按预期工作)
https://skaface.leo.uberspace.de/ScrollTest/Ext421/(按预期工作,同样代码,但使用ExtJS v4.2.1)
测试代码:
父站点(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="margin: 50px; background-color: blue;">
<iframe src="frame.html" width="100%" height="1400" style="border: none;"></iframe>
</body>
</html>
IFrame(frame.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%;">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="https://extjs.cachefly.net/ext/gpl/5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all-debug.css" …推荐指数
解决办法
查看次数
IFrame与Parent之间的跨文档消息传递问题
我有一个在"外国"页面(不同的域等)上的iframe内运行的应用程序.为了允许iframe和父进程之间的一些基本通信,我在父页面上加载了我的一些脚本并postMessage用来做一些跨文档消息传递.
大多数情况下,此通信按预期工作,但有时我会看到一些错误报告给我的错误跟踪工具,无法弄清楚它们发生的原因.
这是一些示例代码:
PluginOnParent.js
// ...
window.addEventListener('message', function(e) {
// Check message origin etc...
if (e.data.type === 'iFrameRequest') {
e.source.postMessage({
type: 'parentResponse',
responseData: someInterestingData
}, e.origin);
}
// ...
}, false);
// ...
AppInsideIFrame.js
// ...
var timeoutId;
try {
if (window.self === window.top) {
// We're not inside an IFrame, don't do anything...
return;
}
} catch (e) {
// Browsers can block access to window.top due to same origin policy.
// See http://stackoverflow.com/a/326076
// If this …推荐指数
解决办法
查看次数
按钮内的文件输入字段在Firefox中不起作用
我想input在我的页面上有一个样式文件字段,因此将其放在一个button完全覆盖的文件字段中,并通过将其opactiy设置为0使其不可见.
这种方法在最新版本的Chrome中运行良好,但Firefox(和IE)在单击按钮时不会打开文件对话框:
http://jsfiddle.net/ch8xxvez/3/
<button style="width: 100px; height: 100px; position: relative;">Upload button
<input type="file" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;"></input>
</button>
如果我button用a 替换元素,相同的代码可以工作,div但我真的想知道是否有一种方法可以使用button最新版本的IE(> = 10),FF,Chrome和Edge中的标记.
推荐指数
解决办法
查看次数
如何在 JS 项目中使用自定义类型
我正在一个 Electron 项目中使用checkjs: trueset in myjsconfig.json并在ProjectRoot/typings/index.d.ts.
我希望在所有 JS 文件中都可以使用这些类型。不幸的是，我必须手动引用它们：
如果没有手册参考，它将无法识别类型：
我的项目结构如下所示：
这是typings/index.d.ts的内容：
interface LauncherItem {
name: string,
icon: string,
cmd: string,
args: string,
}
interface AppConfig {
items: LauncherItem[],
appIconSize: number,
}
和jsconfig.json：
{
"compilerOptions": {
"target": "es6",
"checkJs": true
},
"typeAcquisition": {
"include": [
"./typings/index.d.ts"
]
},
"include": [
"**/*.js",
"*.d.ts"
]
}
不确定是否通常需要显式typeAcquisition和包含*.d.ts。它们只是我测试的结果，但显然不起作用......
推荐指数
解决办法
查看次数
Chrome不会在SVG中缓存图片
我刚刚发现Chrome不会缓存放置在SVG中的图像,如果它们的cache-control标题设置为no-cache.Firefox和IE10似乎忽略了这个设置.
我用静态SVG创建了一个小测试页面:
HTML:
<div style="width: 500px; text-align: center;">
<input id="move-left-btn" type="button" value="<<">
<input id="move-right-btn" type="button" value=">>">
</div>
<div class="svgwrapper" style="width: 500px; height: 250px; background-color: lightgrey;">
<svg id="svg" version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="250">
<g id="svggroup" class="transition-on" transform="matrix(0.2,0,0,0.2,80,35)">
<image width="1672" height="887" opacity="1" xlink:href="https://dl.dropboxusercontent.com/sh/q7htlj5h8qqfhjf/SVDuynM7R3/car.png"></image>
</g>
</svg>
</div>
使用Javascript:
$(document).ready(function() {
var curXPos = 80;
// Local test function which represent some server calls in my "real life" scenario
// Just updates the x-position in the transform matrix in this test …推荐指数
解决办法
查看次数
使用额外的减速器与在异步 thunk 中调度的优缺点
我对整个 React 和 Redux 生态系统相当陌生，我试图了解在使用 Redux 工具包时何时以及为何使用额外的减速器，而不是直接在异步 thunk 中分派操作。
最好用一个显示这两种解决方案的示例来解释：
版本 1：使用额外的减速器
auth.slice.ts
// ...
export const login = createAsyncThunk<LoginResponse, LoginData>(
'auth/login',
async ({ email, password }, thunkAPI) => {
const data = await AuthService.login(email, password);
// Extract user info from login response which holds other information as well
// in which we're not interested in the auth slice...
const userInfo = loginResponseToUserInfo(data);
LocalStorageService.storeUserInfo(userInfo);
// Return the whole login response as we're interested in the other data
// besides the …推荐指数
解决办法
查看次数
标签 统计
javascript ×6
iframe ×3
css ×2
html ×2
checkjs ×1
cross-domain ×1
css-shapes ×1
css3 ×1
extjs ×1
extjs5 ×1
firefox ×1
html5 ×1
ios ×1
iphone ×1
messaging ×1
node.js ×1
performance ×1
reactjs ×1
redux ×1
redux-thunk ×1
regex ×1
svg ×1