0

To emulate the loading percentage effect , I need the browser display the number of percentage in real time. I have found the the methods of jQuery like html() or text() could do it well, but I would like use native JS to do it . And the problem is in Safari……

How could I make Safari update the text in real time like in Chrome. I have test the properties of textContent/innerHTML/innerText ,and the methods of manipulating nodes like appendChild/replaceChild，etc. They all doesn't work in Safari ,but normal in Chrome.

I have made a simple demo ；

Live Demo

when you open the demo in Chrome ， the number will change with the steps of "for"circulation(from 0 to 3) , but the Safari will directly display the last result(3).

I am a newbie in web development , I don't know whether I express myself clearly.Thanks.

The following is my code:

HTML:

<div id="input_num">0</div>

JS:

var input_num = document.getElementById("input_num");
for(var i = 1;i<4;i++){
input_num.replaceChild(document.createTextNode(i),input_num.firstChild);
alert(i);}
Cheng.Lee
  • 186
  • 2
  • 11
  • Well your live demo does not run. It has a syntax error. – epascarello Oct 21 '15 at 12:37
  • Yeah, I am fixing it,thx. It's OK now – Cheng.Lee Oct 21 '15 at 12:41
  • Well I get *"Ignored call to 'alert()'*. The document is sandboxed, and the 'allow-modals' keyword is not set." in chrome with the page showing `3`. That is from the iframe blocking alert. If you want the page to update, you need to change how the looping happens and use `setTimeout` or `setInterval` or `requestAnimationFrame`. – epascarello Oct 21 '15 at 12:45
  • The "ignored call()..." is chrome 's new feature . You can see here http://stackoverflow.com/questions/32119446/ignored-call-to-alert-the-document-is-sandboxed-and-the-allow-modals-key/33262772#33262772 – Cheng.Lee Oct 21 '15 at 15:21
  • I know what it is... – epascarello Oct 21 '15 at 15:23
  • Thx for your comment. Could you tell more about the loops changing , and the methods text() or html() of jQuery work normally , is that jQuery 's method use the solutions you said above?Thank you very much – Cheng.Lee Oct 21 '15 at 15:31
  • http://stackoverflow.com/questions/3583724/how-do-i-add-a-delay-in-a-javascript-loop – epascarello Oct 21 '15 at 15:39
  • It's awesome ,I don't know how to express my thx : ) haha – Cheng.Lee Oct 21 '15 at 16:15

0 Answers0