iFrames aren’t Evil
iFrame’s caught a lot of flack years ago when websites used them all over the place. For those of you old enough to have enjoyed the , you’ll remember navigating iFrame websites where you couldn’t bookmark the right page, never could print properly, and could easily have double navigation.
After iFrames, people created 30 minute flash introductions and I’m sure next we’ll see people butcher HTML5. None of those technologies are bad, just implemented poorly at times. My point being is that iFrames (and Gummi Bears) are still good. Let’s look at where an iFrame works really well.
The Before
Granted this is a CRM 4 project, but it can apply to any version of CRM.
Our customer needed a way to enter specific contracts and needed a decent amount of information on a single page. They also needed the maximum screen width for the “Contract Lines” tab. They were also wanting to read from another SQL database for Actuals.
The After
To maximize the viewable area I removed the left hand navigation, and swapped the header for a “CRM 2011 inspired” header. The new header is an iFrame and loads information from both CRM and a separate SQL database.
To inject an iFrame, you can do so by replacing an outerHTML (or inner) with:
<iframe id="ifrmHdr" src="/isv/cei/contracts/contracthdr.aspx?ID=' + crmForm.ObjectId + '" height="135" width="100%" frameborder="0" scrolling="no"></iframe>
Adding the Loading Screen
In my case, the other SQL server had a good amount of data and took around two seconds to return its results. To give the user a nice look and feel, I wanted to add a loading screen to the header while it was waiting on the results.
To do this, I injected both a DIV and an iFrame.
.outerHTML = ‘<div id="loadingGif" style="text-align:center;width:100%;height:135px;">’ +
‘<img src="/isv/cei/loading/loading.gif" /></div>’ +
‘<iframe id="ifrmHdr" src="/isv/cei/contracts/contracthdr.aspx?ID=' + crmForm.ObjectId + '" height="135" width="100%"’ +
‘ frameborder="0" scrolling="no" style="display:none;"></iframe>';
First, I made the iFrame hidden by default. Secondly, I added the loading in place of where the iFrame will be. You’ll want to make sure the div height and width matches the iFrame so the screen doesn’t jump around.
Next, on my custom ASPX page I had to add a little JavaScript.
<script type="text/javascript">
function hideLoading(){
try {
window.parent.document.getElementById('loadingGif').style.display = 'none';
window.parent.document.getElementById('ifrmHdr').style.display = 'block';
} catch (ex) {}}
window.onload = hideLoading();
</script>
The JavaScript sits on the iFrame page and waits until everything has loaded on the page. After the loading is complete, it hides the Loading DIV container and shows the iFrame.
Summary
This was just one example of adding a loading screen. You could instead create web methods on your aspx page. You could also add an event listener to the iFrame if you aren’t able to add the JavaScript to the page (say a 3rd party page). Any which way you do it, adding a loading screen can be a nice touch. Hope you enjoy!
Post by: Paul Way,
