打开窗口，一打开就做一些东西。仍然是空的

时间：2017-09-12 20:07:46

标签： javascript jquery window

以下是我最终要完成的事情：

Check to see if update is needed
  If update is present - check if window exists
    if exists - add update to window
    If not, open window, setup html and add update

某处是window.open的过程，windows不会被创建并且导致一切都变为NUTS ...这就是我正在运行的

var GlobData = [];
GlobData = getMasterData();
var tWin = null;
var timId = 0;
timeId = setInterval(checkCampChange, 1000)
function getMasterData()
{
    var testObj=[];
    $("li.gs-w").each(function(i,j){
        var jj = $(j);
        var PreGroup = jj.children(".widget-container").children(".window-titlebar").children("label").html().split("</i>")[1];
        if (PreGroup.split(" - ").length == 2)
        {
            var GroupId = PreGroup.split(" - ")[0];
            var GroupName = PreGroup.split(" - ")[1];
            var tempObj = {};
            tempObj.GroupId = GroupId;
            tempObj.GroupName = GroupName;

            $("#grid-dashboard .k-grid-content-locked table tr").each(function(i,j)
            {
                var td = $(j).children();
                if ($(td[0]).html() == GroupId)
                {
                    tempObj.List = $(td[1]).html()
                    tempObj.ListName = $(td[2]).html()
                    tempObj.Campaign = $(td[3]).html()
                    tempObj.Status = $(td[4]).html()
                }
            })
            $("#grid-phoneLinesByGroup div.k-grid-content-locked table tr[role='row'] td[role='gridcell']").each(function(i,j)
            {
                var k = $("table[aria-activedescendant='grid-phoneLinesByGroup_active_cell'] tr .duration")[i];
                var GrpId = parseInt($(j).html());
                if(GrpId == GroupId)
                {
                    tempObj.Duration = $(k).html();
                    tempObj.TotalTime = ($(k).html().split(":")[0] * 3600) + ($(k).html().split(":")[1] * 60) + ($(k).html().split(":")[2] * 1)
                }
            });
            testObj.push(tempObj);
        }
    });
    return testObj;
}

function checkCampChange()
{
    var tempGlobData = [];
    tempGlobData = getMasterData();
    $(tempGlobData).each(function(i,tempGlobDataItem){
        $(GlobData).each(function(i,GlobDataItem){
            if (GlobDataItem.GroupId == tempGlobDataItem.GroupId)
            {
                var hasChanged = false
                if (tempGlobDataItem.TotalTime < GlobDataItem.TotalTime)
                {
                    hasChanged = true
                }
                if (tempGlobDataItem.Campaign != GlobDataItem.Campaign)
                {
                    hasChanged = true
                }
                if (hasChanged)
                {
                    tWin = window.open("","campChange","width=300px,height=700");
                    //RIGHT HERE!!!
                    if (!tWin)
                    {
                        setupWindow();
                        return;
                    }
                    else if (!tWin.closed)
                    {
                        setupWindow();
                        return;
                    }
                    $('<div class="msg">' + GlobDataItem.Campaign + " has changed to " + tempGlobDataItem.Campaign + " around " + Date() + '</div>').appendTo(tWin.document.getElementById("holder"));
                    tWin.focus()
                }
            }
        });
    });
    GlobData = tempGlobData.slice(0);
}
function setupWindow()
{
    console.log("SetWindow")
    var jQ = tWin.document.createElement('script');
    jQ.type = 'text/javascript';
    jQ.src = 'https://code.jquery.com/jquery-3.2.1.min.js';    
    tWin.document.getElementsByTagName('head')[0].appendChild(jQ);                      
    var script = tWin.document.createElement('script');
    script.type = 'text/javascript';
    script.innerHTML = 'var isLoaded = true;';    
    tWin.document.getElementsByTagName('head')[0].appendChild(script);  
    var ssty = tWin.document.createElement('style');
    ssty.innerHTML = 'body{background:gray;}.msg{padding-top:10px;padding-bottom:10px;border-bottom:1px solid black}';    
    tWin.document.getElementsByTagName('head')[0].appendChild(ssty);
    tWin.document.getElementsByTagName('body')[0].innerHTML = "<div style='margin: 5px;background: white;width: auto;padding: 4px;height: 35px;border-radius: 5px;font-size: 32px;text-align: center;font-weight: bold;'>Camp Tracker</div>" + "<div id='holder' style='margin: 5px;background: white;width: auto;padding: 4px;height: 628px;border-radius: 5px;overflow-y: auto;'></div>";
}

