Iframe is cutting off on Salesforce homepage, can I make its height adjust to height of my content?

Question

I embedded a visualforce page on the Salesforce homepage. The visualforce page retrieves a list of cases. My only problem is my iframe is cutting off halfway down. And if i put "height= 100%" it adds a lot of white space at the bottom of the page (too much). Any ideas? Thanks \

<iframe src="/apex/Test" width="100%" scrolling="no" frameborder="0"></iframe>        
<style type="text/css">h2 {display:none !important;}</style>

Answer 1

Note: I don't believe this is officially supported by Salesforce as it leverages the sidebar injection hack. As such, it could break with future releases if Salesforce prevents this in future. That being said, it makes embedded Visualforce pages look much, much cleaner, and we've been using it in our org for a few months now.

I really hope Salesforce will address this with Standard functionality in the future, and I urge you to vote for this idea on the IdeaExchange.

Dynamicly sized visual force pages in Standard Layouts

---

That being said, the iNetIndustry: Inline VisualForce Expander app solves this exact issue, automatically resizing inline VisualForce components on standard page layouts. With one minor tweak, I was able to get it to work on Home Page components as well.

Be sure to read through the Installation Guide, as there are a couple things you will need to do, including adding a sidebar component, and updating a Custom Setting to point to the specific Visualforce Page Ids that you want to dynamically expand.

---

Here is a Screenshot before the App, see it getting cut off

---

Make sure you add a Custom Setting with the Visualforce Page Name & the Id. (The Id can be found by navigating to the Visualforce page from within the Salesforce UI, and noticing the URL. e.g., in my Sandbox the UnderConstruction Visualforce page is https://cs14.salesforce.com/066C0000000AvXu so the VF Id is 066C0000000AvXu)

---

The one additional setep to make this App work with Home Page components is edit the iFrame's Id to be the VF Page Id. Normally, the Salesforce rendering engine will automatically set this if the Visualforce page is rendered within a Standard Page Layout, but because it doesn't have that context, you will need to do this yourself.

---

Finally, you will see the after result, without any cut off.

Answer 2

Fairly certain you can't do this from the iframe, just as you can no longer auto-resize the iframes that are generated when you drop a VF page into a standard page layout. It's due to the fact that the home page is at [instance].salesforce.com and your VF page is at dc.[instance].visual.force.com - a deliberate measure to prevent "cross-site scripting".

You could maybe work around it by doing something in JS in the parent component, that first calls maybe an apex simple GET that returns some JSON that lets it get approx the right height/width. Then it loads the iframe and sets the width/height on it. If you have a simple way of knowing the correct height (e.g. "number of returned rows times 50px"), it should be workable.

Caveat: given the direction that SFDC has been going with security controls, I'd be somewhat surprised if naked script tags in home page components are still allowed in a year or two, so this shouldn't be considered a permanent solution.

Answer 3

I have been using this in the VF page embedded in page layouts:

<script>
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>

Answer 4

I would not suggest using Iframes coz, its not appretiated by salesforce. and also if you are trying to load some content(say script) from non secure sites(http) most of the latest browsers will throw a warning of "loading unsecure content" coz secure sites will not compromise its security. and iframe is a best way to peep in to the secure content.

Try instead writing pure html code in home page components and use 'Apex Web Services' to pull requred data through a javascript call...