（26）uniGUI for C++ builder之让浏览器弹屏显示消息及uniGUI调用javaScript代码文件

                                                                                (中行雷威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版聊天工具，如果浏览器最小化后，进来消息如何显示告知呢？经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链接为允许

测试一下吧，间隔弹屏、自动消失，弹屏显示效果还是不错哒。