如何检查互联网连接并在HTML中的标签显示?

时间:2016-07-16 05:24:14

标签: javascript html

我有代码跟我检查互联网连接,并在html页面加载时显示标签中的在线/离线状态。但它不能正常工作。所以请帮我解决问题。还有一个脚本来检查互联网连接。

pages

我还附上了

下面的标签语法
<script type="text/javascript">

    function checkconnection() {

        var status = navigator.onLine;

        if (status) {

            document.getElementById("LblText").value = "ONLINE";

        } else {

            document.getElementById("LblText").value = "OFFLINE";
        }
    }

</script>

我想根据互联网连接可用性在线/离线显示标签文字。

3 个答案:

答案 0 :(得分:1)

试试这个,这将自动检测互联网连接的离线和在线状态。 您可以按照以下步骤注册这些事件的监听器:

  1. 在窗口,文档或document.body上使用addEventListener。

  2. 通过将document或document.body上的联机或脱机属性设置为JavaScript Function对象。

  3. &#13;
    &#13;
    details
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

<html>
<head>
    <title>Check Connection</title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }
        #mainContainer {
            border: 4px #007CA6 solid;
            background-color: #D2F4FF;
            width: 450px;
            height: 300px;
            text-align: center;
        }
        #mainContainer a {
            background-image: url("//www.kirupa.com/images/giant_cloud.png");
            background-position: center 70px;
            background-repeat: no-repeat;
            color: #00BFFF;
            display: block;
            font-family: Arial,Helvetica,sans-serif;
            font-size: 32px;
            padding-top: 200px;
            text-decoration: none;
        }
        #mainContainer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>

<div id="mainContainer">    
    <a href="javascript:void(0)">Check connection!</a>
</div>

<script>

    var link = document.querySelector("#mainContainer a");
    link.addEventListener("mousedown", checkConnection, false);

    function checkConnection(e) {
        if (doesConnectionExist() == true) {
            alert("connection exists!");
        } else {
            alert("connection doesn't exist!");
        }
    }

    function doesConnectionExist() {
        var xhr = new XMLHttpRequest();
        var file = "//www.kirupa.com/blank.png";
        var randomNum = Math.round(Math.random() * 10000);

        xhr.open('HEAD', file + "?rand=" + randomNum, false);

        try {
            xhr.send();

            if (xhr.status >= 200 && xhr.status < 304) {
                return true;
            } else {
                return false;
            }
        } catch (e) {
            return false;
        }
    }
</script>
</body>
</html>

答案 2 :(得分:0)

您是否在任何地方调用checkconnection()函数?你的逻辑存在,但由于你还没有调用函数,因此无法运行。

此外,尝试使用.innerHTML或.innerText而不是.value,除非您尝试更改输入字段。

<?php  
class PDF extends FPDF
{

function Header()
{
    $this->SetFont('Helvetica','',25);
    $this->SetFontSize(40);
    //Move to the right
    $this->Cell(80);
    //Line break
    $this->Ln();
}

//Page footer
function Footer()
{

}

//Load data
function LoadData($file)
{
    //Read file lines
    $lines=file($file);
    $data=array();
    foreach($lines as $line)
        $data[]=explode(';',chop($line));
    return $data;
}

//Simple table
function BasicTable($header,$data)
{ 

$this->SetFillColor(255,255,255);
//$this->SetDrawColor(255, 0, 0);
$w=array(38,21,90,7,12,7);

    //Header
    $this->SetFont('Arial','B',7);
    for($i=0;$i<count($header);$i++)
        $this->Cell($w[$i],7,$header[$i],1,0,'L',true);
    $this->Ln();

    //Data

    $this->SetFont('Arial','',7);
    foreach ($data as $eachResult) 
    { //width
        $this->Cell(10);
        $this->Cell(38,6,$eachResult["ecr_desc"],1);
        $this->Cell(21,6,$eachResult["itemcode"],1);
        $this->Cell(90,6,$eachResult["ite_desc"],1);
        $this->Cell(7,6,$eachResult["tqty"],1);
        $this->Cell(12,6,$eachResult["icount"],1);

        $this->Cell(7,6,$eachResult["total1"],1);
        $this->Ln();                        
    }
}

//Better table
}

$pdf=new PDF();  
$header=array('Model','Code','Desc','XFR','ACTUAL', 'DIFF');  

//************************//


//*** Table 1 ***//
$pdf->AddPage();

    $pdf->SetFont('Helvetica','',14);
    $pdf->Cell(75);
    $pdf->Write(5, 'Stock Receiving');

    $pdf->Ln();

    $pdf->Cell(22);
    $pdf->SetFontSize(8);
    $pdf->Cell(57);
    $result=mysql_query("select date_format(now(), '%W, %M %d, %Y') as date");
    while( $row=mysql_fetch_array($result) )
    {
        $pdf->Write(5,$row['date']);
    }
    $pdf->Ln();

    //count total numbers of visitors   

    $pdf->Cell(0);
    $pdf->Write(3, '             REFERENCE NUMBER: '.$Rid.'');

    $pdf->Ln();

    $pdf->Cell(0);
    $pdf->Write(2, '             DATE RECEIVED: '.$date.'');

    $pdf->Ln();

    $pdf->Cell(0);
    $pdf->Write(2, '             TOTAL ITEM: '.$icount.'');

    $pdf->Ln();
    $pdf->Ln(5);

$pdf->Ln(0);
$pdf->Cell(10);
$pdf->BasicTable($header,$resultData);
//forme();
//$pdf->Output("$d.pdf","F");
$pdf->Output();   
?>