Retrieve response headers from including external javascript file

Question

I am looking for a way to include an external .js file and receive the response headers from that request.

<script src="external/file.js?onload=callback">
function callback(data) {
    data.getAllResponseHeaders();
}
</script>

Obviously, this doesn't seem to work.

How do I get the response header from including the javascript? It can not be a second request.

In your answer, please avoid using jQuery.

Thanks for any help.

WORKING EXAMPLE Thanks to gaetanoM

oXmlHttp.withCredentials = true; is for CORS

oXmlHttp.responseType = 'text'; is for DOM input?

Here is the code I use now;

<script>
    function loadScript(url) {

    var oXmlHttp = new XMLHttpRequest();            
        oXmlHttp.withCredentials = true;
        oXmlHttp.responseType = 'text';
        oXmlHttp.open('GET', url, true);
        oXmlHttp.onload = function () {

          if( oXmlHttp.status >= 200 || oXmlHttp.status == XMLHttpRequest.DONE ) {

            var x = oXmlHttp.getAllResponseHeaders();
            console.log(x);

            if(oXmlHttp.responseText !== null) {

                var oHead = document.getElementsByTagName('HEAD').item(0);
                var oScript = document.createElement("script");
                    oScript.language = "javascript";
                    oScript.type = "text/javascript";
                    oScript.defer = true;
                    oScript.text = oXmlHttp.responseText;
                    oHead.appendChild(oScript);

            }

          }

        }
        oXmlHttp.send();
    }

    loadScript("http://url/to/file.js");        
</script>

gaetanoM · Accepted Answer · 2017-10-02T20:26:42.503

getAllResponseHeaders(): The XMLHttpRequest.getAllResponseHeaders() method returns all the response headers, separated by CRLF, as a string, or null if no response has been received. If a network error happened, an empty string is returned.

That means you need to load the external js with a XMLHttpRequest:

Moreover, in this way you load only one time the file.

function loadScript(url) {
    var oXmlHttp = new XMLHttpRequest();
    oXmlHttp.onreadystatechange = function () {
        if (oXmlHttp.readyState == XMLHttpRequest.DONE) {
            if (oXmlHttp.status == 200) {


                var x = oXmlHttp.getAllResponseHeaders();
                console.log(x);


                if (oXmlHttp.responseText != null) {
                    var oHead = document.getElementsByTagName('HEAD').item(0);
                    var oScript = document.createElement("script");
                    oScript.language = "javascript";
                    oScript.type = "text/javascript";
                    oScript.text = oXmlHttp.responseText;
                    oHead.appendChild(oScript);
                }
            } else {
                console.log("Error", oXmlHttp.statusText)
            }
        }
    }
    oXmlHttp.open('get', url);
    oXmlHttp.send();
}


loadScript("11.js?onload=callback");

Does exactly what I wanted it to do, thank you! For CORS, I added oXmlHttp.withCredentials = true; — Hugo Cox, Oct 02 '17 at 19:38
The function creates 3 script blocks in the . 1 is empty, the 2 others are the javascript it retrieves. I don't understand why it does that. — Hugo Cox, Oct 02 '17 at 20:02
I changed your script a little bit, most notably the onreadystatechange to onload because it would fire up the function multiple times. — Hugo Cox, Oct 02 '17 at 20:16
@HugoCox You are right. My mistake was to mix the following two properties: status and readyState. Thanks so much. Snippet updated — gaetanoM, Oct 02 '17 at 20:31

Retrieve response headers from including external javascript file

1 Answers1