...

View Full Version : Redirecting External Links to Dynamic iFrame



ShePinkFish
01-25-2010, 06:48 PM
Disclaimer 1: I am not a programmer, just a curious designer, so please take that into consideration in your replies.
Disclaimer 2: Despite all advices against it, I couldn't find a better solution to my website than using iFrame
Disclaimer 3: Before asking for help, I researched *several* forums and although I found people discussing similar issues, I was not successful at adapting their solutions to my needs.

Gentlemen,

I need your help implementing a method to intercept and redirect external links to a dynamic iframe. By "dynamic" iframe I mean an iframe whose SRC would be filled up in accordance to the external URL being intercepted and that it would resize its HEIGHT accordingly in order to avoid scroll bars.
The function for resizing the iframe id="child" is already correctly implemented like so:


<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;
//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>

and the call

<iframe src="/main/index.php" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

This what I have going on:

- index.html => contains some content and the iframe id="child"
- childpage1[...N].php => several PHP pages which I do not want to show up outside of the parent "index.html". These pages use clean URLs from CMS such as "http://mydomain.com/pages/this-is-a-child-page/"

Users might click on external links from search engines, for instance, about an specific page such as "http://mydomain.com/pages/this-is-child-page-7/" which obviously would load the page "orphaned", outside "index.html" and that is exactly what I am trying to avoid.

Based on what I have researched so far, the best way (please, correct me if I'm wrong) to deal with this would be implementing a test condition on the header of the PHP child pages to verify if they are on "top" or not (if they are already inside the "parent" object "index.html"). If FALSE, the page would load normally, if TRUE, a variable should be created to store the URL of the requested page and passed through the link to the page "index.html" which would be immediately called.

In "index.html" there would be a script to collect the variable sent through the link (something like "http://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/") and break the text string apart, store a portion of PATHNAME (in this case, "/pages/this-is-child-page-7/) and use it to replace the current SRC of iframe id="child". Probably, there would have to be another testing function in this script to compare the variable passed from the "orphaned" PHP page against the current value of SRC in iframe id="child" to determine if any action is actually required.

This "replacement" function would be called onLoad and if tested true would run and refresh the page with the proper value in the iframe SRC.
All this should be accomplished while still making the iframe HEIGHT dynamically adjustable and show a "clean" URL in the browser, such as "http://mydomain.com".

The potential issues I foresee is an infinite loop due to two onLoad queries (one for SRC, another for HEIGHT) in the parent and child objects, which might required a merge into a single script.

As you can tell, I have an idea of what needs to be done but not a clue on how to get it done. Any help would be greatly appreciated.
Thanks,

Old Pedant
01-25-2010, 09:13 PM
I'm not clear why you want to do this with JavaScript, at all.

Maybe I don't understand you scenario.

As I read you, this is what should happen:

-- Your site receives a request for a page such as
"http://mydomain.com/pages/this-is-child-page-7/"

-- You *respond* with the page
"http://mydomain.com/index.html"
and *inside* that page is *something* like this:
<iframe src="http://mydomain.com/pages/generic_page.php?id=child-page-7" />

Yes? No?

If so, why wouldn't you do that all in the PHP code??? That is, instead of *actually* producing the page "index.html" why not "index.php" and have it use PHP code to create the correct <iframe src=>???

ShePinkFish
01-25-2010, 11:01 PM
Thank you for your interest in helping, Old Pedant.

The reason is that the parent page is a static page whose iframe will alternate between two different CMS engines, basically switching between two websites which are identically styled thus making the switch transparent to the user.

To make this clearer, let's say i have two databases, one for joomla and another one for drupal, so this is how i need the external clicks to behave:

- user clicks "http://mydomain.com/joomla/this-is-page-7", he gets sent to "http://mydomain.com/index.html" with the iframe containing "/joomla/this-is-page-7/".

- user clicks "http://mydomain.com/drupal/this-is-page-10", he gets sent to "http://mydomain.com/index.html" with the iframe containing "/drupal/this-is-page-10/".

Again, this behavior should be accompanied by proper resizing of the iframe's HEIGHT and keeping a clear URL in the browser.

Can this be done without the use of javascript? If so, could you please elaborate?

Thanks,

Old Pedant
01-25-2010, 11:47 PM
Quite frankly, I don't see a way to do this using index.html even *with* JavaScript.

Oh, you could possiblly do it by redirecting the person to "index.html?8718zxz" where the stuff following the ? is an encoding that you then pass to the <iframe> content generator and it then pulls in the right content.

But so long as the URL as seen by the person must be just plain old "index.html", I don't see a way to work this.

Oh, I see lots of tricks you could pull that would get the right answer maybe 98% of the time.

[Example: You remember the IP address of the user on the server, along with the content that was requested, and when the "index.html" page does
<iframe src="gimme.php">
you again read the IP address and say "oh yeah! he gets this content".

But if you happen to get two page hits from (say) a pair of AOL users, all within the same second or so, you could have to users with the same IP address.]

So all in all, I still think that delivering "index.php" -- and having it already set up to include the correct <iframe>'s src--is the superior way to go. Not to mention the easier way.

ShePinkFish
01-26-2010, 01:01 AM
The clean URL is desirable but is the least important aspect of this whole enchilada.

I would like to refer you to this link (http://www.dynamicdrive.com/forums/archive/index.php/t-8567.html) which I studied and tried to implement to my needs without success, as I am sure you will read it with different eyes than mine.

All I am looking for is a solution so I am totally willing to play along with your PHP approach as long as it solves my problem. For that, I believe I need to share with you the reason why I am using an iframe to begin with.

The index.html holds a banner containing a slow, long and cyclic animation. If I were to put this banner in the header of the index.php page currently being loaded inside the iframe (avoiding the use of an iframe altogether, just having index.php as the top object), every time the user navigated by clicking in the menu options, the whole page would reload, forcing the animation to restart, which is *unacceptable*. The solution I found was creating a static page to hold the banner and maintain its fluidity while the users can navigate anywhere within the website without causing interruptions.

Now, a new part of the website will be implemented (a store) but it will use (for the time being) a different CMS engine so in my limited knowledge I have a hard time understanding how I could use a PHP page to manage this two independent and dissimilar databases.

I hope I have made matters clearer instead of more confusing. Thanks,

godofreality
01-26-2010, 07:23 AM
and your solution is not using an iframe but using ajax to do what u want and placing the content from your ajax calls into a div, divs are much easier to adjust in size than an iframe as for the redirection goes old pedant prolly has the best approach however it could just be done with javascript but that would require alot more work

hgs
01-26-2010, 09:34 AM
Would that work ?
No need for iFrame and JS


From your example:

h t t p://mydomain.com/?var=http://mydomain.com/pages/this-is-child-page-7/

Now somewhere inside your index.php extremly simplified

<div id=external_source class=whatever >


<?php echo file_get_contents($_GET['var']); ?>

</div>

ShePinkFish
01-26-2010, 03:30 PM
Hello godofreality,

As I said before, I am willing to play along but I need way more than just "I should be using ajax"... :)

ShePinkFish
01-26-2010, 03:34 PM
Hello hgs,

Thank you for your suggestion. I will try it but still using an iframe otherwise the fluidity in the banner animation I spoke about will be gone and that's a no-no for me.

Thanks,

Well, I tried inserting you code in the SRC for the iframe and passed the variable through the link as before but unfortunately I got an error 403 - access forbidden.

Any other suggestion?

godofreality
01-26-2010, 08:21 PM
ok b4 i go and provide sum code is all your pages on the same domain since javascript is limited to a same domain policy

ShePinkFish
01-26-2010, 09:08 PM
Positive! They are in the same domain.
Thank you for your assistance.

godofreality
01-26-2010, 09:14 PM
aight i decided instead of trying to get you to convert your system to ajax i would be better off addressing just your problem and how to fix it so...

firstly make your index page a .php file secondly add this to the top of it


<?php
session_start();
if(isset($_SESSION['url'])){
$src = 'http://' . $_SESSION['url'];
unset($_SESSION['url']);
session_destroy();
}
else{
$src = ''; //in the single quotes put your default page
}
?>


then for your iframe change the src to this

src="<?php echo $src; ?>"

and lastly at the top of all your pages except for your parent page u need to add this


<?php
if($_SERVER['SERVER_NAME'] == ''){ //in the single quotes add your domain name minus the http:// portion
session_start();
$_SESSION['url'] = $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'];
if(isset($_SERVER['QUERY_STRING'])){
$_SESSION['url'] .= '?' . $_SERVER['QUERY_STRING'];
}
?>
<script type="text/javascript">
if(top.location != ''){ //in the single quotes add the name of the parent page
location.href = ''; //same for this one
}
</script>
<?php } ?>

ShePinkFish
01-26-2010, 11:00 PM
Thank you for the code, godofreality.

I am testing locally first under the following folder structure:

//localhost/index.html => original static page containing iframe
//localhost/main/index.php => php page to appear as default inside the iframe

And here's what I did (for verification purposes):

1) renamed index.html to index.php

2) inserted the following inside the <HEAD> tag of recently renamed index.php


<?php
session_start();
if(isset($_SESSION['url'])){
$src = 'http://' . $_SESSION['url'];
unset($_SESSION['url']);
session_destroy();
}
else{
$src = '/main/index.php'; //in the single quotes put your default page
}
?>

3) changed the iframe SRC to:


<iframe src="<?php echo $src; ?>" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

4) inside the header.php (which composes the index.php page to be inserted inside the iframe) I inserted this in the <HEAD> tag:


<?php
if($_SERVER['SERVER_NAME'] == 'localhost'){ //in the single quotes add your domain name minus the http:// portion
session_start();
$_SESSION['url'] = $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'];
?>
<script type="text/javascript">
if(top.location != 'index.php'){ //in the single quotes add the name of the parent page
location.href = 'index.php'; //same for this one
}
</script>
<?php } ?>

When I try loading a random page from an external link it looks like I get in a loop in which the browser seems to be loading pages incessantly displaying the following error message:

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php:2) in C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php on line 7

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php:2) in C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php on line 7

(line 7 of header.php is the one the showing "session_start();")

And when I try to load the recently renamed \\localhost\index.php I get in the same loop and a similar error message:

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at C:\Xampp\xampp\htdocs\index.php:8) in C:\Xampp\xampp\htdocs\index.php on line 9

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at C:\Xampp\xampp\htdocs\index.php:8) in C:\Xampp\xampp\htdocs\index.php on line 9

(line 9 of index.php is the line showing "session_start();")

Please let me know if I haven't followed your instructions correctly or if there's still some fixing to be done.

As usual, thank you very much.

godofreality
01-27-2010, 02:07 AM
ok here is the problem for the infinite redirection loop


<script type="text/javascript">
if(top.location != 'index.php'){ //in the single quotes add the name of the parent page
location.href = 'index.php'; //same for this one
}
</script>

the top.location and location.href need to be in the form of a url so http://localhost/path to page/file.php

as for the session_start(); issue i do not have any idea why u r getting that error i tested all the code on my local wamp server b4 i posted any of it and it all worked fine

ShePinkFish
01-27-2010, 05:59 AM
thank you, godofreality

the loop is gone but the session_start(); error is still here. I even tested it really quick in the live server and got the exact same result as when I try it locally.

When I load //mydomain.com/ the newly renamed index.php loads the animation with the error messages, gets confused and loads itself again (and the error message) inside the iframe.

When I load //mydomain.com/main/child-page-7/ it works partially by loading the root index.php with the animation and the subpage index.php inside the iframe (instead of loading child-page-7).

Just as a friendly reminder, there's also the onCalc() function running to calculate iframe's HEIGHT value dynamically and the animation banner is heavily dependent on Javascript as well (not that i see any relation to cause interference, then again, what do i know...)

Lastly, I was wondering if you had the chance to check this link (http://www.dynamicdrive.com/forums/archive/index.php/t-8567.html) for maybe some ideas on a different approach.

Thanks a lot,

godofreality
01-27-2010, 09:07 AM
well best i can say is show me the top portion of code for both pages start tight with the very first character and go until the end of my scripts so i can what is going on in between my coding and the top of the pages

swomp
01-27-2010, 10:39 AM
Thank you for the code, godofreality.

I am testing locally first under the following folder structure:

//localhost/index.html => original static page containing iframe
//localhost/main/index.php => php page to appear as default inside the iframe

And here's what I did (for verification purposes):

1) renamed index.html to index.php

2) inserted the following inside the <HEAD> tag of recently renamed index.php


<?php
session_start();
if(isset($_SESSION['url'])){
$src = 'http://' . $_SESSION['url'];
unset($_SESSION['url']);
session_destroy();
}
else{
$src = '/main/index.php'; //in the single quotes put your default page
}
?>

3) changed the iframe SRC to:


<iframe src="<?php echo $src; ?>" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

4) inside the header.php (which composes the index.php page to be inserted inside the iframe) I inserted this in the <HEAD> tag:


<?php
if($_SERVER['SERVER_NAME'] == 'localhost'){ //in the single quotes add your domain name minus the http:// portion
session_start();
$_SESSION['url'] = $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'];
?>
<script type="text/javascript">
if(top.location != 'index.php'){ //in the single quotes add the name of the parent page
location.href = 'index.php'; //same for this one
}
</script>
<?php } ?>

When I try loading a random page from an external link it looks like I get in a loop in which the browser seems to be loading pages incessantly displaying the following error message:

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php:2) in C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php on line 7

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php:2) in C:\Xampp\xampp\htdocs\main\wp-content\themes\sandbox\header.php on line 7

(line 7 of header.php is the one the showing "session_start();")

And when I try to load the recently renamed \\localhost\index.php I get in the same loop and a similar error message:

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at C:\Xampp\xampp\htdocs\index.php:8) in C:\Xampp\xampp\htdocs\index.php on line 9

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at C:\Xampp\xampp\htdocs\index.php:8) in C:\Xampp\xampp\htdocs\index.php on line 9

(line 9 of index.php is the line showing "session_start();")

Please let me know if I haven't followed your instructions correctly or if there's still some fixing to be done.

As usual, thank you very much.

Try using @session_start instead of session_start OR at the very top line of the page put ob_start();

ShePinkFish
01-28-2010, 08:09 AM
Thanks a lot godofreality and swomp!

With swomp's tip I got rid of all the error messages.
The behavior is still erratic but it looks like we are getting somewhere... let me explain:

Case 1: Using 'localhost' as the SERVER_NAME
A) when loading http://localhost the index.php loads and inserts itself inside the iframe, so I end up with a page with two animation banners
B) when loading an external link of a child page, the test to verify if it is the top object works fine and the index.php (in the root folder) loads with the animation banner but instead of putting the requested child page inside the iframe it puts the default child page /main/index.php, so I get the proper behavior partially

Case 2: Using 'localhost/' as the SERVER_NAME (please, notice the "/" after localhost)
A) when loading http://localhost, I get the proper behavior, meaning the index.php loads at the top (with the animation) and inserts "/main/index.php" inside the iframe.
B) when loading an external link of a child page, the proper child page gets loaded but as the top object, without the parent index.php (consequently, without the animation banner). Again, I get a partial proper behavior.

So it looks like it came to a point of a conflict with the folder structure and maybe a little naming confusing between //localhost/index.php and //localhost/main/index.php.

Here is the full <HEAD> for //localhost/index.php:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>xx</title>
<?php
@session_start();
if(isset($_SESSION['url'])){
$src = 'http://' . $_SESSION['url'];
unset($_SESSION['url']);
session_destroy();
}
else{
$src = '/main/index.php';
}
?>
<link rel="stylesheet" href="main/wp-content/themes/sandbox/style.css" type="text/css" charset="utf-8" />
<link rel="stylesheet" href="main/wp-content/themes/sandbox/jd.gallery.css" type="text/css" media="screen" charset="utf-8" />
<script src="main/wp-content/themes/sandbox/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="main/wp-content/themes/sandbox/mootools-1.2-more.js" type="text/javascript"></script>
<script src="main/wp-content/themes/sandbox/jd.gallery.js" type="text/javascript"></script>

<script language="JavaScript">
<!--
function calcHeight()
{
//find the height of the internal page
var the_height=
document.getElementById('child').contentWindow.
document.body.scrollHeight;

//change the height of the iframe
document.getElementById('child').height=
the_height;
}
//-->
</script>

</head>

the PHP call for the iframe:


<iframe src="<?php echo $src; ?>" width="100%" onLoad="calcHeight();" height="1" marginheight="0" marginwidth="0" scrolling="no" frameborder="0" id="child">

the <HEAD> for //localhost/main/index.php


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes() ?>>
<head profile="http://gmpg.org/xfn/11">
<title><?php wp_title( '-', true, 'right' ); echo wp_specialchars( get_bloginfo('name'), 1 ) ?></title>
<?php
if($_SERVER['SERVER_NAME'] == 'localhost/'){
@session_start();
$_SESSION['url'] = $_SERVER['SERVER_NAME'] . $_SERVER['SCRIPT_NAME'];
?>
<script type="text/javascript">
if(top.location != 'http://localhost/index.php'){
location.href = 'http://localhost/index.php';
}
</script>
<?php } ?>

<meta http-equiv="content-type" content="<?php bloginfo('html_type') ?>; charset=<?php bloginfo('charset') ?>" />
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url') ?>" />
<link rel="stylesheet" href="/main/wp-content/themes/sandbox/wall_style.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="/main/wp-content/themes/sandbox/lightbox.css" type="text/css" media="screen" />
<!--<link rel="stylesheet" href="/main/wp-content/themes/sandbox/lytebox.css" type="text/css" media="screen" /> -->
<script type='text/javascript' src='/main/wp-includes/js/jquery/jquery.js?ver=1.3.2'></script>
<?php wp_head() // For plugins ?>
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('rss2_url') ?>" title="<?php printf( __( '%s latest posts', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
<link rel="alternate" type="application/rss+xml" href="<?php bloginfo('comments_rss2_url') ?>" title="<?php printf( __( '%s latest comments', 'sandbox' ), wp_specialchars( get_bloginfo('name'), 1 ) ) ?>" />
<link rel="pingback" href="<?php bloginfo('pingback_url') ?>" />
<script type="text/javascript" src="/main/wp-content/themes/sandbox/thematic-dropdowns.js"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="/main/wp-content/themes/sandbox/prototype.js"></script>
<script type="text/javascript" src="/main/wp-content/themes/sandbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/main/wp-content/themes/sandbox/lightbox.js"></script>
</head>

Thank you for not giving up on this issue!

godofreality
01-28-2010, 09:45 AM
this from your localhost/index.php


$src = '/main/index.php';

should be a direct path


$src = 'http://localhost/main/index.php';


this from your localhost/main/index.php


if($_SERVER['SERVER_NAME'] == 'localhost/')

can't have the / at the end of it $_SERVER['SERVER_NAME'] is your domain so mysite.com not mysite.com/ which technically doesn't exist


if($_SERVER['SERVER_NAME'] == 'localhost')


them 2 things should have u fixed right up

ShePinkFish
01-28-2010, 02:54 PM
Hello godofreality,

Made the two changes but I am still getting the behavior from "Case 2" above... any ideas?

godofreality
01-29-2010, 12:18 AM
any way i can view the problem live it helps to figure out what the problem is when i can see exactly what is happening

ShePinkFish
01-29-2010, 12:43 AM
the other day when i did a live test, it took me but a few seconds. My just released website (January 1st) is focused on a niche market but my visitors come from all around the world, truly. So there is no such a thing as a good time to do live testing in the wee hours... that is why I do everything on xampp before putting it live.

I can give you the address but since I've only tested locally, none of the code you sent to me will be there, not even the root index.php which still is the static index.html, so there'd be no point.

Give me a few minutes and I'll see what I can do. Thanks,

ShePinkFish
01-29-2010, 01:00 AM
so... again I prepared everything here and did an ultra quick live test for just a few seconds and got the *exact* same results I had locally:
1) external links load the parent properly but with the default child in the iframe (not the proper child)
2) when loading //mydomain.com, the parent loads and repeats itself in the iframe.

Do you/could you do skype? If so, please add me and we can review things in real time: muttley_c3

Thanks!

godofreality
01-29-2010, 09:35 AM
it is 2:30 am here for me i will download skype in the morning and try to remember what my login info is if u have any other messengers i have msn xfire which effectively lets me connect with aim and yahoo as well

ShePinkFish
01-29-2010, 05:28 PM
I just sent you a PM, godofreality. I look forward to chatting with you. Thanks!

godofreality
01-29-2010, 07:27 PM
<script type="text/javascript">
if(top.location != 'http://localhost/index.php' && top.location != 'http://localhost/'){
location.href = 'http://localhost/';
}
</script>


the solution to the problem is in red this is part of the head for your external pages

ShePinkFish
01-29-2010, 07:59 PM
hey godofreality,

you went offline during our testing, so i just wanted to let you that removing the "@" takes me back to that original error message, so I put them back on. Furthermore, since now half of the problem is solved without causing any additional issues, I now have your partial solution live on the website.

For the time being, the root index.php loads perfectly and navigation within the site works flawlessly. The problem is when loading a child page directly, it brings the parent page properly with the animation banner but instead of loading the requested child page inside the frame, it loads the default /main/index.php child page.

I hope you have the chance to show up online again so we (meaning, you... oops) can sort this out.

Thank you for all the effort so far!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum