DOH! Network

  • News
  • ...
  • Johnny Leche

Welcome to the DOH! Network — The Official Website of Johnny Leche.

Saturday April 01, 2017

Cool things to do with JavaScript #197846:

Add a module where you put your script. Angular has a pretty cool feature where you can add an element and when Angular loads, it will add some content to that element. I don't currently use Angular on the DOH! Network homepage and wanted to add a "Now Playing" module to display what is playing on the Squeezebox so I threw a script in the header and had it do a document.write that stuck an image and label in the header. Then I got to thinking I should make it an official modules and usually I would add a div and a script but how to do it with just adding a script? Then I found a javascript way to find the parent node of my script so the module whould be added where I want it but I needed to check that some other scripts were loaded and when I did that, the module lost it's parent and targeted the body of the page. But then I found document.scripts. Check out document.scripts in your browsers Developer Tools. That will show an array of all scripts on a page. Expand that and you won't see anything interesting unless you add a name attribute to your script tag. With a name attribute, you can then find your specific script by looking for document.scripts[<unique script name>] and its parent node with document.scripts[<unique script name>].parentNode. With that, I was able to keep the module in the header and didn't need to add a target div.