博客網(wǎng)站添加復(fù)制轉(zhuǎn)載提醒彈窗Html代碼

站如果是完全禁止右鍵（復(fù)制、另存為等）操作，對用戶來說體驗感會降低，但是又不希望自己的原創(chuàng)內(nèi)容直接被copy，今天飛飛和你們分享幾行復(fù)制轉(zhuǎn)載提醒彈窗Html代碼。

效果展示：

復(fù)制以下代碼，將其放在網(wǎng)站footer.php或者h(yuǎn)eader.php任意底部位置即可。

document.body.oncopy=function() {

swal("復(fù)制成功！", "若要轉(zhuǎn)載請保留原文鏈接，感謝支持！", "success");

};

</script>

通過這幾行代碼，我們可以在保護(hù)原創(chuàng)內(nèi)容的同時，不影響用戶體驗。當(dāng)然，除了添加復(fù)制轉(zhuǎn)載提醒彈窗之外，我們還可以通過其他方式來保護(hù)原創(chuàng)內(nèi)容，例如添加水印、限制轉(zhuǎn)載等等。總之，在權(quán)衡用戶體驗和版權(quán)保護(hù)時，我們需要尋找一個平衡點，既能夠保護(hù)自己的權(quán)益，又不會影響用戶的使用體驗。

感謝您的閱讀，服務(wù)器大本營助您成為更專業(yè)的服務(wù)器管理員！

些在線圖文編輯器不支持直接插入代碼塊，但可以直接粘貼 HTML 格式的高亮代碼塊。

花了一點時間研究了一下各家的編輯器，規(guī)則卻各不相同。有的要求代碼塊被包含于 <code> ... </code> 或者 <pre> <code> ... </code> </pre> , 有些要求 class 屬性里包含 "code" 關(guān)鍵詞，或者要求代碼塊里必須包含至少一個 <br> 。如果不符合這些要求，不是變成普通文本，就是丟失換行縮進(jìn)，或者丟失顏色樣式。

所以，這就難了。先得找個支持代碼高亮的編輯器，仔細(xì)地選擇并復(fù)制代碼塊，復(fù)制完還得編輯剪貼板里的 HTML 。這就不如干脆寫個轉(zhuǎn)換工具了。

因為瀏覽器操作系統(tǒng)剪貼板可能不太方便，下面用 aardio 寫一個工具軟件。

先看軟件成品演示：

軟件用法：

1、輸入編程語言名稱（支持自動完成）。
2、然后在輸入框中粘貼要轉(zhuǎn)換的編程代碼。
3、點擊「復(fù)制高亮代碼塊」按鈕。

然后我們就可以打開在線圖文編輯器直接粘貼生成的高亮代碼塊了。

下面是這個軟件的 aardio 源代碼：

