Why is an embedded form showing in Safari, but not in Chrome

  • Profile Image
    ColeCommunityChurch
    Asked on October 21, 2020 at 03:07 PM

    I have 3 forms on our page. The first loads fine in Chrome, but when you click the tab for the other two forms, they never load. All 3 work fine in Safari.

  • Profile Image
    Jed_C
    Answered on October 21, 2020 at 08:53 PM

    Can you please try removing the script part of all 3 embed codes and leave the iframe part only?

    ex.

    <iframe

       id="JotFormIFrame-202675221609958"

       title="Graphics and/or Video Design Request"

       onload="window.parent.scrollTo(0,0)"

       allowtransparency="true"

       allowfullscreen="true"

       allow="geolocation; microphone; camera"

          src="https://form.jotform.com/202675221609958"

       frameborder="0"

       style="

       min-width: 100%;

       height:7623px;

       border:none;"

       scrolling="no"

      ><br />

      </iframe>

      <script type="text/javascript">

       var ifr = document.getElementById("JotFormIFrame-202675221609958");

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

        var get = window.location.href.substr(window.location.href.indexOf("?") + 1);

        if(ifr && get.length > 0) {

         var src = ifr.src;

         src = src.indexOf("?") > -1 ? src + "&" + get : src + "?" + get;

         ifr.src = src;

        }

       }

       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";

          break;

         case "collapseErrorPage":

          if (iframe.clientHeight > window.innerHeight) {

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

          }

          break;

         case "reloadPage":

          window.location.reload();

          break;

         case "loadScript":

          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}), "*");

        }

       };

       if (window.addEventListener) {

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

       } else if (window.attachEvent) {

        window.attachEvent("onmessage", handleIFrameMessage);

       }

       </script>

    Make sure to remove the script code from all 3 embed codes. Let us know how it goes.