Javascript Internet Connection Test not working
I'm pretty much a novice at javascript and recently started learning it. Anyways, I have a strange problem. I am doing two checks in this code: a server connection check and an internet connectivity check. The server is actually physically connected to the client computer, and I check for connection every 3 seconds at startup so that the client will automatically launch once the server is up and running. Right now the client has a google-earth plugin, so I want to do an internet connection check so that I can launch the application without google-earth (and the related code) when there is no internet. However, the application s开发者_StackOverflow社区eems to hang if I try to do both of these checks. It's driving me nuts because both of them work fine independently, but they fail when they are combined.
Also, in this code the image srcs both point to the same thing. I did this to make it easier for you guys to test it. Anyways, here's the code:
<html>
<head>
</head>
<body>
<script type="text/javascript">
document.getElementsByTagName('body')[0].innerHTML +=
'<img id="testImage" style="display: none;" ' +
'src = http://i.microsoft.com/about/shared/templates/components/mscomFooter/logo.png?' + Math.random() + '" ' +
'onerror="fail();" ' + 'onload="test2();">';
function fail()
{
alert("fail")
}
function pass()
{
alert("pass")
}
function test2()
{
document.getElementsByTagName('body')[0].innerHTML +=
'<img id="testImage2" style="display: none;" ' +
'src = http://i.microsoft.com/about/shared/templates/components/mscomFooter/logo.png?' + Math.random() + '" ' +
'onerror="fail();" ' + 'onload="pass();">';
}
</script>
</body>
</html>
Try this instead:
<html>
<head>
</head>
<body>
<div id="a"></div>
<div id="b"></div>
<script type="text/javascript">
document.getElementById('a').innerHTML +=
'<img id="testImage" style="display: none;" ' +
'src = http://i.microsoft.com/about/shared/templates/components/mscomFooter/logo.png?' + Math.random() + '" ' +
'onerror="fail();" ' + 'onload="test2();">';
function fail()
{
alert("fail")
}
function pass()
{
alert("pass")
}
function test2()
{
document.getElementById('b').innerHTML +=
'<img id="testImage2" style="display: none;" ' +
'src = http://i.microsoft.com/about/shared/templates/components/mscomFooter/logo.png?' + Math.random() + '" ' +
'onerror="fail();" ' + 'onload="pass();">';
}
</script>
</body>
</html>
What am I doing differently?
First and foremost, I am not manipulating the innerHTML of the document.body. I am manipulating two different div's (more on that in a moment). Modifying innerHTML can be a little questionable, things don't register correctly with existing frameworks and then they don't always behave as expected. Even if this didn't cause issues, it generally is frowned upon.
Second, I used two different locations to load the two different images. Your two scripts were having a bit of a battle royale over who executed in what order while you had them both going to the same spot. I simply separated the Hatfields and the McCoys and all was well in the Appalachias.
instead of document.getElementsByTagName("body")[0] , use document.body . its the same, but easier. the same goes for document.head , document.title , document.documentElement (html tag) , document.applets document.anchors , document.embeds , document.forms , document.images
加载中,请稍侯......
精彩评论