關於桌面程式嵌入網頁UI端避坑的小提醒——.net+Miniblink實戰避坑
阿新 • • 發佈：2022-03-19
1、網頁顯示區邊框問題
這兩天稍微改進了一下我學明白類這個東西之前的屎山程式碼，把又臭又長還卡的GDI+圖片滾動欄刪掉了，用上了基於Miniblink的庫做滾動欄。好不容易搓好了滾動欄程式碼，上傳到伺服器，在Chrome瀏覽還算比較正常，但是一到生產環境上測試就出現了諸如此類的邊框和滾動條。
一開始以為是網頁上的尺寸寫錯了，結果改了半天尺寸，還是有邊框出現。於是我又開始懷疑Miniblink的問題，但是瀏覽Miniblink的官網的時候，是沒有這個白邊的！最後終於摸到網頁樣式這個罪魁禍首——body元素預設樣式就是有邊框的。最後只加上了一點程式碼就解決了：
<body style="overflow:hidden;margin:0;padding:0;">
2、滑鼠操作影響觀感
測試了之後偶然發現，滑鼠右鍵居然可以直接將滾動欄的圖片提取出來，這對於一個桌面端應用來說應該是不允許的，於是乎我給網頁加了一點指令碼（基於jQ，並且還順手連帶禁止了文字複製）：
//禁止對圖片操作 $("img").on("contextmenu",function(){return false;}); $("img").on("dragstart",function(){return false;}); //禁止文字操作 $(document).bind("contextmenu copy selectstart", function() { returnfalse; });
這次的改用Web UI讓我覺得發現問題還是應該多多發散下思維，多去找找原因才能更好解決問題。只是個隨筆而已，差不多就這樣啦~