Inject custom Javascript

Submitted by rob-recite on Thu, 02/10/2022 - 12:46
Forums: 
Developers
Hi We're currently working with a client that uses Moodle with the addition of H5P to offer content to their users.  We have noticed that the H5P content is delivered through an iFrame and as such we're not able to inject custom JavaScript code into this which would allow the solution's accessibilioty tools to be used (these are delivered via a javascript include).  We did come across this article: https://h5p.org/moodle-customization which seems to offer a way to customise the plugin but after a discussion with the client it seems that this will take a large amount of development from their side and as such it's not a viable solution.  

Does anyone know of any ways that custom JS can be injected into the H5P iFrame without a fundimantal extension of the renderer?

Thanks

otacke's picture

otacke

Thu, 02/10/2022 - 19:26

Hi rob-recite!

The effort necessary is implementing one single hook that will basically only add the paths to custom scripts to be loaded. Not sure what "large amount of development" is expected. If your H5P iframe's contents and moodle files tare served from the same domain, then you can access the iframe via DOM and inject your custom scripts that way. Otherwise, you'll have to patch H5P core or moodle's H5P integration and add scripts to be loaded that way.

Cheers,
Oliver