Question

I created a demo page to show responsive web template… In the demo page, there are three iFrames of different size (for Computer view, Tablet view & Smartphone view)…

The problem is, when i open the demo page, the responsive template loading 3 times (for each iframe)… I don’t want this to happen… The template page should load only one time and it should be displayed in all there iframes…

I don’t have any idea how to achieve this… Someone please help me…

Here is the sample demo page…

http://responsivewebinc.com/demo/?url=http://responsivewebinc.com/templates/responsivewebinc

Here is the iframe coding…

<iframe id="pc" width="98%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

<iframe id="tablet" width="60%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

<iframe id="mobile" width="30%" src="http://responsivewebinc.com/templates/responsivewebinc" ></iframe>

Answer 1

Both proposed solutions doesn’t work.
In fact The javascript Script just wait first page to be loaded to then set src of second one.
This will then load second page.
Same for third one but the page is still loaded once for each iframe.

Just change the url by an url that takes few seconds to load and you will see it.

The only solution is to parse html of source url and then set the content of the iframe to this source but i’m not sure this is possible.

Maybe try something like
main.php:

<?php
    $url = 'http://responsivewebinc.com/templates/responsivewebinc/';
    $ch = curl_init();
    curl_setopt($ch,CURLOPT_URL,$url);
    curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);

    $result = curl_exec($ch);
    curl_close($ch);
    $fp = fopen('data.txt', 'w+');
    fwrite($fp, $result);
?>
<iframe id="pc" width="98%" src="open.php" ></iframe>
<iframe id="tablet" width="60%" src="open.php" ></iframe>
<iframe id="mobile" width="30%" src="open.php" ></iframe>

and open.php:

<?php
    $filename = 'data.txt';
    $fp = fopen($filename, 'r');
    $data = fread($fp, filesize($filename));
    echo $data;
?>

This avoid loading three times the page but i’m not sure this is a good script (and this also need that you use non-relative url for your css and image files…