Accessing the System Clipboard with JavaScript

Chrome DOM Flash HTML Java JavaScript Linux float inline 剪切板

Origin Post: https://brooknovak.wordpress.com/2009/07/28/accessing-the-system-clipboard-with-javascript/

I am developing an API written in JavaScript for a project which requires the ability to copy data to, and retrieve data from, a clipboard within a web browser. A simple/common problem definition – but due to tight browser security, finding a solution is a bit of a nightmare. This article outlines and discusses a number of approaches for implementing a clipboard feature into your JavaScript applications.

The Ideal JavaScript Clipboard Interface

The concept of the “clipboard” is simple; it is essentially a place for storing and retrieving a single unit/piece of cloned data. The code snippet below describes this clipboard concept in terms of a JavaScript interface.

Clipboard = {
    copy : function(data) {
        //... implemention …
    },
     getData : function() {
        // … implementation …
     }
};

A simple concept, a self explanatory interface. However, the description above is vague; it does not state where “the clipboard” resides, nor does it mention if there can be more than one clipboard.

Multiple Clipboards

Unfortunately there can be more than one clipboard present. There is one “System clipboard” present when a user is logged into their profile/account (some strange people might install/configure some features on their OS to support multiple system clipboards). Ideally, all applications should use the system clipboard when copying and pasting so its users can copy and paste between all applications. However this is not always the case. For example, Cygwin uses its own clipboard for Cygwin applications and unless the user explicitly turns on a clipboard integration option, the user cannot copy and paste between Cygwin applications and non-Cygwin applications.

The Web’s Sandbox Environment

Web applications run in a sandbox environment to prevent malicious scripts from infecting a visitor’s computer. The sandbox environment restricts access to system resources, such as the file system, and unfortunately, the system clipboard. Check out this article for one example why the system clipboard is a restricted resource. Fortunately restrictions for accessing the system clipboard can be overcome. There are many approaches for accessing the system clipboard – each approach has its own trade-offs.

Internet Explorer’s clipboardData Object

Microsoft’s Internet Explorer family makes life very easy to access the system clipboard. To set the system clipboard’s text, just use the clipboardData object. Here is an example:

var didSucceed = window.clipboardData.setData('Text', 'text to copy');

To access the system’s clipboard data (in a textual format) you simply invoke:

var clipText = window.clipboardData.getData('Text');

The first time the clipboardData object is accessed IE will prompt the user to allow the script to access the system clipboard (note: if you run the script locally IE does not bother with the confirmation and automatically allows it). IE version 6 and below will not bother asking the users (unless they have some non-default security features set to a “high level”). We cannot assume that users will choose to allow the script to access the system clipboard. If they decline, the clipboardData.setData method returns false. Unfortunately the clipboardData.getData method is vague: as it returns an empty string if the user chooses to decline. This is ambiguous since the system clipboard’s contents could actually be empty! Ideally it would return null. You could either always assume that empty string is a signal for failure to access the clipboard and try use a different method (read on), or you could attempt to verify that it was a failure:

var clipText = window.clipboardData.getData('Text');
if (clipText == “”) { // Could be empty, or failed
    // Verify failure
    if (!window.clipboardData.setData('Text', clipText))
        clipText = null;
}

Note: the verification method will not display two prompts, since the first prompt will be remembered for the session.

常见包管理与构建工具列表

NPM Bower Grunt Makefile Gem Bundle

包管理和构建系统是现代的软件开发团队中必不可少的工具,也是Linux软件系统的常见组织方式。 现代编程语言大多给出了自己专用的包管理和构建系统,那么本文便来总结一下小编用过的那些包管理和构建系统。

JavaScript

服务器端 Javascript 通常使用NPM作为依赖管理工具。

  • 通过NPM提供的npm命令来进行依赖的下载、升级和移除。
  • 通过package.json来定义软件包的元信息、开发依赖(开发或测试需要)、部署依赖(运行时需要)。
  • 依赖递归地存储在node_modules中。
  • 依赖在项目之间是隔离的,全局安装(-g)会使它成为命令行工具而不是全局依赖。

    递归的依赖下载风格使得NPM的缓存及其重要。缓存位于~/.npm下,这里保存这.tgz格式的包文件。

JavaScript 通常使用 Grunt 进行构建。

  • Grunt通过插件来完成任务,每个插件相当于Makefile的一个命令。
  • Grunt任务定义在Gruntfile.js中。
  • NPM提供了众多的Grunt插件,当然你也可以手写。
  • Grunt任务继承了JavaScript的异步特性。

前端 lib

前端 lib 可以通过 Bower 来下载。Bower 不仅可以下载已注册的软件包,还可以下载Github Repo,甚至是一个文件的URL。

  • 通过bower命令进行依赖管理。
  • bower.json定义了软件包的元信息与依赖。
  • 依赖所在路径可以在bower.json中进行设置。
  • Bower只是一个命令行工具,你需要在正确的路径执行Bower命令。

Bower可以灵活地下载各种依赖,但它的缺点也是明显的:未注册的软件包往往包含冗余的非生产环境的代码,有时甚至需要手动构建。

CSS Display 属性与盒模型

CSS Chrome HTML inline inline-block 盒模型 IE

因为HTML流式文档的特性,页面布局往往是新手最为头疼的问题之一。 每个HTML元素都会渲染为一个Box,可分为inline Box和block Box。 根据display属性的不同,Box的呈现方式又有所不同。 本文首先引入CSS盒模型,然后通过不同的display属性分别介绍Box常见的呈现方式。

