Join GitHub today
GitHub is home to over 40 million developers working together to host and review code, manage projects, and build software together.Sign up
Actually I just stumble across a similar thing.
For shits and giggles I wanted to include a rotating text in the header of one of my folder.
iframes will execute code within script tags as expected, but will also do so even if the iframe is inserted using innerhtml. We can use this property.
To prevent having to make another file to use as the source for the iframe in the header/footer html, we can use the srcdoc attribute to specify an html string within the tag which will be displayed inside the frame. Within this html string, any script tags will be executed.
The html string can be formatted for ease of reading as seen in the example.
By also setting the frame height, width, border width and turning off scrolling we can make the iframe look like simple inserted html.
As the srcdoc attribute takes a string between " ", it is important that all quotes in the html string (such as used to define classes) are changed to apostrophes.
Using the "hack":
My Personal use:
I use a mixture of both methods and I recommend most people do it this way.
iframe is a lot easier to use and insert content with as it allows you to easily add a working html file with scripts into the header/footer by making minimal changes and enclosing it in an iframe as explained above.
iframe also has the added benefit for me as I like to use an external CSS library to style my header/footers, and an iframe prevents any styling clashes between the stylesheet used in my header/footer and h5ai.
Since we are using an iframe to add our html content to the header/footer, it makes sense for the frame to autoresize for the content so it's easier to setup and we don't have to do it manually. To do this I use the iframe-resizer library on Github. To make this fully work we need set up a couple of things and use the hack method.
To use the library, in the h5ai options.conf I include the iframeResizer.min.js in the scripts array. In my header/footer iframe html I add to the end of the body:
I use the hack as this is the only way to execute the function as it is located outside the iframe. Check origin needs to be set to false for an srcdoc iframe to be resized.
Here's my example _h5ai.header.html:
Hope I helped!