Managing IFrame using Fancybox

Web 2.0 has enabled us to create mash ups of content within our site.  At the same time it also enable a new type of security attack, namely cross site scripting, commonly referred to as XSS attacks.

Cross-site scripting exploit website vulnerabilities which allow attackers to bypass client-side security mechanisms normally imposed on web content by modern browsers. Cross site scripting injects malicious scripts into web pages. An attacker can gain elevated access privileges to sensitive page content, session cookies, and a variety of other information maintained by the browser on behalf of the user.

Mozilla Firefox has put a stop to cross side scripting ever since Firefox 3 Alpha 6. A side effect of mozilla’s security measure is that developers will not be able to easily load a website content to their HTML Page.

The following jQuery code will load google front page in IE but not in Firefox:

$('#load').load('http://www.mozilla.com/en-US/');

Fancybox  IFrame

We can load a website content using an iframe. Fancybox is a jQuery plugin that allow developers to easily displays iframe within our site. I use Fancybox to manage Google’s search result on my experimental geolocation web application Locate For Me:

Using fancy box is extremely straightforward. Let just say we have the following Google map URL that we want to load within an iframe


<a class="extLink" href="http://www.google.com/maps/place?source=uds&q=88&cid=2273293873063803114">This goes to iframe</a>

We only need to add the following code snipped to load the URL into an iframe:


	$(document).ready(function(){
		$(".extLink").fancybox({
			 'width' : '75%',
			 'height' : '75%',
			 'autoScale' : false,
			 'transitionIn' : 'none',
			 'transitionOut' : 'none',
			 'type' : 'iframe'
		 });

		 });
    });

Fancy box can also be used to load ajax content to iFrame and creating a nice image gallery. Refer to fancy box how-to for a more definitive example on how to use fancybox to create iframes or ajax.

Reference:
1. Locate for me
2. Fancy Box

Share

Advertisements

About zainul franciscus

Hi, I am a software developer and tech blogger who is currently living in Wellington, New Zealand. I write stuff that I find interesting on
This entry was posted in locate-for-me, security, web development and tagged , . Bookmark the permalink.

4 Responses to Managing IFrame using Fancybox

  1. atlbike says:

    Exactly what I was looking for!
    Thanks for sharing.
    This implementation should be one of the examples on the fancybox website; especially when the examples shown don’t work.
    “I’ll be back.”

    • Hi atlbike,

      Thank you for the comment. I hope you can use fancybox to produce what you need.

      The example here is a snapshot for a much bigger jQuery script and serve to demonstrate that it only take a small amount of coding to display iFrames using fancy box.

      I have updated to blog to use fancybox examples for a more definitive example. Just let me know if you need help in implementing iFrame with fancybox =)

      Cheers

  2. nathan powell says:

    Many thanks, somehow the fancy box site just doesnt explain it.

    Cheers

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s