Box Sizing:元素大小的计算方式

在HTML中,任何HTML元素都会被呈现为一个矩形。该矩形由内容、内边距、边框、外边距构成。举个例子:

<style>
.box-demo{
  width: 100px;
  height: 100px;
  border: 50px solid green;
  padding: 30px;
  margin: 50px;
  background: yellow;
}
</style>
<div class="box-demo"></div>

上述的<div>中,内容、边距与边框如下图所示:

  • 黄色的背景作用于内容内边距构成的矩形,其宽高为160px:宽度100px+两侧的内边距30pxX2;
  • 绿色部分为边框,宽度为50px
  • 与浏览器边框的距离为外边距,宽度为50px

例子中width属性定义的是内容的宽度,不包含边距、边框。然而在IE中width定义的是内容+内边距+边框的宽度。 这是由box-sizing属性来定义的,前者的默认值为content-box',后者的默认值为border-box`。

常见Linux命令

Bash C++ Linux Socket awk grep kill sed 内存 磁盘 路由 进程 正则表达式

这是一篇手册文章,总结了小编(曾经)常用的linux命令,以及它们的一些常用参数和场景。更新中……

source

执行某个文件,效果等同于.,都是在当前进程的上下文执行。

bash

以bash执行某个文件,作为子进程。

-x 参数可以查看调试信息。

gdb

用来调试C程序,打开一个调试:

gdb a.out

调试命令

break 16        # 断点行
break func      # 断点函数
info break      # 打印断点
        
r               # run
n               # next
c               # continue
p i             # print i
bt              # 函数堆栈
finish          # 退出函数
q               # 退出GDB

${}

${str%.txt}     # 最短匹配末尾.txt并删除
${str%%.txt}    # 最长匹配末尾.txt并删除
${str#.txt}     # 最短匹配开始.txt并删除
${str##.txt}    # 最长匹配开始.txt并删除

该表达式支持通配符

awk

awk 'pattern {action}'
pattern(all by default) BEGIN, END
action(print by default)
builtin variables
NR:       已输入记录的条数。
NF:       当前记录中域的个数。记录中最后一个域可以以$NF的方式引用。
FILENAME: 当前输入文件的文件名。
FS:       域分隔符,用于将输入记录分割成域。其默认值为“空白字符”,即空格和制表符。FS可以替换为其它字符,从而改变域分隔符。
RS:       当前的记录分隔符。默认状态下,输入的每行都被作为一个记录,因此默认记录分隔符是换行符。
OFS:      输出域分隔符,即分隔print命令的参数的符号。其默认值为空格。
ORS:      输出记录分隔符,即每个print命令之间的符号。其默认值为换行符。
OFMT:     输出数字格式(Format for numeric output),其默认值为"%.6g"。
%0:       整个记录
%n:       第n个记录

Gnuplot 笔记

Bash Linux Windows X11 sed 异常 运算符 LaTeX

gnuplot是一个免费的命令行的绘图软件,在Linux,Windows,OSX等平台都有支持, 虽然叫做gnuplot但它并未使用GPL协议,而是使用自己的开源协议发布(感谢goodgoodlivetodown网友勘误)。 小编曾用它绘制了毕业论文中数百张复杂的脉冲星检测分析图。现在总结一下它的使用方法备忘。

Gnuplot is a portable command-line driven graphing utility for Linux, OS/2, MS Windows, OSX, VMS, and many other platforms. The source code is copyrighted but freely distributed (i.e., you don’t have to pay for it). It was originally created to allow scientists and students to visualize mathematical functions and data interactively, but has grown to support many non-interactive uses such as web scripting. It is also used as a plotting engine by third-party applications like Octave. Gnuplot has been supported and under active development since 1986. –Gnuplot

安装

gnuplotgnuplot-x11(可输出至X11)

帮助

$ gnuplot
gnuplot> help some_command

示例

# 文件
set term postscript eps enhanced size 3.7,5 #enhanced 使用增强文本,size 图的大小(英寸),terminal默认为wxt(X11)
set output "psr.eps"                        # 输出文件名

# 坐标轴
set xlabel "Period (s)"                     # x轴label
set logscale x                              # 设x轴为对数坐标
set xtics 1e-9,-1000,1e-24                  # x轴标度范围
# set xtics (2,4,6,8,10)
set xr [0.001:20]                           # x轴范围
set ydata time                              # 设y轴数据为时间
set timefmt "%H:%M:%S"                      # 设置时间格式
set format y "%g{/Symbol \260}"             # y轴标度格式

# 标注
set key 0.01,100                            # legend位置
# unset key                                 # 取消legend
set arrow from 0.1,2 to 0.2,3               # 箭头
set label "peak" at 0.01,10 rotate by 10    # 标签

# 变量
a=3*2**3  

# 数据文件作图
plot "a.dat" using 1:2 title 'relation' with points pointtype 6 linetype rgb "red" pointsize 1,\ 
# 函数做图
plot x**2    using 1:2 title 'xxxxxxxx' with line linetype 5    

Django 搭建过程记录

Bash Django Github Python SQL 数据库

2011年小编第一次想做Web开发于是找到了Django,因为完全不懂数据库而以失败告终。 2013年小班再次拿出Django,终于开发了小编的第一个Web站点(多用户博客:God Notes)。 最初部署在BAE上,现在已经打包封存在Github了:https://github.com/harttle/godnotes 本文记录了小编的第一个Django应用是如何开始的。

导航: 上一页 下一页

🔝