Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Manu ErwinManu Erwin 

Can I dynamically change the 'src' attribute of an iframe?

I'm wanting to embed an iframe in a visualforce page that will display content from another system by passing a salesforce external id. Is it possible to dynamically alter the 'src' attribute for an iframe?

OR do I have to do this another way e.g., use javascript to alter the object
onclick="document.getElementById('myFrame').src='new url';"

thanks,
manu


Message Edited by manu on 02-01-2008 12:35 PM

Message Edited by manu on 02-01-2008 12:35 PM
Manu ErwinManu Erwin
Ok so I've got it working by requerying with a different bind variable as follows but this seems expensive having to make another query for information I should already have within the page:

==PAGE==
<apex:page controller="test">
    <apex:form>
        <apex:dataTable id="accountDataTable" value="{!accounts}" var="acc">
            <apex:column>
                <apex:commandLink reRender="accountDetailsOutputPanel">
                    {!acc.Name}
                    <apex:param name="accId" value="{!acc.id}"/>
                </apex:commandLink>
            </apex:column>
        </apex:dataTable>
    </apex:form>
    <apex:outputPanel id="accountDetailsOutputPanel">
        <apex:iframe id="googleSearchResultsIframe" src="http://news.google.co.uk/news?q={!search.Name}" />
    </apex:outputPanel>
</apex:page>

==CONTROLLER==
public class test
{
    public List<Account> getAccounts()
    {
        return [SELECT Id, Name
        FROM Account
        ORDER BY LastModifiedDate DESC LIMIT 15];
    }

    public Account getSearch()
    {
        ID accId = System.currentPageReference().getParameters().get('accId');
        return accId == null ? new Account() : [SELECT Name FROM Account WHERE Id = :accId];
    }
}

Any suggestions on how to retrieve the {!acc.Name} variable that is part of the datatable without requerying?


Message Edited by manu on 02-05-2008 03:11 PM
dchasmandchasman
Your intuition about using a server side action being overkill and expensive was right on! I find lots of folks forgetting about using client side behavior via javascript once they get their hands on action methods and partial page update support in VF :-)

Try this on for size and I think you'll like both the actual and percieved performance:

<apex:page controller="test">
  <apex:dataTable id="accountDataTable" value="{!accounts}" var="acc">
    <apex:column>
      <apex:outputLink onclick="document.getElementById('googleSearchResultsIframe').src='http://news.google.co.uk/news?q={!acc.name}'; return false">{!acc.name}</apex:outputLink>
    </apex:column>
  </apex:dataTable>

  <apex:iframe id="googleSearchResultsIframe" src="http://news.google.co.uk/news" />
</apex:page>

public class test {
   public List<Account> getAccounts() {
     return [SELECT Id, Name FROM Account ORDER BY LastModifiedDate DESC LIMIT 15];
  }
}

NOTE: Normally you should use $Component to get the DOM id for a VF component but when I did that I found there is a bug in <apex:iframe> that makes that not work in thi case (we'll get that fixed asap). In other words what I have in my page above should look like this (and will break once I fix the <apex:iframe> bug BTW):

<apex:page controller="test">
  <apex:dataTable id="accountDataTable" value="{!accounts}" var="acc">
    <apex:column>
      <apex:outputLink onclick="document.getElementById('{!$Component.googleSearchResultsIframe}').src='http://news.google.co.uk/news?q={!acc.name}'; return false">{!acc.name}</apex:outputLink>
    </apex:column>
  </apex:dataTable>

  <apex:iframe id="googleSearchResultsIframe" src="http://news.google.co.uk/news" />
</apex:page>
Manu ErwinManu Erwin
Thanks Doug!!

Tried this and it works great.