How do I adapt this code to detect Internet connection on a smartphone?

Mobile
1

I came across this code to add to my Android/iPhone app to help let visitors know that there is or is not an active Internet connection:

function testConnection() {
   var googleFavIcon = new Image();
   googleFavIcon.src =
               "http://www.google.com/favicon.ico";
 
   if(googleFavIcon.height>0)  {
       //do something
    }
    else {
      //warn user
    }
}

It was found on this page: Detecting an Internet Connection With Javascript – Java Beans dot Asia

I don’t know how to write the JS code needed for the “do something” and “warn user” sections. I want to show a default local red.png icon if there is no connection, but show a local green.png icon if there is a connection. We don’t need to address IE or desktop browser issues, since it’s for the iPhone or Android devices. Here’s a sample of what the final HTML might look like:

<ul class="pageitem">
<li class="menu">
<a href="#" onClick="history.go(-1)"><img src="backbutton.png" alt=""></a> 
<img src="red.png" alt="">
</li>
</ul>

How do you use JS to swap out the red.png for a green.png if there’s an active connection? I imagine “red.png” would somehow be replaced with a JS variable.

Also, can I use a JS onClick on a png image as I did above?

Thanks!

2

i am thinking you need some sort of file to download and time the period that file takes to download and make a choice after that.

3

The file to download is in the code.

4

This is as far as I got. I don’t understand the errors in JSHint.com, unfortunately, so I can’t go further.

Upon body onLoad, the function is supposed to run. It gets a 126-byte file from our server and checks it for height size. If it is larger than 0 bytes, then the first option is supposed to run, which means to put “On” in the input field. Otherwise, if the size is less than 0, it puts “Off” in the input field. Currently, when I double-click on the script file to open it, nothing shows in the text input field. (Putting the code right after the onLoad line, or putting the code just before the </body> tag doesn’t affect it.)

<title>
Testing Internet Connection On/Off Status
</title>


<script type="text/javascript">

function testConnection() {
   var checkExistenceOfImg = new Image();
   checkExistenceOfImg.src =
               "http://aedownloads.com/misc/testConnectionInApp.png"; 
   if(checkExistenceOfImg.height > 0)  {
		function showOn(form) {
			var form = document.getElementById('formConnection');
			var a = form.elements.status.value;
			form.elements.status.value = "On";
		}		
    }
    else {
			var form = document.getElementById('formConnection');
			var a = form.elements.status.value;
			form.elements.status.value = "Off";
    }
}
</script>
</head>


<body onLoad="testConnection()">

<div id="content">
	<div class="pageitem"><div class="textbox">
        <p class="term">
			Testing Internet Connection
		</p>
	</div></div> 
 
 	<div class="pageitem"><div class="textbox">	
		<form id="formConnection"> 
			<input id="connectionStatus" class="display2" size="1" type="text" name="status" value="">
		</form>
	</div> </div> 

</div> <!-- content -->
<!-- testConnectionInApp.png is a 126bytes 10x10px PNG image. -->

</body>
5

OK, i finally got it working. Are there any weaknesses regarding this code I should know about?

<script type="text/javascript">
function showOn(form) {
     form.elements.status.value = "On";
     }

function showOff(form) {
    form.elements.status.value = "Off";
    }

function testConnection() {
    var checkExistenceOfImg = new Image();
    var form = document.getElementById('formConnection');
    checkExistenceOfImg.src =
               "http://aedownloads.com/misc/testConnectionInApp.png"; 
    if(checkExistenceOfImg.height > 0)  {
		showOn(form);
    }
    else {
		showOff(form);
    }
}
</script></body>
6

Nope, the code does not work consistently. Back to square one!

7

I found a code from PhoneGap that does the trick!