JavaScript: register a custom script type and define a handler?

Question

HTML elements with a unique custom type attribute are ignored by the browser. Sometimes these are used by template engines. How do I define what happens when such a script element is loaded/created? (either while loading the page or when inserted dynamically) In other words, does an onCreateElement event of some sorts exist in the DOM?

I could quite easily iterate through all script elements with attribute type=text/mycustomtype when the DOM loads using for instance the querySelector and then parse them with a function. This however does not work when a new script element is created and appended programatically. Is this currently possible?

var d = document.createElement('script')
d.setAttribute('type', 'text/mycustomtype')
d.innerHTML = 'define foo = 1;' // some code in some custom language
document.body.appendChild(d)

In this case, nothing will happen because the browser will ignore this unknown type. Can I somehow define a handler function for this? Thanks in advance.

Can you provide more context? Why do you need to add these elements after the DOM loaded? If the DOM and scripts have a lready been loaded, why wouldn't you just call the handler directly? myHandler('define foo = 1;') ? — Felix Kling
– Felix Kling, Commented May 29, 2017 at 21:30
I think my question is pretty straightforward. I want to define a new script type that will be interpreted by a custom function the moment it is initialized. — Jochem Stoel
– Jochem Stoel, Commented May 29, 2017 at 21:36
I understand. I don't that's possible so I'm suggesting alternatives. — Felix Kling
– Felix Kling, Commented May 29, 2017 at 21:41
If you'd really like to do this for whatever reason and detect changes in the document, have a look at Mutation Observers. — yezzz
– yezzz, Commented May 29, 2017 at 21:56
@yezzz I already did. However I could not make it work by observing the document element. Can you provide an example? — Jochem Stoel
– Jochem Stoel, Commented May 29, 2017 at 23:19

russau · Accepted Answer · 2021-07-22 09:44:36Z

1

I recently saw python script running in a browser using brython. View source and I see:

<script type="text/python3">
  from interpreter import Interpreter

  # open REPL in textarea with id "code"
  Interpreter("code")
</script>

I wanted to know how this is possible. I googled for the answer, and found the dreaded stackoverflow question that's exactly what I want - with no answers.

I found a good answer in: Everything I Know About The Script Tag. It's exactly as you predicted when you say iterate through all script elements.

Their example looks like this:

<script type="text/emerald">
  make a social network
    but for cats
</script>

<script>
  var codez = document.querySelectorAll('script[type="text/emerald"]');
  for (var i=0; i < codez.length; i++)
    runEmeraldCode(codez[i].innerHTML);
</script>

answered Jul 22, 2021 at 9:44

russau

9,1086 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

JavaScript: register a custom script type and define a handler?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related