Home Is it possible to programmatically access the contents of external scripts from an HTML script tag?

Questions

Is it possible to programmatically access the contents of external scripts from an HTML script tag?

March 12, 2024

Lets say I am using the turndown Javascript package:

and loading it this way in my HTML:

<script src="https://unpkg.com/turndown/dist/turndown.js"></script>

This loads the following:

and makes TurnDown service available to be used as such:

var turndownService = new TurndownService({ headingStyle: 'atx', emDelimiter : '*' });

Is it possible to programmatically access the contents of such external scripts which has been loaded by the above script tag? Aka, is it possible to get the following:

var TurndownService = (function () {
  'use strict';

  function extend (destination) { ........

  .....

  return TurndownService;

}());

NOTE that I am asking for external scripts. I already know I can get contents of my own script by assigning the tag an id and then using innerHTML on it as such:

Get content inside script as text

The reason I need to do this is that I want to pass these third party scripts to a WebView in iOS using webkit handlers.

>Solution :

Yes! There is a document.scripts property that contains all scripts loaded on a page. However, external scripts loaded with src attribute won’t have innerHTML or textContent, so we will have to fetch it again.

In your case, you can get the contents like this:

const desiredUrl = "https://unpkg.com/turndown/dist/turndown.js"
const script = [...document.scripts].find(script => script.src === desiredUrl)

const url = script.src
const source = fetch(url).then(res => res.text()).then(source => {
  console.log(source.slice(0, 200)) // truncated not to spam console
})