Iframe Doesn't Load URL, but Hyperlink Works (Passing record values in embeded code)

Hello Softr Community,

I’m currently using Softr alongside Fillout and Airtable for a project. I have encountered an issue while trying to load a specific URL into an iframe using JavaScript.

Here’s the situation:

I’m attempting to extract a record ID from the current URL (record ID is from an Airtable record), append it to a base URL from Fillout, and then load that resultant URL into an iframe on my Softr page. The base URL for the Fillout form is Fillout | Powerful forms and surveys[[Fillout custom recordID]].

<iframe id="myIframe" width="100%" height="800px" frameborder="0" marginheight="0" marginwidth="0" title="Rekrutacja test"></iframe>
<div id="linkContainer"></div>

<script type="text/javascript">
    // get the current URL
    var currentUrl = window.location.href;

    // extract everything after the '=' symbol
    var recordID = currentUrl.substring(currentUrl.indexOf('=') + 1);

    // get the iframe element
    var iframe = document.getElementById('myIframe');

    // set the iframe's src attribute
    var iframeSrc = "https://forms.fillout.com/t/XXX?id=" + recordID;
    iframe.src = iframeSrc;

    // create a hyperlink to the iframe's URL
    var hyperlink = document.createElement('a');
    hyperlink.href = iframeSrc;
    hyperlink.textContent = 'Link to the form';

    // get the link container element
    var linkContainer = document.getElementById('linkContainer');

    // add the hyperlink to the link container
    linkContainer.appendChild(hyperlink);
</script>

What’s intriguing is that while the iframe doesn’t seem to load the URL correctly, the hyperlink that gets generated using the exact same URL works perfectly fine. The hyperlink correctly navigates to the form on forms.fillout with the appended record ID.

I suspect that there might be a restriction on the target website (forms.fillout) related to loading content in an iframe from a different domain, possibly due to same-origin policy. However, I do not have control over this target website to confirm or change this.

I would appreciate any insights or suggestions on how I can get the iframe to load the URL correctly in this scenario.

It’s possible that the issue you’re facing is related to the same-origin policy, which prevents loading content from a different domain in an iframe for security reasons. If the target website (forms.fillout) has implemented certain security measures, it might block the content from being loaded in an iframe.
Solution:
Instead of loading the content in an iframe, you can redirect the user to the target URL with the appended record ID. You can use JavaScript’s window.location.href to do this. While this won’t display the content on your Softr page directly, it will ensure that users can access the form without being blocked by the same-origin policy.

Yeah that might be it. Thanks for the explanation. Cheers