Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 27
  1. #1
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Redirecting External Links to Dynamic iFrame

    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:

    Code:
    <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
    Code:
    <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,

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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=>???
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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,

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,157
    Thanks
    75
    Thanked 4,338 Times in 4,304 Posts
    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.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #5
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The clean URL is desirable but is the least important aspect of this whole enchilada.

    I would like to refer you to this link 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,

  • #6
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    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
    woot found the avatar options...i swear they didn't exist b4

  • #7
    hgs
    hgs is offline
    New Coder
    Join Date
    Jan 2010
    Location
    Germany
    Posts
    81
    Thanks
    3
    Thanked 5 Times in 5 Posts

    Lightbulb

    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 Code:
    <?php echo file_get_contents($_GET['var']); ?>
    </div>

  • #8
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello godofreality,

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

  • #9
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by ShePinkFish; 01-26-2010 at 03:03 PM. Reason: suggestion tested

  • #10
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    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
    woot found the avatar options...i swear they didn't exist b4

  • #11
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Positive! They are in the same domain.
    Thank you for your assistance.

  • #12
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    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 Code:
    <?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
    PHP Code:
    src="<?php echo $src?>"
    and lastly at the top of all your pages except for your parent page u need to add this
    PHP Code:
    <?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 ?>
    Last edited by godofreality; 01-26-2010 at 09:25 PM. Reason: revision to the code to account for query strings in the url
    woot found the avatar options...i swear they didn't exist b4

  • #13
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

    Code:
    <?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:

    Code:
    <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:

    Code:
    <?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.

  • #14
    Regular Coder godofreality's Avatar
    Join Date
    Jan 2009
    Posts
    234
    Thanks
    1
    Thanked 15 Times in 15 Posts
    ok here is the problem for the infinite redirection loop

    Code:
    <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
    woot found the avatar options...i swear they didn't exist b4

  • #15
    New Coder
    Join Date
    Jan 2010
    Posts
    15
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 for maybe some ideas on a different approach.

    Thanks a lot,


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •