-
Notifications
You must be signed in to change notification settings - Fork 1
5.) IFrame
On the site, you'll notice that there is an iFrame which references html/iframe.html instead of calling output/template.html directly. DON'T CHANGE THIS. This is intentional and has several benefits.
When changes are made and the email template is rebuilt, the iFrame containing the template is refreshed - This will reset your scroll location on that viewport. Aside from being super annoying (especially if you're making several changes rapidly and have to scroll all the way to the bottom to see how that change is reflected), there are also several latency issues that can cause quite a few bugs between when the template.html file is destroyed and rebuilt.
By using the iframe.html, it alleviates any sort of bugs related with latency issues. You can also style the background and stylize the iFrame contents.
The iframe.html contains a script that contains both jQuery and Axios. Axios will be used to fetch the current output/template.html and jQuery will append it to the page. Also included is a function that will allow the parent container to access and manually call this refresh request.
It will look like:
// in Typescript
let _window = (document.getElementById('iframeContainer') as any).contentWindow.window
_window.refreshIframe()
// in JS
let _window = document.getElementById('iframeContainer').contentWindow.window
_window.refreshIframe()