import win.ui;
/*DSG{{*/
var winform=win.form(text="HTML 代碼塊生成工具 - 本工具使用 aardio 語言編寫";right=1055;bottom=674;bgcolor=16777215)
winform.add(
button={cls="button";text="復(fù)制高亮代碼塊";left=633;top=609;right=1000;bottom=665;bgcolor=16777215;color=14120960;db=1;dr=1;font=LOGFONT(h=-14);note="可在網(wǎng)頁編輯器直接粘貼";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 代碼塊生成工具 - 已復(fù)制高亮代碼塊到剪貼板，可在網(wǎng)頁直接粘貼";
            },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 創(chuàng)建工程，然后復(fù)制粘貼上面的代碼到 main.aardio 里面就可以直接運行，或生成獨立 EXE 文件：

這個軟件的原理：

1、首先通過 WebView2 調(diào)用 Prism.js 高亮代碼。為了可以內(nèi)存加載 Prism.js （支持生成獨立 EXE ），我寫了一個 aardio 擴(kuò)展庫 web.prism 。關(guān)于 WebView2 請參考：放棄 Electron，擁抱 WebView2！JavaScript 快速開發(fā)獨立 EXE 程序

2、因為 Prism.js 生成的 HTML 代碼塊都是使用 class 屬性指定樣式，所以我們需要調(diào)用 getComputedStyle 獲取最終渲染的字體顏色屬性。

3、最后在 JavaScript 里調(diào)用 aardio 函數(shù)處理生成的 HTML 代碼塊，aardio 的任務(wù)是將 HTML 修改為更合適直接粘貼的格式，并盡可能地處理各圖文編輯器的兼容問題。然后調(diào)用 win.clip.html 將處理好的 HTML 復(fù)制到系統(tǒng)剪貼板：

import win.clip.html;

var cb=win.clip.html();
cb.write(html);

然后只要愉快地粘貼代碼塊就可以。

如果是 aardio 代碼不需要用這個工具，在 aardio 編輯器里右鍵直接點『復(fù)制全部到 HTML 代碼塊』就可以了：

么是JS延遲加載？

JS延遲加載，也就是等頁面加載完成之后再加載JavaScript文件

為什么讓JS實現(xiàn)延遲加載？

js的延遲加載有助于提高頁面的加載速度。

Js延遲加載的方式有哪些？一般有以下幾種方式：

·defer屬性

·async屬性

·動態(tài)創(chuàng)建DOM方式

·使用jQuery的getScript方法

·使用setTimeout延遲方法

·讓JS最后加載

1、defer屬性

HTML 4.01為<script>標(biāo)簽定義了defer屬性。標(biāo)簽定義了defer屬性元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行標(biāo)簽定義了defer屬性。

用途：表明腳本在執(zhí)行時不會影響頁面的構(gòu)造。也就是說，腳本會被延遲到整個頁面都解析完畢之后再執(zhí)行在<script>元素中設(shè)置defer屬性，等于告訴瀏覽器立即下載，但延遲執(zhí)行

<!DOCTYPE html>
<html>
<head>
	<script src="test1.js" defer="defer"></script>
	<script src="test2.js" defer="defer"></script>
</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

說明：雖然<script>元素放在了<head>元素中，但包含的腳本將延遲瀏覽器遇到</html>標(biāo)簽后再執(zhí)行HTML5規(guī)范要求腳本按照它們出現(xiàn)的先后順序執(zhí)行。在現(xiàn)實當(dāng)中，延遲腳本并不一定會按照順序執(zhí)行defer屬性只適用于外部腳本文件。支持HTML5的實現(xiàn)會忽略嵌入腳本設(shè)置的defer屬性

2、async屬性

HTML5 為<script>標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。標(biāo)簽定義了async屬性。與defer屬性類似，都用于改變處理腳本的行為。同樣，只適用于外部腳本文件。

目的：不讓頁面等待腳本下載和執(zhí)行，從而異步加載頁面其他內(nèi)容。異步腳本一定會在頁面 load 事件前執(zhí)行。不能保證腳本會按順序執(zhí)行

<!DOCTYPE html>
<html>
	<head>
		<script src="test1.js" async></script>
		<script src="test2.js" async></script>
	</head>
<body>
<!--這里放內(nèi)容-->
</body>
</html>

async和defer一樣，都不會阻塞其他資源下載，所以不會影響頁面的加載。

缺點：不能控制加載的順序

3、動態(tài)創(chuàng)建DOM方式

//這些代碼應(yīng)被放置在</ body>標(biāo)簽前(接近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>

4、使用jQuery的getScript()方法

$.getScript("outer.js" , function(){	//回調(diào)函數(shù)，成功獲取文件后執(zhí)行的函數(shù)
	console.log(“腳本加載完成")
});

5、使用setTimeout延遲方法的加載時間延遲加載js代碼，給網(wǎng)頁加載留出更多時間

<script type="text/javascript" >
	function A(){
		$.post("/1ord/1ogin" ,{name:username,pwd:password},function(){
			alert("Hello");
		});
	}
	$(function (){
		setTimeout('A()', 1000);	//延遲1秒
	})
</script>

6、讓JS最后加載

把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度例如引入外部js腳本文件時，如果放入html的head中,則頁面加載前該js腳本就會被加載入頁面，而放入body中，則會按照頁面從上倒下的加載順序來運行JavaScript的代碼。所以我們可以把js外部引入的文件放到頁面底部，來讓js最后引入，從而加快頁面加載速度。

上述方法2也會偶爾讓你收到Google頁面速度測試工具的“延遲加載javascript”警告。所以這里的解決方案將是來自Google幫助頁面的推薦方案。

//這些代碼應(yīng)被放置在</body>標(biāo)簽前(接近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）復(fù)制上面代碼

6.2）粘貼代碼到HTML的標(biāo)簽前 (靠近HTML文件底部)

6.3）修改“defer.js”為你的外部JS文件名

6.4）確保文件路徑是正確的。例如：如果你僅輸入“defer.js”，那么“defer.js”文件一定與HTML文件在同一文件夾下。

注意：

這段代碼直到文檔加載完才會加載指定的外部js文件。因此，不應(yīng)該把那些頁面正常加載需要依賴的javascript代碼放在這里。而應(yīng)該將JavaScript代碼分成兩組。一組是因頁面需要而立即加載的javascript代碼，另外一組是在頁面加載后進(jìn)行操作的javascript代碼(例如添加click事件。

在線咨詢

上一篇：爬蟲實踐：爬取城市AQI實時報和日報數(shù)據(jù)
下一篇：js-頁面獲取數(shù)據(jù)

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商