Load when the browser is open

问题

I made a special button that thru the use of this js shows the server status using a api, my problem is that i cant make this thing to automaticly load the first time you open the browser, you have to actually click the button otherwise it doesnt start runing.

function checkStatus(event)
{
    jQuery.getJSON("url",function(data){ 
        var button = document.getElementById("ServStat");
        if ( data.status == '1') { 
            jQuery('#ServStat').addClass('online').removeClass('offline');
            button.label = 'Online'; }
        else { 
            jQuery('#ServStat').addClass('offline').removeClass('online');
            button.label = 'Offline' 
        }
    });
}

Any ideas are welcome and thanks in advance.

回答1:

Just add the code to document.ready function. It gets executed when the document has been load completely.

So your code will become something like,

$(document).ready(function () {
    jQuery.getJSON("url", function (data) {
        var button = document.getElementById("ServStat");
        if (data.status == '1') {
            jQuery('#ServStat').addClass('online').removeClass('offline');
            button.label = 'Online';
        } else {
            jQuery('#ServStat').addClass('offline').removeClass('online');
            button.label = 'Offline'
        }
    });
});

You can get more details here : http://api.jquery.com/ready/

回答2:

$(function() {
  checkStatus();
});

回答3:

Thanks to everyone, i really appreaciate you took the time and effort to answer my question, im "new" to the site and let me tell that after this first impression im here for the long term :).

About the issue, well as most of you have noticed im learning from the practice and i dont really have a deep understanding, i try to pay as much attention as i can and read everything that i find, anyway, my friend who does have a deep understanding of this noticed that in my xul file the script were set like this:

<script type="application/x-javascript" src="chrome://neverendlessbar/content/serverstatus.js" />
<script type="application/x-javascript" src="chrome://neverendlessbar/content/jquery-1.7.2.js" />
<script type="text/javascript">
    $.noConflict();
</script>

When the right way was:

<script type="application/x-javascript" src="chrome://neverendlessbar/content/jquery-1.7.2.js" />
<script type="text/javascript">
    $.noConflict();
</script>
<script type="application/x-javascript" src="chrome://neverendlessbar/content/serverstatus.js" />

The jQuery wasnt loding properly. After we fixed the jQuery error we just added a simply "checkStatus();" to the end of code leving us with this:

function checkStatus(event)
{
    jQuery.getJSON("url",function(data){ 
    var button = document.getElementById("ServStat");
    if ( data.status == '1') { 
    jQuery('#ServStat').addClass('online').removeClass('offline').attr('label','Online');}
    else { 
    jQuery('#ServStat').addClass('offline').removeClass('online').attr('label','Offline');}});
}
checkStatus();

Worked in the first run :D.

So thanks again everybody and i hope i can return the favour some day :D.

After reading epascarello reply i asked and indeed "getElementById" aint neccessary.

FINAL CODE

function checkStatus()
{
    jQuery.getJSON("url",function(data){ 
    if ( data.status == '1')     {jQuery('#ServStat').addClass('online').removeClass('offline').attr('label','Online');}
    else     {jQuery('#ServStat').addClass('offline').removeClass('online').attr('label','Offline');}});
}
checkStatus();
{
    setInterval(changeState, 300000)
}

来源：https://stackoverflow.com/questions/10220190/load-when-the-browser-is-open