I inherited a site build on Netlify using Gridsome and Vue Server-Side Rendering (SSR). The site is pretty good. It loads very fast and the content is easily maintained by people that are not programmers. However, we occasionally want to embed a form from another site, such as OpenForms.com, and that is challenging. The idea behind Vue SSR is that the server will render and load ALL the content then provide it to the browser, and trying to run JavaScript on the client is challenging because traditional events used by SPA and web page JavaScript programmers don’t fire.
Furthermore, the Gridsome CMS uses Markdown for web page content, but the ability to place HTML and JavaScript in these pages is limited. I battled for days to create a solution and am sharing how I made it work. I’ll admit it may not be the best solution; please let me know if there is a better way; but this solution works robustly.
Step 1: In the Gridsome MarkDown page, add the anchor tag that links to your form as provided by OpenForms. Something like this:
<a class="openforms-embed" href="https://us.openforms.com/Form/{your form ID here}">Click here to view form.</a>
I did not include the script tag to load the JavaScript here because it won’t load reliably here, so I load it elsewhere.
Step 2: On the Vue page that renders the MarkDown page from Step 1, add code in the mounted() and updated() events. (The console.log is not necessary, but I use it to help me understand what is going on.)
export default {
mounted() {
console.log("mounted basic: " + window.location.pathname);
evalScripts()
},
updated() {
console.log("updated basic: " + window.location.pathname);
evalScripts()
},
Step 3: The important piece is calling the evalScripts() method I wrote which is this:
function evalScripts() {
//This SeamlessOpenForms is specific to USOpenForms to get an openform to render every time
//the page is refreshed or viewed.
if (typeof(SeamlessOpenForms) != 'undefined')
{
SeamlessOpenForms.loadOpenForms();
}
else {
const openforms = document.querySelectorAll(".openforms-embed");
if (openforms.length>0)
{
console.log("missing SeamlessForms: " + window.location.pathname);
const scriptPromise = new Promise((resolve, reject) => {
var scriptElement = document.createElement('script');
document.body.appendChild(scriptElement);
scriptElement.src = 'https://us.openforms.com/Scripts/embed-iframe.js';
scriptElement.onload = resolve;
scriptElement.async = true;
});
scriptPromise.then(() => { SeamlessOpenForms.loadOpenForms();});
}
};
}
I will attempt to explain what I think is going on with USOpenForms and the code above. First of all, this code is risky because I reviewed the JavaScript in https://us.openforms.com/Scripts/embed-iframe.js provided by OpenForms to figure out what to do here, and it is very possible that OpenForms will change their JavaScript and what I am doing here will no longer work (our fallback is to put this in an Iframe, but that causes two vertical scroll bars).
When the JavaScript file (embed-iframe.js) loads it executes and looks for any anchor tags in the DOM with a class of .openforms-embed. If it finds an item with that tag, it uses the src property to pull in the form and render it within the current page. However, if a user navigates first to another MarkDown page, based on the same Vue Page, the embed-iframe.js looks for those anchor tags on that MarkDown page and does not find them. When the user navigates to the MarkDown page containing the anchor tag, the embed-iframe.js does not load and run to look for anchor tags because it already did so when the first MarkDown page for that Vue component loaded.
The script above, gets called by either the mounted() or updated() event, one of which will fire every time a MarkDown page is loaded or refreshed. The script will render the OpenForm via SeamlessOpenForms.loadOpenForms() if the JavaScript to do so is already loaded, but if not it will dynamically load that JavaScript, then perform the render code (SeamlessOpenForms.loadOpenForms();)
FYI – Here is a simple example of loading the form in an IFrame, which is what we did initially in the MarkDown until I got the embedded form JavaScript to work.
<iframe height="600px" width="100%" style="border:none;" src="https://us.openforms.com/Form/{your form id}"></iframe>
The explanation:
In the Gridsome/Vue SSR architecture, some window/DOM events only fire when the first web page (the first MarkDown page) based on that Vue Page is loaded. So if you have dozens of MarkDown files that all use the same Vue Page (such as BasicPage.Vue), some javascript methods and Vue events only run when the first MarkDown page based on the Vue Page is loaded. But the mounted() or updated() events always fire when a MarkDown page is loaded, rendered, or refreshed.
Rob Kraft's Software Development Blog 