这是GlobData中的内容：

"[
  {
    "GroupId": "1",
    "GroupName": "Merp",
    "List": "10104",
    "ListName": "MERP",
    "Campaign": "MERP",
    "Status": "<span class=\"group-background-color dialing\">Dialing</span>",
    "Duration": "00:16:44",
    "TotalTime": 1004
  },
  {
    "GroupId": "4",
    "GroupName": "Client",
    "List": "20002",
    "ListName": "CLIENT",
    "Campaign": "CLNT",
    "Status": "<span class=\"group-background-color dialing\">Dialing</span>",
    "Duration": "00:23:19",
    "TotalTime": 1399
  }
]"

在checkCampChange中，我执行window.open以获得特定大小的完全空白窗口。一旦打开，它应该运行setupWindow。这将设置所有的HTML，样式和其他JS的东西。但它在我标记的checkCampChange中出错了。当我通过代码，它运行正常。它只是似乎没有足够快地创建窗口并在下一个if语句上出错。

让我知道yinz的想法

1 个答案:

答案 0 :(得分：0)

我决定不用打开一个新窗口而不得不使用缩小的html，javascript和CSS注入一个空白窗口的字符串，我只是制作了一个滑出的div，可以隐藏到20 px

CSS：

.blink_me 
{
    animation: blinker 3s linear infinite;
}
@keyframes blinker 
{
    50% { opacity: 0; }
}
.sidenav 
{
    left:-230px;
    height: 100%;
    width: 250px;
    position: fixed;
    z-index: 4;
    top: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 32px;
}


.navWrap 
{
    float: left;
    height: 700px;
    width: 200px;
    margin-left: 20px;
}
.sidenav a 
{
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;
}
.sidenav .closebtn 
{
    position: absolute;
    top: -10px;
    right: 15px;
    font-size: 36px;
    margin-left: 50px;
}
.sidenav h1
{
    padding: 0px 0px 15px 0px;
    text-decoration: none;
    color: white;
    display: block;
    transition: 0.3s;
    width: 100%;
    text-align: center;
}
#holder
{
    color: white;
    border: 1px white solid;
    padding: 10px 10px 0px 10px;
    border-radius: 5px;
    bottom: 20px;
    position: fixed;
    top: 70px;
    width: 185px;
    overflow-y: auto;
}
.sidenav .msg 
{
    padding: 8px 19px 8px 8px;
    text-decoration: none;
    font-size: 12px;
    color: white;
    display: block;
    position: relative;
    transition: 0.3s;
}
.sidenav a:hover 
{
    color: #f1f1f1;
}
.sidenav a:hover 
{
    color: #f1f1f1;
}
.remCamp 
{
    cursor:pointer;
    top: 0px;
    right: 0;
    position: absolute;
    font-size: 22px;
}

#opener 
{
    cursor:pointer;
    float: right;
    color: white;
}
@media screen and (max-height: 450px) 
{
    .sidenav 
    {
        padding-top: 15px;
    }
    .sidenav a 
    {
        font-size: 18px;
    }
}

JS：

var GlobData = [];
var timeId;
doStartUp();

