iFrames - need redirection help

Posted on 2008-02-04
Medium Priority
Last Modified: 2008-07-11
I have a webpage that may need tro display other webpages (well html documents really) in a panel, so a wrapper using iFrame call is being used.  Its working pretty well except...

If the document in the iframe has a link to yet another place, like google, that page will come up in the iframe, as it should.  However, if the document has a link to my website then what happen is I get another version of my website inside the iFrame.

What id like to do, is have the behavior that links to mysite, are redirected to the parent window, not the iFrame window

I've tried using htaccess redirects, but they 'stay' within the iframe window

for example, I know that
http_referer will have 'htmlwrapper'  if the call is from within the iframe
but if I RewriteRule to go to mysite/test.html  - I get the entire mysite/test.html displayed within the iframe

Hope all that make sense as a problem description

Question by:allan1956
  • 3
  • 2
LVL 27

Expert Comment

ID: 20820198
If you name your frames, then put target="main" in the links for your own site, the page will display with your site's page as the main page.

For example:
In your frameset page:
<frame src="/myapp/outerpagename.html" name="main">

In your outerpagename.html:
<iframe name="contentFrame" src="/myapp/listpage.html">

In your listpage.html:
<a target="main" href="/myapp/anyapppage.html">Link back to home site</a>
<br/><a href="http://somedomain.com/page.html">Link to somewhere else without target = main</a>

Author Comment

ID: 20820413
Hi, I understand the use of the target="_parent' and target="_top" seem to work on the few links I tested in one of the iFrame dispalyed documents ,  though I'm not sure that approach willwork for me, let me clarify some things

First the top or main web page is not a frame so <frame name=main /> isn't going to work, Im using an iFrame within just plain web page

But mostlly, the target= approach requires me to 'touch' and modify all the links in all of the html pages that show up in the iFrame.  Lets say I dont have access to those pages to add the target= call

So I desire something that doesnt touch the content inside the iFrame, but anything outside that (apache server, the code (php) displaying the main page, or javascript that would go in main page.  Some code that realizes that if it (the main page) is being opened within an iFrame, and kicks itself back up to the parent of the iFrame, if that makes sense?

Accepted Solution

allan1956 earned 0 total points
ID: 20820959
I think I found an answer
I put the following code the top/main webpage
htmlwrapper is where allt he html documents displayed int he iFrame will be
Seems to be working just fine

<script type="text/javascript">
var parent_location = new String(parent.location);
   if ( ( top.location != location ) && parent_location.indexOf('htmlwrapper') != 0 )
     top.location.href = document.location.href;

Open in new window

LVL 27

Expert Comment

ID: 20821056
Okay -- you could add Javascript to your main page, detect the referer as htmlwrapper, and redirect to the page.  Something like this:

<script language="javascript" type="text/javascript">
function frameRedirect() {
      if (document.referrer.indexOf('htmlwrapper') != -1) window.location.replace('/myouterpage.html');
//  End -->
<body onload='frameRedirect()'>

Make sure that indexOf('htmlwrapper') can't ever be true on a normal load of the page, or this will send your page into an endless loop of redirects.
LVL 27

Expert Comment

ID: 20821058
Oh sorry -- I was testing out the solution I posted, so I didn't see your answer.  Yours looks fine.

Featured Post

Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Strategic internal linking is often considered an SEO power technique, especially for content marketing. Do you need to hire an SEO agency to optimize you internal linking? No, this article will help you understand the basics of internal linking and…
The Super Bowl is just days away. Millions of advertising dollars will be spent in just a few hours to drive people to websites around the globe. Optimizing your site in anticipation of a big event like this (and the traffic surges that follow) will…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question