Fatal编程技术网
  • html/
  • Html 如何删除safari'；s在使用服务器发送的事件时加载控制盘

Html 如何删除safari'；s在使用服务器发送的事件时加载控制盘

html safari

Html 如何删除safari'；s在使用服务器发送的事件时加载控制盘,html,safari,push,Html,Safari,Push,我正在使用HTML5的服务器发送事件将更新推送到我的在线客户端。在Firefox和Chrome上一切都很好，但在Safari上，始终有一个加载轮。可能是因为他检测到SSE正在页面中加载 我怎么能对Safari说SSE不是加载的东西，只是一个更新脚本，这样用户在页面真正加载后就看不到加载轮了 这是客户端正在查看的实时更新的html页面： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

我正在使用HTML5的服务器发送事件将更新推送到我的在线客户端。在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>


SSE测试仪
SSE输出
调试控制台
//SSE si兼容
if（typeof（EventSource）！=“未定义”）
{
var i=1；
var source=neweventsource（“demo_sse.php”）；
//洛斯克·勒·塞维尔·恩沃伊联合国电文
source.onmessage=函数（事件）
{
//服务原厂验证
如果（event.origin！='https://secure.mydomain.com') 
{
document.getElementById（“status”）.innerHTML+=“
Oups！看起来好像出了什么问题！\n\n请与联系webmaster@mydomain.com出现以下错误：事件源的来源不是来自我们的安全服务器！”；
返回；
}
document.getElementById（“结果”）.innerHTML+=“#”+i+”“+event.data+”
；
i++；
}   
//事件监听器
source.addEventListener（'message'，函数（e）
{
控制台日志（如数据）；
//document.getElementById（“状态”）.innerHTML+=“接收到的消息
”；
}，假）；
source.addEventListener（'open'，函数（e）
{
//连接已打开。
document.getElementById（“状态”）.innerHTML+=“连接”#“+i+”已打开
；
}，假）；
source.addEventListener（'error'，函数（e）
{
if（e.readyState==EventSource.CLOSED）
{
//连接已关闭。
document.getElementById（“status”）.innerHTML+=“服务器关闭的连接
”；
}
其他的
{
//错误。
document.getElementById（“状态”）.innerHTML+=“错误连接中断
”；
}
}，假）；
}
其他的
{
document.getElementById（“结果”）.innerHTML=“对不起，您的浏览器不支持服务器发送的事件…”；
}
下面是我的demo_sse.php脚本（服务器端）的代码：

看起来使用javascript的超时功能修复了safari中的问题。只需在连接之前将脚本超时1000毫秒，这样safari的加载似乎就完成了，然后再连接到SSE服务器。
解决方案

使用javascript的超时函数

来自@exomic的详细信息如下：

将脚本标记中的脚本放入函数中，并通过
setTimeout


function startEventSource(domain, channel, statusEl, resultEl){
  // more code here
}
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=1", "statusA", "resultA") }, 1000);
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=2", "statusB", "resultB") }, 1000);



这意味着你正在挂UI线程。好吧，那我该怎么办？我不知道，不是网络人：）。我的观点是，问“如何拆下车轮”是问错了问题。问题是“如何防止挂起UI。这是问题所在，而不是光标动画。接下来，您可能需要给出一个示例，说明您正在做什么。是的，我认为我的编码可能在某个地方出错，但我不确定，因为所有其他浏览器（IE^^）除外）在没有加载wheelNo，Ed S的情况下工作。OP只是谈论Safari地址栏中的页面加载指示器，而不是“等待光标”。在超时后启动长寿命请求（long polling，SSE）是我所知道的唯一解决方法，但可能需要整整一秒钟。（遗憾的是，EventStream没有自动获得特殊处理…@exomic这是否仍然有效？我在IOS 7中运行Mobile Safari，并且仍然获得加载图标。确实如此；但是，修复iphone在大约一分钟后关闭sse连接的问题。

<script>
  //Original Javascript goes into a function
  function startEventSource() {
      //SSE si compatible
         if(typeof(EventSource)!=="undefined")
         {
             var i = 1;
             var source=new EventSource("demo_sse.php");

            // .. here are the more code ...
         }
  }
  setTimeout(startEventSource, 1000);
</script>



function startEventSource(domain, channel, statusEl, resultEl){
  // more code here
}
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=1", "statusA", "resultA") }, 1000);
setTimeout(function(){ startEventSource("https://secure.mydomain.com", "demo_sse.php?channel=2", "statusB", "resultB") }, 1000);