整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
站如果是完全禁止右键（复制、另存为等）操作，对用户来说体验感会降低，但是又不希望自己的原创内容直接被copy，今天飞飞和你们分享几行复制转载提醒弹窗Html代码。
效果展示：
复制以下代码，将其放在网站footer.php或者header.php任意底部位置即可。
<!-- 复制提醒开始 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.css" />
<script type="text/javascript" src="https://cdn.bootcss.com/sweetalert/1.1.3/sweetalert.min.js"></script>
<script>
document.body.oncopy=function() {
swal("复制成功！", "若要转载请保留原文链接，感谢支持！", "success");
};
</script>
<!-- 复制提醒结束 -->
通过这几行代码，我们可以在保护原创内容的同时，不影响用户体验。当然，除了添加复制转载提醒弹窗之外，我们还可以通过其他方式来保护原创内容，例如添加水印、限制转载等等。总之，在权衡用户体验和版权保护时，我们需要寻找一个平衡点，既能够保护自己的权益，又不会影响用户的使用体验。
感谢您的阅读，服务器大本营助您成为更专业的服务器管理员！
些在线图文编辑器不支持直接插入代码块，但可以直接粘贴 HTML 格式的高亮代码块。
花了一点时间研究了一下各家的编辑器，规则却各不相同。有的要求代码块被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 属性里包含 "code" 关键词，或者要求代码块里必须包含至少一个 <br> 。如果不符合这些要求，不是变成普通文本，就是丢失换行缩进，或者丢失颜色样式。
所以，这就难了。先得找个支持代码高亮的编辑器，仔细地选择并复制代码块，复制完还得编辑剪贴板里的 HTML 。这就不如干脆写个转换工具了。
因为浏览器操作系统剪贴板可能不太方便，下面用 aardio 写一个工具软件。
先看软件成品演示：
软件用法：
1、输入编程语言名称（支持自动完成）。
2、然后在输入框中粘贴要转换的编程代码。
3、点击「复制高亮代码块」按钮。
然后我们就可以打开在线图文编辑器直接粘贴生成的高亮代码块了。
下面是这个软件的 aardio 源代码：
import win.ui;
/*DSG{{*/
var winform=win.form(text="HTML 代码块生成工具 - 本工具使用 aardio 语言编写";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="复制高亮代码块";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在网页编辑器直接粘贴";z=4};
cmbLangs={cls="combobox";left=262;top=625;right=446;bottom=651;db=1;dl=1;edge=1;items={"javascript"};mode="dropdown";z=2};
editCode={cls="edit";left=1;top=4;right=1052;bottom=599;db=1;dl=1;dr=1;dt=1;edge=1;hscroll=1;multiline=1;vscroll=1;z=5};
static={cls="static";text="请选择语言：";left=70;top=629;right=248;bottom=649;align="right";db=1;dl=1;transparent=1;z=3};
webCtrl={cls="custom";text="自定义控件";left=8;top=10;right=1048;bottom=604;db=1;dl=1;dr=1;dt=1;hide=1;z=1}
)
/*}}*/
import web.view;
var wb=web.view(winform.webCtrl);
import win.clip.html;
wb.export({
onHighlight=function(html,background,foreground){
html=`<pre class="code" style="overflow-x:auto;text-align:left;box-shadow: rgba(216, 216, 216, 0.5) 0px 0px 0px 1px inset;padding:10px;border-radius:3px;background-color:`+background+`;color:`+foreground+`;white-space:pre;word-break:break-all;display:block;font-size:14px;font-style:normal;font-variant-ligatures:normal;font-variant-caps: normal;font-family: "Consolas", Consolas, "Liberation Mono", Menlo, Courier, monospace"><code>`
+ html + `</code></pre>`;
html,count=string.replace(html,'\n',"<br>");
if(!count){
html=string.replace(html,`\</code\>\</pre\>$`,`<br></code></pre>`);
}
var cb=win.clip.html();
cb.write(html);
winform.setTimeout(
function(){
winform.editCode.show(true);
winform.webCtrl.show(false);
winform.text="HTML 代码块生成工具 - 已复制高亮代码块到剪贴板，可在网页直接粘贴";
},1000);
};
setLanguages=function(langs){
winform.languages=langs;
}
})
winform.cmbLangs.onEditChange=function(){
var text=string.lower(winform.cmbLangs.text);
var items=table.filter( winform.languages : {}, lambda(v) string.startWith(v,text) );
winform.cmbLangs.autoComplete(items);
}
winform.cmbLangs.editBox.disableInputMethod();
import web.prism;
import wsock.tcp.asynHttpServer;
var httpServer=wsock.tcp.asynHttpServer();
httpServer.run(web.prism,{
["/index.html"]=/*****
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link href="prism.css" rel="stylesheet" />
</head>
<body>
<pre id="code-pre"><code id="code" class="lang-javascript"></code></pre>
<script src="prism.js"></script>
<script>
function computedColorStyle(element, options={}) {
Array.prototype.forEach.call(element.children,child=> {
computedColorStyle(child, options);
});
const computedStyle=getComputedStyle(element);
element.style["color"]=computedStyle.getPropertyValue("color");
}
highlight=function(code,language){
var html=Prism.highlight(code, Prism.languages[language], language);
var codeEle=document.getElementById("code");
codeEle.innerHTML=html;
computedColorStyle(codeEle);
const computedStyle=getComputedStyle(codeEle);
onHighlight(codeEle.innerHTML
,getComputedStyle(document.getElementById("code-pre")).getPropertyValue("background-color")
,computedStyle.getPropertyValue("color"));
}
setLanguages( Object.keys(Prism.languages) );
</script>
</body>
</html>
*****/
});
wb.go( httpServer.getUrl("/index.html"));
winform.button.oncommand=function(id,event){
winform.text="HTML 代码块生成工具 - 本工具使用 aardio 语言编写"
winform.editCode.show(false);
winform.webCtrl.show(true);
wb.xcall("highlight",winform.editCode.text,winform.cmbLangs.text);
}
winform.show();
win.loopMessage();打开 aardio 创建工程，然后复制粘贴上面的代码到 main.aardio 里面就可以直接运行，或生成独立 EXE 文件：
这个软件的原理：
1、首先通过 WebView2 调用 Prism.js 高亮代码。为了可以内存加载 Prism.js （ 支持生成独立 EXE ），我写了一个 aardio 扩展库 web.prism 。关于 WebView2 请参考：放弃 Electron，拥抱 WebView2！JavaScript 快速开发独立 EXE 程序
2、因为 Prism.js 生成的 HTML 代码块都是使用 class 属性指定样式，所以我们需要调用 getComputedStyle 获取最终渲染的字体颜色属性。
3、最后在 JavaScript 里调用 aardio 函数处理生成的 HTML 代码块，aardio 的任务是将 HTML 修改为更合适直接粘贴的格式，并尽可能地处理各图文编辑器的兼容问题。然后调用 win.clip.html 将处理好的 HTML 复制到系统剪贴板：
import win.clip.html;
var cb=win.clip.html();
cb.write(html); 然后只要愉快地粘贴代码块就可以。
如果是 aardio 代码不需要用这个工具，在 aardio 编辑器里右键直接点『 复制全部到 HTML 代码块 』就可以了：
么是JS延迟加载？
JS延迟加载，也就是等页面加载完成之后再加载JavaScript文件
为什么让JS实现延迟加载？
js的延迟加载有助于提高页面的加载速度。
Js延迟加载的方式有哪些？一般有以下几种方式：
·defer属性
·async属性
·动态创建DOM方式
·使用jQuery的getScript方法
·使用setTimeout延迟方法
·让JS最后加载
HTML 4.01为<script>标签定义了defer属性。标签定义了defer属性元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行标签定义了defer属性。
用途：表明脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕之后再执行在<script>元素中设置defer属性，等于告诉浏览器立即下载，但延迟执行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" defer="defer"></script>
<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>说明：虽然<script>元素放在了<head>元素中，但包含的脚本将延迟浏览器遇到</html>标签后再执行HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中，延迟脚本并不一定会按照顺序执行defer属性只适用于外部脚本文件。支持HTML5的实现会忽略嵌入脚本设置的defer属性
HTML5 为<script>标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。标签定义了async属性。与defer属性类似，都用于改变处理脚本的行为。同样，只适用于外部脚本文件。
目的：不让页面等待脚本下载和执行，从而异步加载页面其他内容。异步脚本一定会在页面 load 事件前执行。不能保证脚本会按顺序执行
<!DOCTYPE html>
<html>
<head>
<script src="test1.js" async></script>
<script src="test2.js" async></script>
</head>
<body>
<!--这里放内容-->
</body>
</html>async和defer一样，都不会阻塞其他资源下载，所以不会影响页面的加载。
缺点：不能控制加载的顺序
//这些代码应被放置在</ body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtOnload() {
varelement=document .createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if (window. addEventListener)
window.addEventListener("load" ,downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload) ;
else
window. onload=downloadJSAtOnload;
</script>$.getScript("outer.js" , function(){ //回调函数，成功获取文件后执行的函数
console.log(“脚本加载完成")
});<script type="text/javascript" >
function A(){
$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
alert("Hello");
});
}
$(function (){
setTimeout('A()', 1000); //延迟1秒
})
</script>把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度例如引入外部js脚本文件时，如果放入html的head中,则页面加载前该js脚本就会被加载入页面，而放入body中，则会按照页面从上倒下的加载顺序来运行JavaScript的代码。所以我们可以把js外部引入的文件放到页面底部，来让js最后引入，从而加快页面加载速度。
上述方法2也会偶尔让你收到Google页面速度测试工具的“延迟加载javascript”警告。所以这里的解决方案将是来自Google帮助页面的推荐方案。
//这些代码应被放置在</body>标签前(接近HTML文件底部)
<script type="text/javascript">
function downloadJSAtonload() {
var element=document.createElement("script");
element.src="defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent )
window.attachEvent("onload", downloadJSAtonload);
else window.onload=downloadJSAtOnload;
</script>这段代码意思等到整个文档加载完后，再加载外部文件“defer.js”。
使用此段代码的步骤：
6.1）复制上面代码
6.2）粘贴代码到HTML的标签前 (靠近HTML文件底部)
6.3）修改“defer.js”为你的外部JS文件名
6.4）确保文件路径是正确的。例如：如果你仅输入“defer.js”，那么“defer.js”文件一定与HTML文件在同一文件夹下。
注意：
这段代码直到文档加载完才会加载指定的外部js文件。因此，不应该把那些页面正常加载需要依赖的javascript代码放在这里。而应该将JavaScript代码分成两组。一组是因页面需要而立即加载的javascript代码，另外一组是在页面加载后进行操作的javascript代码(例如添加click事件。
*请认真填写需求信息，我们会在24小时内与您取得联系。
