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

**StevenHu** · Jun 4, 2011 11:07

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:

HTML Code:

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:

HTML Code:

<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!

**sitemile** · Jun 5, 2011 04:44

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.

**StevenHu** · Jun 5, 2011 19:56

Originally Posted by sitemile

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.

The file to download is in the code.

**StevenHu** · Jun 6, 2011 11:12

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.)

HTML Code:

<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>

**StevenHu** · Jun 6, 2011 11:27

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

HTML Code:

<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>

**StevenHu** · Jun 6, 2011 17:25

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

**StevenHu** · Jun 8, 2011 21:07

I found a code from PhoneGap that does the trick!

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions