分类导航

HTML5 发布时间：2022-04-25 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了html5 – 如何在使用Server Sent Events时删除safari的加载轮，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

我正在使用 HTML5的Server Sent Events将更新推送到我的在线客户端. Firefox和Chrome上的一切都运行良好,但Safari随时都有加载轮.也许是因为他将SSE视为页面中加载的内容.

我怎么能对Safari说SSE不是加载的东西而是简单的更新脚本,所以用户在页面真正加载后不会看到加载轮？

这是客户端正在查看的实时更新的html页面：

<!DOCTYPE html>
<html>
<head>
  <Meta charset="UTF-8">
  <title>SSE Tester</title>
</head>
<body>
    <h1>SSE Output</h1>
    <div id="result"></div> 
    <h1>Debug Console</h1>
    <div id="status"></div>   
    <script>
    //SSE si compatible
    if(typeof(EventsourcE)!=="undefined")
    {
        var i = 1;
        var source=new Eventsource("demo_sse.PHP");



        //Lorsque le serveur envoie un message
        source.onmessage=function(event)
        {
            //Validation de l'origine du serveur
            if (event.origin != 'https://secure.mydomain.com') 
            {
                document.getElementById("status").innerHTML+= "<br><b>Oups! Looks like something went wrong!\n\nplease contact webmaster@mydomain.com with the following error :</b><p><pre>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;The Origin of the Eventsource wasn\'t coming from our secure server!</pre>";
                return;
            }
            document.getElementById("result").innerHTML+= "#" + i + " " + event.data + "<br />";            
            i++;
        }   

        //EventListener
        source.addEventListener('message',function(E)
        {
            console.log(e.data);
            //document.getElementById("status").innerHTML+= "message Recevied<br />";
        },falsE);

        source.addEventListener('open',function(E) 
        {
            // Connection was opened.
            document.getElementById("status").innerHTML+= "Connection #" + i + " opened<br />";
        },falsE);

        source.addEventListener('error',function(E)
        {
            if (e.readyState == Eventsource.CLOSED)
            {
                // Connection was closed.
                document.getElementById("status").innerHTML+= "Connection closed by the server<br />";
            }
            else
            {
                // Error.
                document.getElementById("status").innerHTML+= "<b>Error Connection interrupted</b><br />";
            }
        },falsE);
    }
    else
    {
        document.getElementById("result").innerHTML="Sorry,your browser does not support server-sent events...";
    }     

    </script>    
</body>
</html>

还有我的demo_sse.PHP脚本(服务器端)的代码：

<?PHP
$clientLatest = "1";
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
while(true)
{
    //Retreive latest version
    $filename = "version.txt";
    $handle = fopen($filename,"r");
    $serverLatest = fread($handle,filesize($fileName));
    fclose($handlE);

    if ($clientLatest < $serverLatest)
    {
        //update client 
        $time = date("H:i:s");
        echo "data: updating to Version: $serverLatest because client's Version: $clientLatest at: {$timE}\n\n";
        $clientLatest = $serverLatest;
        ob_flush();
        flush();
    }   
    //sleep( rand(2,7));
    sleep(1);
}
?>