简体   繁体   中英

javascript pop up message only appears once

I am am making a chrome extension that has two modes, and whenever the icon is clicked a pop up message should appear explaining to the user what mode he is in.

Problem is that the message does not get always displayed (the pop up itself gets opened).

I tried googling it, but it seems not a lot of people encountered this problem.

Can anyone help please?

Here is my code:

function openWin1()
{
    myWindow=window.open('','','width=500,height=500,toolbar=0, location=0, status=0, menubar=0, scrollbars=0, resizable=0');
    myWindow.moveTo(500,100);
    myWindow.document.write("<p>mode1</p>");
    myWindow.focus();
}

function openWin2()
{
    myWindow=window.open('','','width=500,height=500,toolbar=0, location=0, status=0, menubar=0, scrollbars=0, resizable=0');
    myWindow.moveTo(500,100);
    myWindow.document.write("<p>mode2</p>");
    myWindow.focus();

}


chrome.browserAction.onClicked.addListener(onClickExtensionIcon);
function onClickExtensionIcon(tab) 
{
    if(hasAPrise)
    {
        hasAPrise = false;
        chrome.browserAction.setIcon({path: '/icon.png'});
        openWin1(); //open the first popup
    }
    else
    {
        openWin2(); //open the second popup
    }


}

Thanks in advance

EDIT: I noticed that if I maximize and minimize the pop up a few times, the message does appear. Also when I inspect the pop-up source it message is there correct. This is interesting. Any ideas how to fix this.

You have to close the document after writing to it:

myWindow.document.write("<p>mode2</p>");
myWindow.document.close();

UPDATE : It may also be useful to name your target so that you don't spawn a new window every time the link is clicked, and perhaps wrap your content in html.

function openWin1(){
    myWindow=window.open('','popup1','width=500,height=500,toolbar=0,location=0,status=0,menubar=0,scrollbars=0,resizable=0');
    myWindow.moveTo(500,100);
    myWindow.document.write("<html><head><title>Popup1</title></head><body>I am popup 1</body></html>");
    myWindow.document.close();
    myWindow.focus();
    myWindow.resizeTo(499,499); //UPDATE: force resize because OP is getting improved results after window resize
}

I can't test this as an actual Chrome extension but I have made a JSFiddle showing it working as html/js

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM