UseStudio.Browers/resources/app/public/js/browser.js

const url = require('url');
/*const regedit = require('regedit'); //引入regedit
regedit.putValue({
    'HKCR/http/shell/open/command':{
        '默认' : {
            value : process.execPath,
            type : 'REG_SZ'
        }
    }
},function () {
});*/
const {ipcRenderer} = require('electron');
var ipc=require('electron').ipcRenderer;
var US_Browser=[];
/*注册命名空间*/
Namespace.register("US_Browser");
/*浏览器函数*/
US_Browser.CreatBrower=function (address,flag) {//创建窗口,url，是否为用户选择文件
    var http = /^(http)/;
    var https = /^(https)/;
    var li=$$("li", {//创建ul下的li
        "className": "BrowerList"
    }, US_Browser.NavContainer);
    var ListBody=$$("div", {//创建li下的div
        "className": "BrowerListBody"
    }, li);
    US_Browser.NavContainer.insertBefore(li,US_Browser.AddButton);//把新建标签页按钮追加到ul的li下
    li.data={//传窗口地址
        "url":address,
        "name":null,
        "favicons":'public/img/tray/app.ico'
    };
    ListBody.tag_favicon=$$("img", {//标签页图标
        "className": "tag_favicon", "draggable":"false", "alt":""
    }, ListBody);
    ListBody.tag_favicon.onerror=function () {//不存在时显示的标签页图标
        this.src='public/img/tray/app.ico';
        webview.tag.data.favicons=this.src;
    };
    ListBody.Webname=$$("p", {//标签页标题
        "className": "Webname","innerHTML":address?"正在加载":"新建标签","draggable":"false"
    }, ListBody);
    ListBody.tag_close=$$("i", {//标题页关闭按钮
        "className":"icon-cancel tag_close"
    }, ListBody);
    var BrowerContainer=$$("div", {"className":"BrowerContainer"},$("body")[0]);//装载webview
    var webview=$$("webview", {//创建webview
        "allowpopups":"", "autosize":"on"
    }, BrowerContainer);
    webview.tag=li;//把li赋给webview标签
    webview.addEventListener("new-window",function (e) {//访客页面尝试打开新的浏览器窗口时触发。
        US_Browser.BrowersTag=$(".BrowerList");//获取选项卡li
        var LIwidth = ((US_Browser.NavContainer.offsetWidth - 120)/US_Browser.BrowersTag.length)-10;//得到每个li标签页宽度
        if(US_Browser.BrowersTag.length>=30){//如果如果li标签页大于35
            confirm("窗口太多，请关闭一些再使用");//弹出提示
            return false;
        }
        const protocol=url.parse(e.url).protocol;
        if(protocol==='http:'||protocol==='https:'||protocol==="about:blank"){
            US_Browser.CreatBrower(e.url);//系统的默认浏览器中打开新的URL
        }
    });
    webview.addEventListener("page-favicon-updated",function (e) {//当页面收到图标网址时触发
        ListBody.tag_favicon.src=e.favicons[0];
        this.tag.data.favicons=e.favicons[0];
    });
    webview.addEventListener('will-navigate',function (e) {//导航跳转时触发
        this.tag.data.url=e.url
    });
    webview.addEventListener('did-navigate',function (e) {//导航完成时触发
        this.tag.data.url=e.url;
        ListBody.Webname.innerHTML=this.getTitle();
        ListBody.click();
    });
    webview.addEventListener('dom-ready',function (e) {//加载完成webview后执行
        var canGoForward = $(".icon-right")[0];//获取前进图标
        var canGoBack = $(".icon-left")[0];//获取后退图标
        var reFresh = $(".refresh")[0];//获取刷新图标
        ListBody.Webname.innerHTML=this.getTitle();//更改webview的title
        this.tag.data.name=this.getTitle();
        US_Browser.goBackWebView = function(){//执行后退
            webview.goBack();
        };
        US_Browser.goForwardWebView = function(){//执行前进
            webview.goForward();
        };
        US_Browser.reFresh = function(){//执行刷洗
            webview.reload();
        };
        if(webview.canGoBack()){//判断是否可以后退
            canGoBack.style.color = '#5a5a5a';
        }else{
            canGoBack.style.color = '#d3d3d3';
        } 
        if(webview.canGoForward()){//判断是否可以前进
            canGoForward.style.color = '#5a5a5a';
        }else{
            canGoForward.style.color = '#d3d3d3';
        };
        if(US_Browser.UrlArea.value === ""){
            reFresh.style.color = '#d3d3d3';
        }else{
            reFresh.style.color = '#5a5a5a';
        }
        US_Browser.LocalStorage(webview);
    });
    webview.onmousedown=function (e) {//webview鼠标事件
        US_Browser.MouseMenu(US_Browser.MouseMenuMain,this,US_Browser.MouseMenuCallBack,e);//右键显示创建应用菜单
    };
    ListBody.tag_close.onclick=function () {//点击标题页关闭按钮
        event.stopPropagation();
        var closeArr = [];
        for(var i=0;i<$(".tag_close").length;i++){//遍历li下关闭图标
            closeArr.push($(".tag_close")[i]);
        }
        closeArr[0].index = 0;//设置li下第一个关闭图标的index
        if(ListBody.tag_close.index == 0){
            webview.tag.nextSibling.onclick();//点击当前li下一个
        }else{
            webview.tag.previousSibling.onclick();//点击当前li上一个
        }
        US_Browser.NavContainer.removeChild(webview.tag);//移除当前li
        $("body")[0].removeChild(BrowerContainer);//移除当前webview
    }
    webview.src=address;//给webview的src传值
    US_Browser.UrlArea.onkeydown=function (e) {//获取搜索框值
        if(e.keyCode===13){//keycode为13
            if(this.value){//如果存在值
                if(this.value.match(http) || this.value.match(https)){//判断是否存在http或https
                    webview.src=this.value;//给webview的src传值
                     webview.tag.children[0].children[0].style.display = "block";//标签页图标显示
                }else {
                    webview.src='http://'+this.value;//给webview的src传值
                    webview.tag.children[0].children[0].style.display = "block";//标签页图标显示
                }
            }
        }
    };
    US_Browser.IconLock();//判断是否为https
    US_Browser.Bind(ListBody.Webname);
    ListBody.click();//点击li下的包裹节点
    if(flag){
        var pattern  = new RegExp("^[a-zA-Z]:/[a-zA-Z_0-9//]*");
        if(pattern.test(address)){
            webview.src = "file:///"+address;
        }else{
            return false;
        }
        if(address.match(http) || address.match(https)){//判断是否存在http或https
            webview.src=address;//给webview的src传值
            webview.tag.children[0].children[0].style.display = "block";//标签页图标显示
        }else {
            webview.src='http://'+address;//给webview的src传值
            webview.tag.children[0].children[0].style.display = "block";//标签页图标显示
        }
    }
};//创建一个新的浏览器选项卡
US_Browser.MouseMenu=function (menu_main,data,callback,e,flag) {//右键菜单事件
    var createNode=document.body;//获取第一和参数父元素
    var MouseMenuMain=$('.MouseMenuMain');//获取右键菜单事件的ul元素
    for(var i=0;i<MouseMenuMain.length;i++){//隐藏右键菜单事件所有
        MouseMenuMain[i].style.display='none';
    }
    document.onmouseup=function () {//鼠标事件后触发
        if (e.button === 2||flag) {
            if (!flag) {
                menu_main.style.left = e.pageX + -parseFloat(createNode.getBoundingClientRect().left) + createNode.offsetLeft + 'px';//菜单定位横坐标
                menu_main.style.top = e.pageY + -parseFloat(createNode.getBoundingClientRect().top) + createNode.offsetTop + 'px';//菜单定位纵坐标
                if (menu_main.getBoundingClientRect().left + menu_main.offsetHeight - createNode.getBoundingClientRect().left > createNode.offsetWidth) {//判断距左位置
                    menu_main.style.left = menu_main.style.left.split('px')[0] - menu_main.offsetWidth + 'px';//距左多少
                }
                if (menu_main.getBoundingClientRect().top + menu_main.offsetHeight - createNode.getBoundingClientRect().top > createNode.offsetHeight) {//判断距上位置
                    menu_main.style.top = menu_main.style.top.split('px')[0] - menu_main.offsetHeight + 'px';//距上多少
                }
                (typeof callback === 'function') ? callback(data) : "";//webview传入回调函数
            }
            menu_main.style.display = 'block';//显示菜单
            document.onmouseup = null;//清空
        }
    };
    menu_main.onclick=createNode.onmousewheel=function () {//执行右键菜单隐藏
        for(var i=0;i<MouseMenuMain.length;i++){
            MouseMenuMain[i].style.display='none';//隐藏
        }
        (typeof callback ==='function')?callback(data):"";//webview传入回调函数
    };
};//右键菜单函数
US_Browser.MouseMenuCallBack=function (webview) {//右键菜单回调函数
    US_Browser.MouseMenuCallBack.GoBack=function () {//返回
        webview.goBack();
    };
    US_Browser.MouseMenuCallBack.canGoForward=function () {//前进
        webview.goForward();
    };
    US_Browser.MouseMenuCallBack.reload=function () {//刷新
        webview.reload();
    };
    US_Browser.MouseMenuCallBack.SourceCode = function () {//查看源代码
        US_Browser.CreatBrower("view-source:"+US_Browser.UrlArea.value);
    };
    US_Browser.MouseMenuCallBack.openDevToolsDown = function(){//打开开发者工具
        if(webview.isDevToolsOpened()){//判断是否存在
            webview.closeDevTools();//关闭开发者工具
        }
        webview.openDevTools();//打开开发者工具
    }
};//网页右键菜单
US_Browser.LocalStorage=function(webview){
    var time = (new Date()).valueOf();
    var today = new Date().toLocaleDateString();
    var datas={
        url:webview.src,
        title:webview.tag.data.name,
        favicons:webview.tag.data.favicons,
        data:new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay()),
        time:new Date().toLocaleTimeString(),
        key:time
    };
    if(localStorage[today]){
        var aa = JSON.parse(localStorage[today]);
        var bb = JSON.parse(JSON.stringify(datas));
        aa.push(bb);
        var Storage = JSON.stringify(aa);
        localStorage.removeItem(today);
        localStorage.setItem(today, Storage);
    }else{
        localStorage.setItem(today,[]);
        localStorage[today]="["+JSON.stringify(datas)+"]";
    }
};//本地存储操作
US_Browser.IconLock = function(){//判断是否为https
    var http = /^(http)/;//http
    var https = /^(https)/;//https
    if(US_Browser.UrlArea.value.search(https)!==-1){//判断搜索框是否有https
        $(".bowerSeach span")[0].style.color = '#035816';
    }else {
        $(".bowerSeach span")[0].style.color = '#d3d3d3';
    }
};
/*右侧菜单按钮函数*/
US_Browser.about=function () {
    ipc.send('AboutUsW-show');
};
US_Browser.ShowHistory=function(){
    ipc.send('BrowserHistory-show');
};
US_Browser.Feedback=function(){
    ipc.send('BrowserFeedback-show');
};
US_Browser.ClearCache=function(){
    localStorage.clear();
};
US_Browser.Exit=function(){
    ipc.send('window-all-closed');
};
/*浏览器初始化*/
US_Browser.IpcBind=function(){
    ipcRenderer.on('url', function(event, message){//接收用户指定的文件
        if(message){
            US_Browser.CreatBrower(message,true);//打开用户请求的页面
        }
    });
    ipcRenderer.on('open-history', function(event, message){//接收历史记录地址
        if(message){
            US_Browser.CreatBrower(message,true);//打开用户请求的页面
        }
    });
    ipcRenderer.on('download-progress',function (event,message) {
        console.log(message)
    })
};//ipc通信绑定
US_Browser.Bind=function(Webname){//绑定
    var http = /^(http)/;//http
    var https = /^(https)/;//https
    US_Browser.BrowerListBody = $(".BrowerListBody");
    US_Browser.BrowersTag=$(".BrowerList");//获取选项卡li
    US_Browser.BrowerContainer=$(".BrowerContainer");//获取webview
    var BrowerListBody = US_Browser.BrowerListBody[0].offsetWidth;//获取title的宽度
    for(var i=0;i<US_Browser.BrowersTag.length;i++){//对选项卡及webview进行操作
        (function (i) {
            US_Browser.BrowersTag[i].onclick=function () {
                for(var j=0;j<US_Browser.BrowersTag.length;j++){
                    US_Browser.BrowersTag[j].className='BrowerList';
                    US_Browser.BrowersTag[0].className='BrowerList Listindex';
                    US_Browser.BrowerContainer[j].style.display='none';
                }
                US_Browser.BrowersTag[i].className+=' BrowerActive';
                US_Browser.BrowerContainer[i].style.display='block';
                US_Browser.UrlArea.value=this.data.url;
                webview = US_Browser.BrowerContainer[i].children[0];
                webview.addEventListener("dom-ready", function() {
                    var canGoForward = $(".icon-right")[0];//获取前进图标
                    var canGoBack = $(".icon-left")[0];//获取后退图标
                    var reFresh = $(".refresh")[0];//获取刷新图标
                    // webview.reloadIgnoringCache();
                    if(webview.canGoBack()){//判断是否可以后退
                        canGoBack.style.color = '#5a5a5a';
                    }else{
                        canGoBack.style.color = '#d3d3d3';
                    }
                    if(webview.canGoForward()){//判断是否可以前进
                        canGoForward.style.color = '#5a5a5a';
                    }else{
                        canGoForward.style.color = '#d3d3d3';
                    };
                    if(US_Browser.UrlArea.value == ""){
                        reFresh.style.color = '#d3d3d3';
                    }else{
                        reFresh.style.color = '#5a5a5a';
                    }
                });
                US_Browser.UrlArea.onkeydown=function (e) {//获取搜索框值
                    if(e.keyCode===13){
                        if(this.value){
                            if(this.value.match(http) || this.value.match(https)){//判断是否存在http或https
                                webview.src=this.value;
                                webview.tag.children[0].children[0].style.display = "block";
                            }else {
                                webview.src='http://'+this.value;
                                webview.tag.children[0].children[0].style.display = "block";
                            }
                        }
                    }
                };
                US_Browser.IconLock();//判断是否为https
            }
        })(i)
        if(BrowerListBody<40){
            Webname.style.display = "none";
            US_Browser.BrowerListBody[i].children[0].style.display = "none";
        }else{
            Webname.style.display = "block";
        }
    }
};//事件绑定
US_Browser.Init=function () {//初始化
    US_Browser.UrlArea=$(".bowerSeach input")[0];//获取搜索框
    US_Browser.NavContainer=$(".bowerCreaterWindow")[0];//获取标签页ul
    US_Browser.AddButton=$(".BrowwerAdd")[0];//获取新建标签页按钮
    US_Browser.BrowserHistory = $(".BrowserHistory")[0];
    US_Browser.BrowersMenuButtom=$("#bowerMenu")[0];//获取打开菜单
    US_Browser.MouseMenuMain=$("#CampusInfoBrowserMenu")[0];//获取右键菜单
    US_Browser.OnclickMenu=$("#CampusInfoBrowserOnclickMenu")[0];//获取菜单
    US_Browser.AddButton.onclick= function (){//点击新建标签页
        US_Browser.BrowersTag=$(".BrowerList");//获取选项卡li
        var LIwidth = ((US_Browser.NavContainer.offsetWidth - 120)/US_Browser.BrowersTag.length)-10;//得到每个li标签页宽度
        if(US_Browser.BrowersTag.length>=30){//如果如果li标签页大于35
            confirm("窗口太多，请关闭一些再使用");//弹出提示
            return false;
        }
        US_Browser.CreatBrower('');
        var canGoForward = $(".icon-right")[0];//获取前进图标
        var canGoBack = $(".icon-left")[0];//获取后退图标
        var reFresh = $(".refresh")[0];//获取刷新图标
        canGoBack.style.color = '#d3d3d3';
        canGoForward.style.color = '#d3d3d3';
        reFresh.style.color = '#d3d3d3';
        US_Browser.UrlArea.focus();
        if(US_Browser.UrlArea.value === ""){
            this.previousSibling.children[0].children[1].innerHTML = "新标签页";
            this.previousSibling.children[0].children[0].style.display = "none";
        }
    };
    US_Browser.BrowersMenuButtom.onmousedown=function (event) {//点击菜单
        US_Browser.MouseMenu(US_Browser.OnclickMenu,this,null,event,true);//右键显示创建应用菜单
    };
    window.onresize=function (e) {
        Array.prototype.forEach.call($("webview"), function (elm) {
            elm.style.width=elm.style.height='100%';//给webview设置100%宽高
        });
    };
    window.addEventListener('dragleave',function (e) {
        e.preventDefault();
        return false;
    });
    window.addEventListener('dragover',function (e) {
        e.preventDefault();
        return false;
    });
    window.addEventListener('dragenter',function (e) {
        e.preventDefault();
        return false;
    });
    window.addEventListener( "drop", function (e) {
        e.preventDefault();
        return false;
    }, false );
    var isBig=true;//窗口放大还原标示
    $(".close")[0].onclick=function(){//关闭窗口
        US_Browser.Exit();
    };
    $(".max")[0].onclick=function(){//最大化
        if(isBig){
            ipc.send('show-window');
            $(".max")[0].className='icon-window-restore max';
            $(".bowerCreaterWindow")[0].style.padding = "0";
            
        }else{
            ipc.send('orignal-window');
            $(".max")[0].className='icon-window-maximize max';
            $(".bowerCreaterWindow")[0].style.padding = "15px 0 0";
        }
        isBig=!isBig;
    };
    $(".min")[0].onclick=function(){//最小化
        ipc.send('hide-window');
    };
    US_Browser.CreatBrower('https://www.baidu.com');//开始进入一个页面
    US_Browser.IpcBind();
}();