PDA

View Full Version : targeting an iframe or ajax loaded content from an external link?



halabar
04-30-2007, 05:27 PM
Hello,

I need to load pages from an external vendor within an iframe or via ajax, and have this content area be updated dynamically on user interaction. In addition, I need to have users be able to access specific pages within the framed (or dynamic) content from a link that they would be emailed. (For example, a link to a specific job posting within a career portal).

How do I pass a variable to an iframe (or ajax-loaded content) so the specific page requested is loaded?..

Any best practices on doing this?..

Veronica
04-30-2007, 05:39 PM
Put this into the head section of the page that contains the iframe (replacing 'iframeid' with the actual id of your iframe)



<script type="text/javascript">

function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))

window.frames["iframeid"].location=url
}
}

onload=loadIframe
</script>


When you send the link, send it as



<a href="mainpage.htm?iframecontent.htm">great content</a>


mainpage.htm should be the actual url of your page
iframecontent.htm should be the url of your selected iframe page
The page containing the iframe and iframes themselves should be in the same directory.

halabar
04-30-2007, 05:49 PM
The page containing the iframe and iframes themselves should be in the same directory.

Thanks! that seems simple enough, but my framed content is external, so..

Will this work when I am pulling content from an external vendor?.. or does that require something else for that type of targeting to work?.. (I need to provide the vendor with the syntax for creating links that will be generated by a number of methods, "email to a friend" etc.).

Veronica
04-30-2007, 06:01 PM
Yes, it's basically just reading anything after the question mark as a string. So the link would be

<a href="mainpage.htm?http://www.whatever.com">Iframe page 1</a>

If someone has javascript turned off, they'll go to the main page with a default page loaded, so you may want to create a default page with some links or noscript content in it.

halabar
04-30-2007, 07:06 PM
Yes, it's basically just reading anything after the question mark as a string. So the link would be

<a href="mainpage.htm?http://www.whatever.com">Iframe page 1</a>

If someone has javascript turned off, they'll go to the main page with a default page loaded, so you may want to create a default page with some links or noscript content in it.

Cool! Thanks!!!

halabar
04-30-2007, 09:10 PM
OK, I've put it in place, and it isn't pulling in the sub-page from the vendor's provided content. my relevant code sofar:


<script type="text/javascript">

function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))

window.frames["portalcontent"].location=url
}
}

onload=loadIframe
</script>



<iframe id="portalcontent" src="http://www.aerospace.apply2jobs.com/" style="overflow:visible; width:100%;border:1px solid #333;height:400px;"></iframe>


and a link with the vendor's setup is looking like this:


<a href="http://mysite.com/careers/career-portal.html?http://theirsite.com/index.cfm?fuseaction=mExternal.showJob&RID=1&CurrentPage=1">Iframe page 1</a>



Is the extra ? in their link causing the problem? If so, is there a way to wrap it so it works, or?...

Veronica
04-30-2007, 09:35 PM
In your iframe, you also need to include

name="portalcontent"

as well as id="portalcontent"

halabar
04-30-2007, 09:39 PM
That did it! Thanks!

Veronica
05-01-2007, 12:11 AM
After playing around with this, there's one more change you should consider.

The way it's written now, someone could create a link going to your site, with any url framed inside it.

So change the script to:


<script type="text/javascript">
function loadIframe(){
if (location.search.length > 0){
url = unescape(location.search.substring(1))
var domain = "http://www.theirsite.com/"

window.frames["test2"].location=domain + url
}
}

onload=loadIframe
</script>



and then the link would be written without their domain, just the part that comes after the slash.

<a href="http://mysite.com/careers/career-portal.html?index.cfm?fuseaction=mExternal.showJob&RID=1&CurrentPage=1">Iframe page 1</a>

Client side scripting isn't the most secure, but this should help

halabar
05-01-2007, 04:08 PM
Thanks! We're looking into adding SSL to the page as well.

GelTV
11-18-2007, 07:00 AM
So I tried this and it worked. But then I applied my dreamweaver template and it didn't. :confused: I think it has to do with the OnLoad function. I have one in the <head> section (which I got from you) and one in the <body> tag for preloading images and running a slide show. When I remove the ones in the body function the code works but I need/want keep my preload images functions with the SlideShow function I used.

I tried to put the onload=loadIframe in with the body onLoad function but that didn't work either. As you probably figured out by now, I'm not a coder at all. I'm pretty much a graphic designer trying make things more functional.

Here are my pages (you may laugh...or gasp at my code) http://www.bc.edu/bc_org/ath/plex/intramurals/indextest.html The basketball photo is supposed to open http://www.bc.edu/bc_org/ath/plex/intramurals/falleventstest.htm with http://www.bc.edu/bc_org/ath/plex/intramurals/fe_football.html in the iframe.

Any chance you can help? I'd reeeeeeeaaaaaly appreciate it. ;) Thanks either way!

GelTV
11-19-2007, 02:52 PM
Never mind. All set. Thanks anyway!

Sonya
12-11-2007, 04:02 AM
Would a code like this work for a frameset rather than an Iframe?

I need to have multiple links from one frameset load pages in the 'main' frame of another frameset.

Any help would be greatly appreciated!

Thanks. :)

vanbao
12-15-2007, 04:07 AM
Hi Veronica,

Will this work in allowing Iframe ssi 2 to bring in multiple external pages. In other word, I have a template that uses iframe to bring in different external links depending on the record. So it is not just one specific url.

Thank you.