+ Start a Discussion
Jon-Michael MurpheyJon-Michael Murphey 

Dynamically resize visualforce with iframe to allow use in desktop and SF1

I have a visualforce page that has an iframe with a prefill url to a third-party form tool, the tool works great on destop however it will not resize to work properly on SF1 app.

<apex:page showHeader="false" sidebar="false" standardStylesheets="false" standardController="Event" docType="html-5.0">

    <apex:iframe src="https://weirtestsurvey.tfaforms.net/30?tfa_215={!Event.OwnerId}&tfa_312={!Event.ID}&tfa_242={!Event.What.name}&tfa_217={!Event.What}&tfa_326={!Event.Subject}&tfa_327={!Event.Event_Start_Date__c}" scrolling="true" id="Iframe"/>

<script>
    // Resize the iframe that contains the Visualforce page
    function resizeIframe() {
        var frameHeight = document.body.scrollHeight;
        var iframeElements = parent.document.getElementsByTagName("iframe");
        for (var i = 0; i < iframeElements.length; i++){
            if (iframeElements[i].title == '{!$CurrentPage.Name}'){
                var iframeElement = parent.document.getElementById(iframeElements[i].id);
                if (iframeElement) {
                    iframeElement.style.height = (frameHeight)+"px";
                }
            }
        }
    }

    if (document.addEventListener) {
        checkIfReady = function() {
            document.removeEventListener("DOMContentLoaded", checkIfReady, false);
            resizeIframe();
        };
    }
    else if (document.attachEvent) {
        checkIfReady = function() {
            if (parent.document.readyState == "complete") {
                parent.document.detachEvent("onreadystatechange", checkIfReady );
                resizeIframe();
            }
        };
    }

    if (document.addEventListener) {
        document.addEventListener("DOMContentLoaded", checkIfReady, false);
    }
    else if (document.attachEvent) {
        parent.document.attachEvent("onreadystatechange", checkIfReady);
    }
</script>
</apex:page>