JavaScript en OnClick Evento no ejecutado mientras se carga la página en IOS -- javascript campo con ios camp Relacionados El problema

Javascript in onclick event not executed while page is loading in IOS


0
vote

problema

Español

Tengo un enlace a una página donde se realiza algún cálculo pesado. La respuesta puede retrasarse hasta 12 segundos. Así que quiero decirle al usuario que el cálculo está en progreso mostrando un girador en la página.

El Spinner funciona en Windows 10 pero no en iOS. Lo he probado en iPad y MacBook Pro2015 con MacOS High Sierra.

Para la prueba, he hecho esta página en un servidor Apache que ejecuta PHP.

  <?php   if (isset($_GET['wait'])) {     sleep(12); // set script on server to sleep for 12 sec.   }  ?>  <!DOCTYPE html>  <html>  <head>  <title>Test IOS Spinner</title>  <style type="text/css">     body {         margin: 0;     }      #wait {         display: none;         position: fixed;         top:0;         left:0;         width: 100vw;         height: 100vh;         background-color: rgba(224, 224, 224, 0.6);     }      .loader {         position: fixed;         top: 50vh;         left: 50vw;         margin: 4px auto;         border: 4px solid blue;         border-top: 4px solid transparent;         border-bottom: 4px solid transparent;         border-radius: 50%;         width: 24px;         height: 24px;         animation: spin 2s linear infinite;     }      @keyframes spin {         0% { transform: rotate(0deg); }         100% { transform: rotate(360deg); }     }  </style>  </head>  <body>     <div id="wait">       <div class="loader">       </div>     </div>     <a href="index.php?wait" onclick="testspinner()">Wait 12 secunds</a>     <script type="text/javascript">        function testspinner() {            document.getElementById('wait').style.display = 'block';        };     </script>  </body>  </html>   
  • Windows: Cuando ejecuto el código de arriba y haga clic en el enlace, aparece el Spinner Mientras la página está cargando. Lo he probado en Chrome 63, es decir, 11 y Firefox 58.

  • iOS: Cuando hago clic en el enlace, el hilador no aparece mientras la página es cargando. Si detengo la carga de la página dentro de los 12 segundos, aparece el Spinner. Lo he probado en Chrome, Firefox y Safari.

Parece que los navegadores en iOS no continúan con el JavaScript mientras ha realizado una solicitud al servidor.

¿Qué estoy haciendo mal? ¿Hay una solución?

/ Jesper

Original en ingles

I have a link to a page where some heavy calculation is made. The response may be delayed up to 12 seconds. So I want to tell the user that the calculation is in progress by showing a spinner on the page.

The spinner works on Windows 10 but not on IOS. I have tested it on iPad and MacBook Pro2015 with macOS High Sierra.

For the test I have made this page on an Apache server that runs PHP.

<?php   if (isset($_GET['wait'])) {     sleep(12); // set script on server to sleep for 12 sec.   }  ?>  <!DOCTYPE html>  <html>  <head>  <title>Test IOS Spinner</title>  <style type="text/css">     body {         margin: 0;     }      #wait {         display: none;         position: fixed;         top:0;         left:0;         width: 100vw;         height: 100vh;         background-color: rgba(224, 224, 224, 0.6);     }      .loader {         position: fixed;         top: 50vh;         left: 50vw;         margin: 4px auto;         border: 4px solid blue;         border-top: 4px solid transparent;         border-bottom: 4px solid transparent;         border-radius: 50%;         width: 24px;         height: 24px;         animation: spin 2s linear infinite;     }      @keyframes spin {         0% { transform: rotate(0deg); }         100% { transform: rotate(360deg); }     }  </style>  </head>  <body>     <div id="wait">       <div class="loader">       </div>     </div>     <a href="index.php?wait" onclick="testspinner()">Wait 12 secunds</a>     <script type="text/javascript">        function testspinner() {            document.getElementById('wait').style.display = 'block';        };     </script>  </body>  </html> 
  • Windows: When I run the code above and click on the link then the spinner appears while the page is loading. I have tested it in Chrome 63, IE 11 and Firefox 58.

  • IOS: When I click on the link the spinner does not appear while the page is loading. If I stop the page loading within the 12 seconds, the spinner appears. I have tested it in Chrome, Firefox and Safari.

It seems browsers on IOS does not continue the javascript while you have made a request to the server.

what am I doing wrong. Is there a workaround?

/Jesper

     
     
     

Lista de respuestas

0
 
vote

Bueno, podría intentar colocar el Spinner antes de haciendo la solicitud del servidor:

  LIKE3  

ahora, en LIKE4 :

  LIKE5  

Utilicé una llamada a LIKE6 para que el navegador tenga tiempo para prestar el Spinner antes de hacer la solicitud, aunque no estoy seguro de que sea necesario. Puedo probarlo ahora mismo. Podría funcionar solo haciendo LIKE7 directamente.

 

Well, you could try putting the spinner before making the server request:

<a href="index.php?wait" onclick="testspinner(event)">Wait 12 secunds</a> 

Now, in testspinner:

function testspinner(event) {     event.preventDefault();     document.getElementById('wait').style.display = 'block';     setTimeout(function() {         // let the browser render, and navigate:         window.location = 'index.php?wait';     }, 0); } 

I used a call to setTimeout so the browser has time to render the spinner before making the request, though I'm not sure that is necessary. I can test it right now. It might work just doing window.location = ... directly.

 
 
         
         

Relacionados problema

65  ¿Qué #defines están configurados por Xcode al compilar para iPhone  ( What defines are set up by xcode when compiling for iphone ) 
Estoy escribiendo un código semi-portátil y quiero poder detectar cuando estoy compilando para iPhone. Así que quiero algo como #ifdef IPHONE_SDK... . Pres...

31  ¿Cómo doy a mis sitios web un icono para iPhone?  ( How do i give my websites an icon for iphone ) 
¿Cómo configuro el icono que aparece adecuado en el iPhone para los sitios web que he creado? ...

2  iPhone 4.0 SDK UIWebView se bloquea con el error DomhtMlelement  ( Iphone 4 0 sdk uiwebview crashes with domhtmlelement error ) 
Mi aplicación tiene una UIWebView y abro una página de Twitter OAuth con él. Cuando abro la página de OAUTH, funciona bien. Después de iniciar sesión, red...

103  Cómo calcular el tiempo en horas entre dos fechas en iOS  ( How to calculate time in hours between two dates in ios ) 
¿Cómo puedo calcular el tiempo transcurrido en horas entre dos veces (posiblemente ocurriendo en días diferentes) en iOS? ...

20  Personalizando el menú más en una barra de pestaña  ( Customizing the more menu on a tab bar ) 
Estoy usando una barra de pestañas (UitanabBarController) en mi aplicación y deseo personalizar la apariencia de la tabla que aparece cuando hace clic en el b...

1  ¿Cómo instalar un Controller de navegación como la vista raíz en una barra de pestaña?  ( How to install a navigationcontroller as the root view in a tab bar ) 
¿Cómo instalar un control de navegación como la vista raíz en una vista de barra de pestaña? En mi aplicación: didfinishlaunchingwitingwithoptions: Método I...

71  ¿Cómo puedo calcular el tamaño de una carpeta?  ( How can i calculate the size of a folder ) 
Estoy creando una carpeta para almacenar imágenes dentro de los documentos con mi aplicación de iPhone. Quiero poder mantener el tamaño de esta carpeta hasta ...

99  Aplicación de iPhone en modo horizontal, sistemas 2008  ( Iphone app in landscape mode 2008 systems ) 
Tenga en cuenta que esta pregunta es de 2008 y ahora es de solo interés histórico. ¿Cuál es la mejor manera de crear una aplicación de iPhone que se ejecut...

75  iPhone "Diapositiva para desbloquear" animación "  ( Iphone slide to unlock animation ) 
¿Alguna idea de cómo Apple implementó la "Slide to Desbloquear" (también, "Diapositiva para apagar" es otra animación de otro ejemplo)? Pensé en algún tipo ...

386  Establecer el Título de Uibutton UILABEL Tamaño de fuente programáticamente  ( Set uibutton title uilabel font size programmatically ) 
Necesito establecer el tamaño de fuente del título UILabel de un UIButton Programática. ...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos