3

I have 2 visualforce pages that will only display data if a certain condition on a Campaign is met. Otherwise the space I allocate for them is just whitespace. I have looked at this question and have adopted it's solution for resizing all of the iframes however now I would like to take it further and only designate the 2 iframes that i want resized and not to touch other embedded visual force pages. I am not fully familiar with the jQuery that is being used so I'm not sure how to go about modifying it to only change a particular VF page.

var j$ = jQuery.noConflict();
j$("iframe").each(function(){
    j$(this).load(function() {
        j$(this).height( j$(this).contents().find("body").height() );
    });
});
Louis Pujol
  • 1,235
  • 3
  • 20
  • 40

1 Answers1

2

After a bit more digging I found that each iframe holds the id for the ApexPage so I have modified my code and now it is only re-sizing the specific page that i want. Here is the new code:

var j$ = jQuery.noConflict();
var pageRecords = sforce.connection.query("SELECT Id, Name FROM ApexPage WHERE Name = 'testPage'");
var myPage = pageRecords.getArray("records");
j$("iframe").each(function(){
    if(String(this.id) === String(myPage[0].Id).substring(0,15)){
        j$(this).load(function() {
            j$(this).height( j$(this).contents().find("body").height() );
        });
    }
});

Update: I also figured out that the iframe holds a title attribute which is the name of the ApexPage so you can get rid of the query to save time and database calls:

var j$ = jQuery.noConflict();
j$("iframe").each(function(){
  if(String(this.title) === "testPage"){
    j$(this).load(function() {
      j$(this).height( j$(this).contents().find("body").height() );
    });
  }
});
Louis Pujol
  • 1,235
  • 3
  • 20
  • 40