Wednesday, 16 January 2019

Continue to load HTML when

I was asked in a Job interview, long time ago (advanced defensive Js )

We want to call a synchronous script using JS code (with this following html: <script type="text/javascript" src="...."></script>). On occasions, the script loading takes too much time. Please suggest a way that if the script takes more than X seconds to load , the whole page will be loaded (except this synchronous script). Note that we should not change the script to run asynchronously (for example, via appendChild). No server.

Well, I had a couple of approaches :

-remove the dom
-window.abort
-mess up the document by document.write("'</s'+'cript>'")
-moving it to an iframe
-adding headers of CSP

Nothing worked.

Here is the code (for example) to remove the script dom tag :

Notice that there is TEXT after the script. So it is expected to see the text after 1 sec.

<body>
  <script>
    setTimeout( function (){
 document.querySelector('#s').parentNode.removeChild(document.querySelector('#s'))

    },1000); //change here
  </script>

<script id ='s'  src="https://www.mocky.io/v2/5c3493592e00007200378f58?mocky-delay=40000ms" ></script>
    <span>!!TEXT!!</span>
</body>

Question

I can't seem to find the trick for how can I make the page continue loading after a certain timeout. How can I do that?

Fiddle

BTW I've seen interesting approaches here



from Continue to load HTML when

No comments:

Post a Comment