Dynamically insert iFrame
I needed to insert an iFrame that operates off of the query string parameters like so
/someplaceid12345/andthis?alsothis=93293
In the above situation I want to extract the someplaceid12345
and match it to another location to create a dynamic url source for the embedded iFrame
First extract the id
const currentUrl = window.location.href;
const idRegex = /(?<id>someplaceid\w+)/i;
const found = currentUrl.match(idRegex);
Now we have the id to match someplaceid12345
Create a lookup table (in this case it is small enough to hardcode)
const lookupTable = [
{ id: "someplaceid12345", iframeUrl: "https://supergreatplace.com/987654"},
];
Now match up and create and append to current body
if (found !== null) {
const newLink = lookupTable.find(z => z.id.toLowerCase() === found.groups.id.toLowerCase());
if (newLink !== null) {
const iframeContainer = document.querySelector('.body-content');
const iframe = document.createElement('iframe');
iframe.src = newLink.iframeUrl;
iframe.width = 1000;
iframe.height = 1000;
iframe.allow = "xr-spatial-tracking";
iframe.frameborder = 0;
iframeContainer.appendChild(iframe);
}
}