Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom Footer has no Javascript support? #575

Closed
Thurrax opened this issue Aug 20, 2016 · 5 comments
Closed

Custom Footer has no Javascript support? #575

Thurrax opened this issue Aug 20, 2016 · 5 comments

Comments

@Thurrax
Copy link

@Thurrax Thurrax commented Aug 20, 2016

I tried to add Adsense Banners to the Footer, but the page does not load the Code. If i write plain text to it, it only shows the text but not the banner or the code (show source). If i directly open the footer file, it shows me the adbanner..

Why its not working?

@RomeSilvanus

This comment has been minimized.

Copy link

@RomeSilvanus RomeSilvanus commented Aug 21, 2016

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.
(The script being this, because I can't into JS myself: http://www.javascriptkit.com/script/cut15.shtml). Now I can see that _h5ai is removing the JS in the div it's putting the header file content in. Is there any way to make it keep the JS anyway?

@lrsjng

This comment has been minimized.

Copy link
Owner

@lrsjng lrsjng commented Aug 22, 2016

it's using innerHTML to insert the content:

HTML5 specifies that a <script> tag inserted via innerHTML should not execute.

@genesixx

This comment has been minimized.

Copy link

@genesixx genesixx commented Oct 29, 2016

Any update on this ? i added a script like that http://hastebin.com/quhibegeyo.js it's buggy

@mapleleafs89

This comment has been minimized.

Copy link

@mapleleafs89 mapleleafs89 commented Dec 29, 2017

Any idea how to get js working in the header/footers? Any workaround for the innerHTML method?

@ahobsonsayers

This comment has been minimized.

Copy link

@ahobsonsayers ahobsonsayers commented Mar 30, 2018

Sorry I'm late to the party, but I thought I'd post the 2 ways I know you can add JavaScript to h5ai custom headers/footers.

Currently h5ai adds the header/footer html to the page using innerhtml. This means any JavaScript within html script tags will not be executed. We can get around this limitation however either by using an iframe or a clever "hack" I've read about.

Using iframes:

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.

Example _h5ai.header.html:

<iframe frameborder="0" scrolling="no" style="width: 100%; height: 100%" srcdoc="

<!DOCTYPE html>
<html>

<head>
    <script src='file_will_execute.js'></script>
</head>

<body>
    <h2>Will Display heading 2</h2>
    <p>Will Display paragraph</p>
    <script>
        document.write('Will Execute');
    </script>
</body>

</html>

">

Using the "hack":

Although JavaScript inside script tags will not be executed in the header/footer html, it is possible to include the line below in your header/footer file to execute some code.

<img src="null" style="display: none" onerror="document.write('Will Execute');">

This line tries to load the image "null" but when it can't find the image as expected, it executes the onerror JavaScript code between the quotes (" "). The style="display: none;" is to prevent a broken image icon showing.

As the onerror attribute takes string, it is again important that all quotes in the JavaScript string are changed to apostrophes.

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:

<script src='iframeResizer.contentWindow.min.js'></script>

Then outside the iframe in the h5ai header/footer html file, at the very end, I add the function needed for the resizer to work using the hack:

<img src="null" style="display: none" onerror="iFrameResize({checkOrigin:false, heightCalculationMethod:'lowestElement'})">

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:

<iframe frameborder="0" scrolling="no" style="width: 100%" srcdoc="

<!DOCTYPE html>
<html>

<head>

    <!--Import CSS library .CSS file-->
    <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css'>

</head>

<body>

    <!--Demo Content-->
    <div class='row'>
        <div class='col s12'>
            <div class='card'>
                <div class='card-content'>
                    <div class='card-title' style='text-align: center;'>
                        This is a Demo!
                    </div>
                    <p>Demo Text</p>
                </div>
            </div>
        </div>
    </div>

    <!--Import CSS library JavaScript files-->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js'></script>

    <!--Initialise CSS library-->‎
    <script type='text/javascript'>
        M.AutoInit();
    </script>

    <!--Import Iframe resizer library-->
    <script src='https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.0/iframeResizer.contentWindow.min.js'></script>

</body>

</html>

">Cannot Show Info. Please upgrade Browser</iframe>

<!--Initialise iframe resizer. Need to use hack as not found within iframe-->
<img src="null"  style="display: none" onerror="iFrameResize({checkOrigin:false, heightCalculationMethod:'lowestElement'})">

Hope I helped!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.