mozilla

来自mozilla的定义： FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。 其中File对象可以是来自用户在一个 <input> 元素上选择文件后返回的 FileList 对象,也可以来自拖放操作生成的 DataTransfer 对象,还可以是来自在一个 HTMLCanvasElement 上执行 mozGetAsFile() 方法后返回结果。 重要提示： FileReader仅用于以安全的方式从用户（远程）系统读取文件内容 它不能用于从文件系统中按路径名简单地读取文件。 要在JavaScript中按路径名读取文件，应使用标准Ajax解决方案进行服务器端文件读取，如果读取跨域，则使用CORS权限。 Note: 此特性在 Web Worker 中可用。 https://developer.mozilla.org/zh-CN/docs/Web/API/FileReader URL.createObjectURL() 静态方法会创建一个 DOMString ，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。 Note: 此特性在 Web

效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/vjLQMM 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cJMkwH9 源代码下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/002-rectangular-rotating-loader-animation 代码解读 定义 dom，一个包含 3 个 span 的容器： <div class="loader"> <span></span> <span></span> <span></span> </div> 居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: black; } 设置容器的尺寸： .loader { width: 150px; height: 150px; position: relative; }

效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cdKMBTk 源代码下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/004-metallic-glossy-3d-button-effects 代码解读 在 dom 中定义一个容器： <div class="box">BUTTON</div> 容器居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; background-color: skyblue; } 设置按钮的 2d 样式，为了便于调整按钮尺寸，使用了变量： .box { background: linear-gradient(to right, gold, darkorange); color: white; --width: 250px; -

效果预览 按下右侧的“点击预览”按钮在当前页面预览，点击链接全屏预览。 https://codepen.io/zhang-ou/pen/GdrrZq 可交互视频教程 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https://scrimba.com/c/cWknNUR 源代码下载 请从 github 下载。 https://github.com/comehope/front-end-daily-challenges/tree/master/007-3d-text-marquee-effects 代码解读 定义 dom，包含2组重复的文字： <div class="box"> <div class="inner"> <span>Hello World</span> </div> <div class="inner"> <span>Hello World</span> </div> </div> 居中显示： html, body { height: 100%; display: flex; align-items: center; justify-content: center; } 设置容器的尺寸和文字样式： .box { display: flex; } .box .inner { width: 200px

目前很多插件不支持 Firefox 3.5 哦 1、Add N Edit Cookies 查看和修改本地的Cookie，Cookie欺骗必备。 下载： http://code.google.com/p/editcookie/downloads/list 2、User Agent Switcher 修改浏览器的User Agent，可以用来XSS。 下载： https://addons.mozilla.org/zh-CN/firefox/addon/59 3、RefControl 修改Referer引用，也可以用来XSS或者突破一些防盗 链。 下载： https://addons.mozilla.org/zh-CN/firefox/addon/953 4、Live HTTP Headers 记录本地的Get和Post数据，并可修改数据后重新提交。 下载： https://addons.mozilla.org/zh-CN/firefox/addon/3829 5、Poster 用来Post和Get数据。 下载： https://addons.mozilla.org/fr/firefox/addon/2691 6、HackBar 小工具包，包含一些常用的工具。(SQL injection,XSS,加密等) 下载： http://devels-playground.blogspot.com

I am using gulp with autoprefixer in my project, and I have to use backgrounds gradient like this: background: linear-gradient(#e98a00, #f5aa2f); but output is: background:-webkit-linear-gradient(#e98a00,#f5aa2f); background:linear-gradient(#e98a00,#f5aa2f); What wrong with me? Part of Gulpfile.js gulp.task('styles', function() { return gulp.src(['css/less/mainPage.less']) .pipe(plumber()) // .pipe(concat('base.scss')) .pipe(less()) .pipe(prefix([{ browsers: ['IE 8', 'IE 9', 'last 5 versions', 'Firefox 14', 'Opera 11.1'] }])) .pipe(minifyCSS({keepBreaks: true})) .pipe(gulp.dest('css')) .pipe

I've been working with the voice/speech synthesis on Chrome and then I realized Firefox doesn't allow it by default and special permissions must be granted. By reading this article I could make the test work: https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API Firefox desktop and mobile support it in Gecko 44+, without prefixes, and it can be turned on by flipping the media.webspeech.recognition.enable flag to true in about:config. The permissions settings/UI haven't yet been sorted out however, so permission can't be granted to use it by the user, so it

For example, [].map was "implemented in JavaScript 1.6." Is that an ES5 method? How does the 1.6 correlate to an ECMAScript version? There aren't really strict correspondences between the version numbers Mozilla uses and the ECMAScript standard's version numbers. There's a table on Wikipedia that might be what you're looking for -- you'll see that JavaScript 1.6 corresponds to ECMAScript 3 and then some additional extensions. [].map specifically was standardized in ECMAScript 5, but to my understanding, the feature was first introduced by Firefox before the ECMAScript 5 standard was even

I've got a webpage for reading books online. I'd like to save the position inside the document so when a user resumes his reading, he starts in the point where he previously was. I can get the scroll using things like window.pageYOffset, but this depends on the browser window size. In other words, if you make your window narrower, the same text will be at a different scroll (see the image for an example). So I need to come up with a window-size independent way of measuring scroll. Any ideas? Note: I only need this to work on mozilla based browsers. Thanks in advance If my assumption is right