中操作剪贴板,不要直接使用元素的
分类:微服架构

以下代码只可以在 IE 中运营:

那八种办法中,应该说独有首先种是正统,因为其余两种总有些不妥,比方无法运转alert,当然其余三种也有独特之处的。

从前(相当久从前了),JavaScript 可以私行地读写剪贴板,使用 clipboardData 对象。但是以往十二分了,因为这是个漏洞:外人能够偏巧地读写剪贴板,可以偏巧地动用 Ajax 上传播服务器,那就也正是搜聚客户隐秘了。

谷歌(Google卡塔尔(قطر‎ 的 jsapi 有个 load 成效,便是我们只须要引进一个loader.js,然后再实践 load 函数,就足以一贯运用相应的 application 的 api,那跟以前是每使用多少个 api 就需求接受 script 引进三个 js 文件比较,不仅仅利于了非常多,而很有利安排和掩护。

document.getElementById("cftea").name

法一、创建 script

目前还是能够怎么办啊?

下边说说肖似的贯彻形式,本例有八个文件:叁个 loader.js,三个实际的 application 的 api 文件,一个应用页面。

要增加宽容性,得用下边包车型大巴:

var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", "foo.js");
document.getElementById("s1").appendChild(script);

读取剪贴板

loader.js

document.getElementById("cftea").getAttribute("name")

法二、直接用 js 的 write

唯有客户在粘贴的时候(包蕴在网页空白区域按 Ctrl + P),才得以读取剪贴板。

function Cftea()
{
}
 
function Cftea_load(applicationName, applicationVersion)
{
    if (applicationName == "app1")
    {
        if (applicationVersion == "1.0")
        {
            Cftea_loadScript("app1.js");
        }
    }
    else if (applicationName == "app2")
    {
        if (applicationVersion == "1.0")
        {
            Cftea_loadScript("app2.js");
        }
    }
}
 
function Cftea_loadScript(url)
{
    var script = document.createElement("script");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", url);
   
    document.body.appendChild(script);
}
 
Cftea.prototype.load = Cftea_load;
Cftea.prototype.onApp1LoadComplelte = null;
Cftea.prototype.onApp2LoadComplelte = null;
 
var cftea = new Cftea();

<div id="s1">
<script type="text/javascript">
<!--
document.write("<"+"script type='text/javascript'>var a = 123;document.write(a);<"+"/script>");
// 或先用 escape 编码
// document.write(unescape("%3Cscript%20type%3D%27text/javascript%27%3Evar%20a%20%3D%20123%3Bdocument.write%28a%29%3B%3C/script%3E"));
// 或直接引用文件
//document.write("<"+"script type='text/javascript' src='foo.js'><"+"/script>");
//-->
</script>
</div>

document.addEventListener("paste", function (e) { alert(e.clipboardData.getData("text")); });

app1.js

法三、直接用 innerHTML

写入剪贴板

function Cftea_App1()
{
    this.name = "app1";
}
 
Cftea.prototype.app1 = new Cftea_App1(卡塔尔; //为 Cftea 增添成员
cftea.onApp1LoadComplelte(卡塔尔(قطر‎; //触发读取达成事件

document.getElementById("s1").innerHTML = "<"+"script type='text/javascript'>var a = 123; document.write(a);<"+"/script>"

附近读取剪贴板。

app2.js

本条东西最大的主题素材,正是哪些让 innerHTML 的脚本段跑起来。

document.addEventListener("copy", function (e) { e.clipboardData.setData("text", "www.itpow.com"); alert(e.clipboardData.getData("text")); });

function Cftea_App2()
{
    this.name = "app2";
}
 
Cftea.prototype.app2 = new Cftea_App2(卡塔尔; //为 Cftea 扩展成员
cftea.onApp2LoadComplelte(卡塔尔; //触发读取完成事件

法四、用 innerHTML 转移

弹出了 cftea.com,就像水到渠成了,然后假如大家是复制到文本框中,大家会意识,文本框中的内容并非cftea.com,也正是说这里写入的剪贴板只限于这一个事件之中接纳,脱离了之后,仍为系统的剪贴板内容。有人试图加上 event.preventDefault(卡塔尔; 阻止系统复制,那是用空想来欺骗别人的。

使用页面

<div id="s1"></div>
<div id="s2">
<script type="text/javascript">
document.write("cftea");
alert("cftea");
</script>
</div>
<script type="text/javascript">
<!--
document.getElementById("s1").innerHTML = document.getElementById("s2").innerHTML;
//-->
</script>

阻挡粘贴行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
 
<html xmlns=";
<head>
    <title>api</title>
</head>
<body>
<div style="height:50px;"></div>
<div id="guestbook"></div>
 
<script type="text/javascript" src="loader.js"></script>
<script type="text/javascript">
<!--
cftea.onApp1LoadComplelte = function ()
{
    alert("app1 读取实现,可以行使 cftea.app1 对象。rncftea.app1.name=" + cftea.app1.name);
}
 
cftea.onApp2LoadComplelte = function ()
{
    alert("app2 读取实现,能够应用 cftea.app2 对象。rncftea.app2.name=" + cftea.app2.name);
}
 
cftea.load("app1", "1.0");
cftea.load("app2", "1.0");
-->
</script>
 
</body>
</html>

和法三差别,这种气象下 innerHTML 的脚本会实施,忧愁的是,因为 s1、s2中有平等的本子,所以一定于施行了四回这几个代码,这种措施在松手广告中用得非常多,让 s2 及 js 代码在最后,然后使用 innerHTML 将广告代码展现在 s1 这几个梦想的任务上。

往文本框中粘内容,文本框结果是 www.itpow.com,实际不是剪贴板中的内容。

可以见见,在读取了相应的 application 的 api 之后,全局对象 cftea 就机关扩张对应的成员,可以直接使用该对象。

<input type="text" id="t1"> <script type="text/javascript"> //复制 document.onkeydown = function (e) { if (e.ctrlKey && e.keyCode == 86) { // ctrl + V var t1 = document.getElementById("t1"); t1.value = "www.itpow.com"; return false; } }; </script>

高等获取剪贴板内容

document.addEventListener("paste", function (e) { for (var i = 0; i < e.clipboardData.items.length; i++) { var item = e.clipboardData.items[i]; if (item.kind == "string") { alert(item.type); item.getAsString(function (str) { alert(str); }); } } });

如上代码,仿佛与前方最简便的代码没差别,不过风流洒脱旦你复制网页,就能有分别了,它有七个item,多少个是删除 HTML 的文件,二个是带 HTML 标签的剧情。

再有有的人讲复制文件、复制图片(比方 Photoshop 中的图片),也会被读取到,只是 kind 不是“string”罢了,可是事实上是读取不到文件、图片的。

本文由10bet手机官网发布于微服架构,转载请注明出处:中操作剪贴板,不要直接使用元素的

上一篇:没有了 下一篇:浏览器预览PHP文件时顶部出现空白影响布局分析原因及解决办法,8文件时顶部产生空行的
猜你喜欢
热门排行
精彩图文