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

const url = require('url');
const remote = require('electron').remote;
const Menu = remote.Menu;
Namespace.register("CampusInfoBrowser");//注册命名空间
CampusInfoBrowser.CreatBrower=function (address) {//创建窗口
    var http = /^(http)/;
    var https = /^(https)/;
    var li=$$("li", {//创建ul下的li
        "className": "BrowerList"
    }, CampusInfoBrowser.NavContainer);
    var ListBody=$$("div", {//创建li下的div
        "className": "BrowerListBody"
    }, li);
    CampusInfoBrowser.NavContainer.insertBefore(li,CampusInfoBrowser.AddButton);//把新建标签页按钮追加到ul的li下
    li.data={//传窗口地址
        "url":address
    };
    ListBody.tag_favicon=$$("img", {//标签页图标
        "className": "tag_favicon", "draggable":"false", "alt":""
    }, ListBody);
    ListBody.tag_favicon.onerror=function () {//不存在时显示的标签页图标
        this.src='public/img/tray/app.ico'
    };
    ListBody.Webname=$$("p", {//标签页标题
        "className": "Webname","innerHTML":"正在加载","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) {//访客页面尝试打开新的浏览器窗口时触发。
        const protocol=url.parse(e.url).protocol;
        if(protocol==='http:'||protocol==='https:'){
            CampusInfoBrowser.CreatBrower(e.url);//系统的默认浏览器中打开新的URL
        }
    });
    webview.addEventListener("page-favicon-updated",function (e) {//当页面收到图标网址时触发
        ListBody.tag_favicon.src=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
        CampusInfoBrowser.goBackWebView = function(){//执行后退
            webview.goBack();
        }
        CampusInfoBrowser.goForwardWebView = function(){//执行前进
            webview.goForward();
        }
        CampusInfoBrowser.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(CampusInfoBrowser.UrlArea.value == ""){
            reFresh.style.color = '#d3d3d3';
        }else{
            reFresh.style.color = '#5a5a5a';
        }
    });
    webview.onmousedown=function (e) {//webview鼠标事件
        CampusInfoBrowser.MouseMenu(CampusInfoBrowser.MouseMenuMain,this,CampusInfoBrowser.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上一个
        }
        CampusInfoBrowser.NavContainer.removeChild(webview.tag);//移除当前li
        $("body")[0].removeChild(BrowerContainer);//移除当前webview
    }
    webview.src=address;//给webview的src传值
    CampusInfoBrowser.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";//标签页图标显示
                }
            }
        }
    };
    CampusInfoBrowser.IconLock();//判断是否为https
    CampusInfoBrowser.Bind();
    ListBody.click();//点击li下的包裹节点
};
CampusInfoBrowser.MouseMenu=function (menu_main,data,callback,e) {//右键菜单事件
    // e.preventDefault();
    // e.stopPropagation();
    var createNode=menu_main.parentNode;//获取第一和参数父元素
    var MouseMenuMain=$('.MouseMenuMain');//获取右键菜单事件的ul元素
    for(var i=0;i<MouseMenuMain.length;i++){//隐藏右键菜单事件所有
        MouseMenuMain[i].style.display='none';
    }
    document.onmouseup=function () {//鼠标事件后触发
        if (e.button === 2) {
            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';//菜单定位纵坐标
            menu_main.style.display = 'block';//显示菜单
            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';//距上多少
            }
            callback(data);//webview传入回调函数
            document.onmouseup = null;//清空
        }
    };
    createNode.onclick=createNode.onmousewheel=function () {//执行右键菜单隐藏
        for(var i=0;i<MouseMenuMain.length;i++){
            MouseMenuMain[i].style.display='none';//隐藏
        }
    };
};

CampusInfoBrowser.MouseMenuCallBack=function (webview) {//右键菜单回调函数
    CampusInfoBrowser.MouseMenuCallBack.GoBack=function () {//返回
        webview.goBack();
    };
    CampusInfoBrowser.MouseMenuCallBack.canGoForward=function () {//前进
        webview.goForward();
    };
    CampusInfoBrowser.MouseMenuCallBack.reload=function () {//刷新
        webview.reload();
    };
    CampusInfoBrowser.MouseMenuCallBack.SourceCode = function () {//查看源代码
        CampusInfoBrowser.CreatBrower("view-source:"+CampusInfoBrowser.UrlArea.value);
    };
    CampusInfoBrowser.MouseMenuCallBack.SaveAs = function(){//保存
        function fakeClick(obj) {  
            var ev = document.createEvent("MouseEvents");  
            ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);  
            obj.dispatchEvent(ev);  
        }  
        function exportRaw(name, data) {  
            var urlObject = window.URL || window.webkitURL || window;  
            var export_blob = new Blob([data]);  
            var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")  
            save_link.href = urlObject.createObjectURL(export_blob);  
            save_link.download = name;  
            fakeClick(save_link);  
        }  
        exportRaw('test.html', 'hello world');  
    }
    CampusInfoBrowser.MouseMenuCallBack.openDevToolsDown = function(){//打开开发者工具
        if(webview.isDevToolsOpened()){//判断是否存在
            webview.closeDevTools();//关闭开发者工具
        }
        webview.openDevTools();//打开开发者工具
    }
};

