How to change a publish template html to use a function that's within $ANIMATE_CC_SCRIPTS token?

Awhile ago I found a little bug when the html5 was added to the iOS home screen. With the web app open, during screen orientation changes, the canvas doesn't scale properly.

It's because Animate's resizeCanvas code fires too fast. So I added a setTimeout inside resizeCanvas to delay it slightly:

I've been editing my html files after every export. But it's time I make a custom publish template. I'm hitting a snag at trying to make the code work though.

In the default template html, the resizeCanvas function is within Animate's javascript $ANIMATE_CC_SCRIPTS token/variable:

In my custom publish template, I added a script after the $ANIMATE_CC_SCRIPTS token. It doesn't work:

// Added below $ANIMATE_CC_SCRIPTS in the template html
<script>
    window.addEventListener('resize', delayedResizeCanvas);
    function delayedResizeCanvas() {
        setTimeout(function(){
            resizeCanvas();
        }, 100);
    }
</script>

The only way the code seems to work, is when I add setTimeout inside the resizeCanvas. I can only do that after I export.

I tried to look in Animate's folders where the template javascript tokens/variables are kept. I thought I'd copy a duplicate and renamed it to $ANIMATE_CC_SCRIPTS_2 so that I don't mess up the default one. Can't find them though.

Is there a way to make the setTimeout code work outside of resizeCanvas?
Or to edit the javascript $ANIMATE_CC_SCRIPTS token/variable?

---

Update: Thanks to Muhammed Maruf, adding a setTimeout to the AdobeAn.makeResponsive function works. I can just add this script to my custom publish template, and won't need to edit any exported html files.

<script>
    window.addEventListener('resize', delayedResizeCanvas);
    function delayedResizeCanvas() {
        setTimeout(function(){
            AdobeAn.makeResponsive(true,'both',true,1,[canvas,anim_container,dom_overlay_container]);
        }, 100);
    }
</script>

---

Update 2: It seems that this method only works for a single frame. For movie projects where the timeline plays across multiple frames, it fires once or twice, then the canvas won't rescale anymore.

Adding a setTimeout within resizeCanvas makes the canvas scale consistently, but I'll just have to edit the html file manually after every export.

This seems almost impossible to do, but I found something else to solve your problem. In the .html page there is a function called "AdobeAn.makeResponsive". You can call it in a frame you need in the program as it is called there. For example, when it came to the 5th frame, I called it like this;

AdobeAn.makeResponsive(false,'both',false,1,[canvas,anim_container,dom_overlay_container]);