Loading external script with jQuery and no async

Question

I need to load an external script at a specific location on the page after two seconds and without async. In other words, the script needs to load exactly where I place it in the page HTML after two seconds. When I use the below code, I'm getting a console error:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

setTimeout(function(){
   $.ajax({
        url: 'https://example.com/embed.js',
        async: false,
        dataType: "script",
    });
}, 2000);

Why am I getting that error if I have async set to false?

Answer 1

Why am I getting that error if I have async set to false?

The async property only applies to XHR requests (and the functionality it triggers is deprecated there anyway). You said dataType: "script", so the request is handled by injecting a <script> element into the document and not by using XHR.

I need to load an external script at a specific location on the page after two seconds and without async. In other words, the script needs to load exactly where I place it in the page HTML after two seconds.

Given the external script makes use of document.write , I don't think this is possible.

You should rewrite it to use DOM manipulation instead.

By making use of document.currentScript you can identify where in the DOM the <script> element was placed and insert the content there.

The script that is loading is for a third party form (Kajabi) and I can't change how they use document.write

The nasty approach to this would be to let it write into an element that is set to display: none in CSS and then toggle the display value on a timer.