Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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>
share|improve this question

4 Answers 4

up vote 9 down vote accepted

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

Before App


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)

Custom Setting


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.

Home Page Component


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

After App

share|improve this answer
    
I found this hugely interesting, even though it's definitely a hack. Is there a similar exploit available for service cloud, because this only works in the normal salesforce "skin". –  Martin Peters Jan 3 '13 at 9:41
    
@MartinPeters Not that I'm aware, the only reason this sidebar hack works is because code in the sidebar gets served from the *.salesforce.com domain, instead of *.visual.force.com domain. I'm not aware of anything that would allow you to serve code from *.salesforce.com within a service cloud console, but I could be mistaken. –  Mikey Jan 3 '13 at 16:10
    
@Mikey great, at least this a solution. really surprised they don't support something like this. I upvoted the idea. So there's really no other way to do it than the "hack" way huh? I'm slightly cautious about implementing it to production though. :-S Thanks for the help! –  user988 Jan 3 '13 at 21:20
    
Unfortunately, there's no other way that I'm aware of due to the XSS issues spawning from the content being served from different domains. –  Mikey Jan 3 '13 at 23:39
1  
Definitely unsupported — any apps going in for security review will be failed for this injection, I've got first hand experience of that. –  LaceySnr Feb 21 '13 at 5:29

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.

share|improve this answer

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>
share|improve this answer

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

share|improve this answer
    
Welcome to StackExchange. Even though your point is not bad, I don't think it's appropriate as an answer, it seems more of a comment to the original question. –  Lex Feb 21 '13 at 8:43

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.