CampusInfoBrowser.Action=function(){//过程中的执行
    CampusInfoBrowser.BrowersTag.title = $(".Webname");//获取标题标签
    var title = CampusInfoBrowser.BrowersTag[0].offsetWidth;//获取title的宽度
    for(var i=0;i<CampusInfoBrowser.BrowersTag.title.length;i++){//遍历li标签页
        if(title<10){//title小于5
            CampusInfoBrowser.BrowersTag.title[i].style.display = "none";//遍历的标题设置隐藏
        }else{
            CampusInfoBrowser.BrowersTag.title[i].style.display = "block";//遍历的标题设置显示
        }
    }
}
CampusInfoBrowser.Bind=function(){//绑定
    var http = /^(http)/;//http
    var https = /^(https)/;//https
    CampusInfoBrowser.BrowersTag=$(".BrowerList");//获取选项卡li
    // CampusInfoBrowser.tag_close=$(".tag_close");//获取li里的关闭元素

    CampusInfoBrowser.BrowerContainer=$(".BrowerContainer");//获取webview
    for(var i=0;i<CampusInfoBrowser.BrowersTag.length;i++){//对选项卡及webview进行操作
        (function (i) {
            CampusInfoBrowser.BrowersTag[i].onclick=function () {
                for(var j=0;j<CampusInfoBrowser.BrowersTag.length;j++){
                    CampusInfoBrowser.BrowersTag[j].className='BrowerList';
                    CampusInfoBrowser.BrowersTag[0].className='BrowerList Listindex';
                    CampusInfoBrowser.BrowerContainer[j].style.display='none';
                }
                CampusInfoBrowser.BrowersTag[i].className+=' BrowerActive';
                CampusInfoBrowser.BrowerContainer[i].style.display='block';
                CampusInfoBrowser.UrlArea.value=this.data.url;
                webview = CampusInfoBrowser.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(CampusInfoBrowser.UrlArea.value == ""){
                        reFresh.style.color = '#d3d3d3';
                    }else{
                        reFresh.style.color = '#5a5a5a';
                    }
                });
                CampusInfoBrowser.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";
                            }
                        }
                    }
                };
                CampusInfoBrowser.IconLock();//判断是否为https
            }
        })(i)
    }
    var LIwidth = ((CampusInfoBrowser.NavContainer.offsetWidth - 120)/CampusInfoBrowser.BrowersTag.length)-10;//得到每个li标签页宽度
    if(CampusInfoBrowser.BrowersTag.length>=28){//如果如果li标签页大于35
        confirm("窗口太多，请关闭一些再使用");//弹出提示
        return false;
    }
};

CampusInfoBrowser.Init=function () {//初始化
    CampusInfoBrowser.UrlArea=$(".bowerSeach input")[0];//获取搜索框
    CampusInfoBrowser.NavContainer=$(".bowerCreaterWindow")[0];//获取标签页ul
    CampusInfoBrowser.AddButton=$(".BrowwerAdd")[0];//获取新建标签页按钮
    CampusInfoBrowser.BrowersButtom=$("#bowerMenu")[0];//获取打开菜单
    CampusInfoBrowser.MouseMenuMain=$("#CampusInfoBrowserMenu")[0];//获取右键菜单
    CampusInfoBrowser.AddButton.onclick= function (){//点击新建标签页
        CampusInfoBrowser.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';
        if(CampusInfoBrowser.UrlArea.value === ""){
            this.previousSibling.children[0].children[1].innerHTML = "新标签页";
            // this.previousSibling.children[0].removeChild(this.previousSibling.children[0].children[0]);
            this.previousSibling.children[0].children[0].style.display = "none";
        }
    };
    CampusInfoBrowser.BrowersButtom.onclick=function (e) {//点击菜单
        e.preventDefault();
        CampusInfoBrowser.MenuMain.popup(remote.getCurrentWindow());//打开创建的菜单
    };
    CampusInfoBrowser.MenuMain = new Menu();//创建菜单
    CampusInfoBrowser.MenuMain_template=[
        {
            label: '关于我们                   ',
            role: '关于我们',
        },
        {
            label: '反馈                    ',
            role: '反馈',
        },
        {
            label: '历史记录                    ',
            role: '历史记录',
        },
        {
            label: '清除缓存                    ',
            role: '清除缓存',
        },
        {
            role: 'close',
            submenu: [
                {role: 'close'}
            ]
        }
    ];//创建菜单项数组的数组
    CampusInfoBrowser.MenuMain = Menu.buildFromTemplate(CampusInfoBrowser.MenuMain_template);
    Menu.setApplicationMenu(CampusInfoBrowser.MenuMain);//创建应用菜单
    CampusInfoBrowser.IconLock = function(){//判断是否为https
        var http = /^(http)/;//http
        var https = /^(https)/;//https
        if(CampusInfoBrowser.UrlArea.value.search(https)!=-1){//判断搜索框是否有https
            $(".bowerSeach span")[0].style.color = '#035816';
        }else {
            $(".bowerSeach span")[0].style.color = '#d3d3d3';
        }
    }
    window.onresize=function (e) {
        Array.prototype.forEach.call($("webview"), function (elm) {
            elm.style.width=elm.style.height='100%';//给webview设置100%宽高
        });
    };
    setInterval('CampusInfoBrowser.Action()',1000);   
    CampusInfoBrowser.CreatBrower('https://www.baidu.com');//开始进入一个页面

}();