How to pass language parameters on an IFrame

  • Marouane Zehni
    Asked on July 24, 2023 at 10:29 PM

    hi,

    if someone need to pass the language parameter from url to jotform iframe, supposing url is like this you can modify the iframe script like that:

    function updateIframeSrc(language) {

    const iframe = document.getElementById('ID_OF_JOTFORM');

    const src = iframe.src;

    // Check if the URL already has query parameters

    const separator = src.includes('?') ? '&' : '?';

    // Update the iframe src URL with the language parameter

    iframe.src = src + separator + 'language=' + language;

    }

    // Get the language from the URL and update the iframe src on page load

    document.addEventListener('DOMContentLoaded', function() {

    const urlParams = window.location.pathname.split('/');

    const language = urlParams[1] || 'en'; // Default language code if none is provided

    // Call the function to update the iframe src

    updateIframeSrc(language);

    });

    var ifr = document.getElementById("ID_OF_JOTFORM_IFRAME");

    if (ifr) {

    var src = ifr.src;

    var iframeParams = [];

    if (window.location.href && window.location.href.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(window.location.href.substr(window.location.href.indexOf("?") + 1).split('&'));

    }

    if (src && src.indexOf("?") > -1) {

    iframeParams = iframeParams.concat(src.substr(src.indexOf("?") + 1).split("&"));

    src = src.substr(0, src.indexOf("?"))

    }

    iframeParams.push("isIframeEmbed=1");

    ifr.src = src + "?" + iframeParams.join('&');

    }

    window.handleIFrameMessage = function(e) {

    if (typeof e.data === 'object') { return; }

    var args = e.data.split(":");

    if (args.length > 2) { iframe = document.getElementById("JotFormIFrame-" + args[(args.length - 1)]); } else { iframe = document.getElementById("JotFormIFrame"); }

    if (!iframe) { return; }

    switch (args[0]) {

    case "scrollIntoView":

    iframe.scrollIntoView();

    break;

    case "setHeight":

    iframe.style.height = args[1] + "px";

    if (!isNaN(args[1]) && parseInt(iframe.style.minHeight) > parseInt(args[1])) {

    iframe.style.minHeight = args[1] + "px";

    }

    break;

    case "collapseErrorPage":

    if (iframe.clientHeight > window.innerHeight) {

    iframe.style.height = window.innerHeight + "px";

    }

    break;

    case "reloadPage":

    window.location.reload();

    break;

    case "loadScript":

    if( !window.isPermitted(e.origin, ['jotform.com', 'jotform.pro']) ) { break; }

    var src = args[1];

    if (args.length > 3) {

    src = args[1] + ':' + args[2];

    }

    var script = document.createElement('script');

    script.src = src;

    script.type = 'text/javascript';

    document.body.appendChild(script);

    break;

    case "exitFullscreen":

    if (window.document.exitFullscreen) window.document.exitFullscreen();

    else if (window.document.mozCancelFullScreen) window.document.mozCancelFullScreen();

    else if (window.document.mozCancelFullscreen) window.document.mozCancelFullScreen();

    else if (window.document.webkitExitFullscreen) window.document.webkitExitFullscreen();

    else if (window.document.msExitFullscreen) window.document.msExitFullscreen();

    break;

    }

    var isJotForm = (e.origin.indexOf("jotform") > -1) ? true : false;

    if(isJotForm && "contentWindow" in iframe && "postMessage" in iframe.contentWindow) {

    var urls = {"docurl":encodeURIComponent(document.URL),"referrer":encodeURIComponent(document.referrer)};

    iframe.contentWindow.postMessage(JSON.stringify({"type":"urls","value":urls}), "*");

    }

    };

    window.isPermitted = function(originUrl, whitelisted_domains) {

    var url = document.createElement('a');

    url.href = originUrl;

    var hostname = url.hostname;

    var result = false;

    if( typeof hostname !== 'undefined' ) {

    whitelisted_domains.forEach(function(element) {

    if( hostname.slice((-1 * element.length - 1)) === '.'.concat(element) || hostname === element ) {

    result = true;

    }

    });

    return result;

    }

    };

    if (window.addEventListener) {

    window.addEventListener("message", handleIFrameMessage, false);

    } else if (window.attachEvent) {

    window.attachEvent("onmessage", handleIFrameMessage);

    }

    works for me

  • Richie JotForm Support
    Replied on July 25, 2023 at 10:01 AM

    Hi Marouane,

    Thanks for reaching out to Jotform Support. This is a great work around in passing language parameters in Iframe embed. Thanks for sharing it.

    Let us know if there is anything else we can help you with.

  • slash135
    Replied on July 25, 2023 at 10:36 AM

    Thanx Richie,

    i forget to put the url example : https://mywebsite.com/fr/page.php

    Hope helps someone.