function doStartUp()
{
    //alert("Loaded");
    if (timeId > 0)
    {
        clearInterval(timeId);
    }
    if($("#wallboardCSS").length != 0)
    {
        $("#wallboardCSS").remove();
    }
    if($("#wallboardauxJS").length != 0)
    {
        $("#wallboardauxJS").remove();
    }
    if($("#mySidenav").length != 0)
    {
        $("#mySidenav").remove();
    }

    $('<div id="mySidenav" class="sidenav"><div class="navWrap"><a href="javascript:void(0)" class="closebtn">&times;</a><h1>Camp Track</h1><div id="holder"></div></div><div id="opener">>></div></div>').appendTo("body");
    //<link href="http://localhost:8080/css/wallboard.css" rel="stylesheet" id="wallboardCSS">
    $('<link href="http://localhost:8080/css/wallboard.css" rel="stylesheet" id="wallboardCSS">').appendTo("head");
    //<script type="text/javascript" src="http://localhost:8080/js/wallboard-aux.js" id="wallboardauxJS"></script>
    $('<script type="text/javascript" src="http://localhost:8080/js/wallboard-aux.js" id="wallboardauxJS"></script>').appendTo("head");
    GlobData = getMasterData();
    timeId = setInterval(checkCampChange, 1000);
}
function getMasterData()
{
    var testObj=[];
    $("li.gs-w").each(function(i,j){
        var jj = $(j);
        var PreGroup = jj.children(".widget-container").children(".window-titlebar").children("label").html().split("</i>")[1];
        if (PreGroup.split(" - ").length == 2)
        {
            var GroupId = PreGroup.split(" - ")[0];
            var GroupName = PreGroup.split(" - ")[1];
            var tempObj = {};
            tempObj.GroupId = GroupId;
            tempObj.GroupName = GroupName;

            $("#grid-dashboard .k-grid-content-locked table tr").each(function(i,j)
            {
                var td = $(j).children();
                if ($(td[0]).html() == GroupId)
                {
                    tempObj.List = $(td[1]).html()
                    tempObj.ListName = $(td[2]).html()
                    tempObj.Campaign = $(td[3]).html()
                    tempObj.Status = $(td[4]).html()
                }
            })
            $("#grid-phoneLinesByGroup div.k-grid-content-locked table tr[role='row'] td[role='gridcell']").each(function(i,j)
            {
                var k = $("#grid-phoneLinesByGroup .duration.column-timer")[i];//$("table[aria-activedescendant='grid-phoneLinesByGroup_active_cell'] tr .duration")[i];
                var GrpId = parseInt($(j).html());
                if(GrpId == GroupId)
                {
                    tempObj.Duration = $(k).html();
                    tempObj.TotalTime = ($(k).html().split(":")[0] * 3600) + ($(k).html().split(":")[1] * 60) + ($(k).html().split(":")[2] * 1)
                }
            });
            testObj.push(tempObj);
        }
    });
    return testObj;
}

function checkCampChange()
{
    var tempGlobData = [];
    tempGlobData = getMasterData();
    var hasChanged = false
    $(tempGlobData).each(function(i,tempGlobDataItem){
        $(GlobData).each(function(i,GlobDataItem){
            if (GlobDataItem.GroupId == tempGlobDataItem.GroupId)
            {
                if (tempGlobDataItem.TotalTime < GlobDataItem.TotalTime)
                {
                    hasChanged = true
                }
                if (tempGlobDataItem.Campaign != GlobDataItem.Campaign)
                {
                    hasChanged = true
                }
                if (hasChanged)
                {
                    var tdate = new Date;
                    var dd = getTime(tdate);
                    var tName = "msg" + tdate.getTime();
                    $('<div class="msg blink_me" id="' + tName + '">Group ' + GlobDataItem.GroupId + ': ' + GlobDataItem.Campaign + " has changed to " + tempGlobDataItem.Campaign + " around " + dd + '<div class="remCamp">&times;</div></div>').appendTo("#holder");
                    $("#" + tName).click(unBlink);
                    $("#" + tName + " .remCamp").click(remCamp);

                    hasChanged = false;
                    if($("#opener").css("display") == "block")
                    {
                        $("#opener").addClass("blink_me");
                    }
                }
            }
        });
    });
    GlobData = tempGlobData.slice(0);
    console.log("window check")

}

function getTime(td)
{
    var dd = "";
    if (td.getHours()==0)
    {
        dd = "12";
    }
    else if (td.getHours() > 12)
    {
        dd = (td.getHours() - 12).toString();
    }
    else
    {
        dd = td.getHours().toString();
    }
    console.log(dd.length);
    if (dd.length == 1)
    {
        dd = "0" + dd;
    }
    dd += ":";
    if (td.getMinutes() < 10)
    {
        dd += "0" + td.getMinutes();
    }
    else if (td.getHours() > 12)
    {
        dd += td.getMinutes();
    }

    if (td.getHours() > 12)
    {
        dd += " PM";
    }
    else
    {
        dd += " AM";
    }


    return dd;
}

JS Aux：

function openNav() 
{
    $("#mySidenav").css("left","0px");
    $("#opener").hide();
}
function closeNav() 
{
    $("#mySidenav").css("left","-230px");
    $("#opener").show();
    if($("#opener").hasClass("blink_me"))
    {
        $("#opener").removeClass("blink_me");
    }
    $(".msg").each(function (i,j){
        $(j).removeClass("blink_me");
    })
}
function remCamp()
{
    $(this).parent().remove();
}
function unBlink()
{
    $(this).removeClass("blink_me");
}


$("#opener").click(openNav);
$(".closebtn").click(closeNav);

我使用带有以下内容的书签从我们的Web服务器加载它：

javascript:if($("#wallboardJS").length != 0){$("#wallboardJS").remove();}$('<script type="text/javascript" src="http://localhost:8080/js/wallboard.js" id="wallboardJS"></script>').appendTo("head");
相关问题
最新问题