（25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何調用javaScript
（25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何調用javaScript
2018年09月29日 22:58:20 中國銀行之路在腳下 閱讀數：11 個人分類： C++ Builder(uniGUI WEB控件) 版權聲明：本文為博主原創文章，未經博主允許不得轉載。 https://blog.csdn.net/dlboy2018/article/details/82903680(中行雷威2018.9.29)
（同一個世界，同一個夢想，交流學習C++Builder XE10，傳承c++builder的魅力！歡迎各地朋友加入我的QQ群484979943,進群密碼“BCB”，同時也請將該群號廣為宣傳，希望能夠廣集各方高手，共同進步。如需下載開發工具及源代碼請加入我的QQ群。）
【閱讀倡議】
1、有問題請留言;
2、沒問題請點贊;
3、看連載請加群;
4、下源碼請加群;
【開發工具】
1、C++Builder10.2.3 tokyo
2、FMSoft_uniGUI_Complete_Professional_1.10.0build1471（正版）
一、需求
最近在開發一個web聊天工具，想做一個聊天信息交互小窗口，原來我習慣用UniMemo，但是UniMemo不支持超文本鏈接，因此首次嘗試使用UniHTMOMemo控件。
二、用法
拖兩個UniHTMLMemo控件到MainForm窗口上，UniHTMLMemo1用於顯示交互信息，UniHTMLMemo3用於輸入文字，如下圖所示，大家不需要關註其他控件。
1、發送文字消息
if(UniHTMLMemo3->Text.Length()==0)
{
ShowMessageN("親，你還沒有輸入聊天信息呢！");
UniHTMLMemo3->SetFocus();
return;
}
if(UniHTMLMemo3->Text.Length()>450)
{
ShowMessageN("親，聊天信息太長啦，限制長度450個字符呢！");
UniHTMLMemo3->SetFocus();
return;
}
UniHTMLMemo1->Lines->Add("<p>"+UniHTMLMemo3->Text);//發送文字
UniHTMLMemo3->Lines->Clear();//發送文字後清空輸入框
在這裏你會發現我在發送文字處增加了“<p>”，那是因為如果不增加這個，接收窗口顯示時會把多次信息鏈接到一起，沒有換行。
2、發送文件鏈接
destPath=“fileHome” 是程序運行根目錄到文件存放的子目錄
fileName="abc.doc" 是文件名字
UniHTMLMemo1->Lines->Add("<p>你給["+toUserName+"]發送了一個文件");
UniHTMLMemo1->Lines->Add("<a href=\""+destPath+"/"+fileName+"\" target=\"_blank\">"+fileName+"</a>");
UniHTMLMemo3->Lines->Clear();
註意：超鏈接串是否正確，將訪問地址放到瀏覽器url裏，如果能打開下載就是正確了。本例子可以在瀏覽器中輸入http://127.0.0.1/fileHome/abc.doc驗證文件鏈接是否正確。
3、解決滾屏問題
也許是uniHTMLMemo的BUG，uniMemo在不斷增加新的消息時會自動滾屏，但是UniHTMOMemo不會，可在發完消息後和收到消息後添加調用javaScript函數解決。
/*HTMLMemo好友聊天滾屏*/
UniSession->AddJS("Ext.defer(function(){var me="+ UniHTMLMemo1->JSName +".iframeEl.el.dom; me.contentWindow.scrollTo(0, me.contentDocument.scrollingElement.scrollHeight)}, 200);");
4、輸入長度限制問題
該控件沒有了MaxLength屬性，可以在ClientEvents的UniEvents的beforeinit事件中實現
function beforeInit(sender, config)
{
config.enforceMaxLength=true;
config.maxLength=450;
}
本例子介紹了一種程序中添加調用js代碼的一種調用javaScript的方式，下一例子將介紹uniGUI調用js文件的調用方式。
一、需求
最近在開發一個web版聊天工具，如果瀏覽器最小化後，進來消息如何顯示告知呢？經unigui中文群-總群（QQ241140802）【smartSoft】和【支付寶微信小程序開發】兩位高手指點，通過向瀏覽器推送消息，實現了顯示器右下角的消息彈屏功能。
二、實現
1、將消息推送功能編寫到一個javaScript文件中，本例子放在執行代碼同級別目錄下的javaScript目錄下，名稱為smartChatServer.js，內容如下：
function notifyMe(msg) {
if (!("Notification" in window)) {
alert("你的瀏覽器不支持消息通知功能！");
}
else if (Notification.permission === "granted") {
var notification = new Notification(msg);
notification.iconurl = ‘‘;
autoClose(notification);
}
else if (Notification.permission !== ‘denied‘) {
Notification.requestPermission(function (permission) {
if (!(‘permission‘ in Notification)) {
Notification.permission = permission;
}
if (permission === "granted") {
var notification = new Notification(msg);
}
});
}
}
function autoClose(notification) {
if (typeof notification.time === ‘undefined‘ || notification.time <= 0) {
notification.close();
} else {
setTimeout(function () {
notification.close();
}, notification.time);
}
notification.addEventListener(‘click‘, function () {
notification.close();
}, false)
}
2、js文件調用
在ServerModule窗口的CustomFiles屬性裏輸入javaScript\smartChatServer.js
3、推送消息
notifyInfo="中華人民共和國萬歲";
UniSession->AddJS("notifyMe(\""+notifyInfo+"\")");
4、設置瀏覽器
正常情況下，谷歌、火狐瀏覽器在收到推送消息時會在瀏覽器正上方彈出一個確認對話框，問你是否允許彈屏，選擇是即可。
或者以谷歌為例，進入瀏覽器設置一下允許彈屏。
1）點谷歌瀏覽器最右側的位置，然後在彈出的菜單中選擇【設置】
2）在彈出的設置窗口下拉到最底部選擇【高級】
3）在彈出的【隱私設置和安全性】裏選擇【內容設置】
4）選擇【通知】裏面添加你的服務器URL鏈接為允許
測試一下吧，間隔彈屏、自動消失，彈屏顯示效果還是不錯噠。
--------------------- 本文來自 中國銀行之路在腳下 的CSDN 博客 ，全文地址請點擊：https://blog.csdn.net/dlboy2018/article/details/82903902?utm_source=copy
（25）uniGUI for C++ builder之UniHTMLMemo初使用及uniGUI如何調用javaScript