How to convert HTML framesets / frames to iframes in a PHP setting - 2020 scenario and solution

one text

Solution:

They all refer to my style of working only (apart from other professional skills you can read about in my profile I have developed large documentation and data analysis suites [WAMP, LAMP, MAMP] for handling special types of medical documentation), but if you find yourself in a similar timely condition, this situation may be similar to your own mindset:

Obstacle #1: Ready-made solutions for the implementation of grids such as Bootstrap or Flexbox can be done as well, but using their CSS and JS files often needs a lot of individual adaptation if you want to have sizes, shapes, and colours your way.

Obstacle #2: I personally prefer to experiment in a small, easy to conceive setting before embedding my solution into a bigger structure such as Bootstrap and Flexbox (and possibly others, too).

Obstacle #3: I simply do not have the time to sit in front of the screen for hours and hours to check out some layout stuff when I dearly need to get data analyses and evaluations done.

Thus, after experimenting with WampServer on my localhost, I have found the following solution:

    <?php
        // Same lots of definitions and introductory stuff, again not relevant here
    ?>

    <!DOCTYPE html>
    <html lang="whatever">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=<?= strtolower($CHARSET) ?>" />
        <meta name="date" content="<?= date('r', filectime($_SERVER['SCRIPT_FILENAME'])) ?>" />
        <title><?= $sCompanyName ?></title>
    </head>

    <div>
        <iframe style="top:0px; width:100%; height:40px; border:2px red; background-color:grey; display:block; position:fixed;" id="headerTitle" name="headerTitle" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameHeader.php" /></iframe>
    </div>

    <div>
        <iframe style="top:40px; width:100%; height:120px; border:2px red; background-color:grey; display:block; position:fixed;" id="frameMenu" name="frameMenu" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameMenu.php" /></iframe>
    </div>

    <?php
        if (isset($_REQUEST['sBody']) && $_REQUEST['sBody'] == 'login')
        echo '<iframe name="frameBody" src="login.php' . $sLanguageString . '">';
        else {
    ?>

    <div style="float:left;">
        <iframe style="top:160px; width:225px; height:100%; border:2px blue; background-color:grey; display:inline-block; position:fixed;" id="userMenu" name="userMenu" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="userMenu.php" /></iframe>
    </div>

    <div>
        <iframe style="top:160px; left:225px; width:100%; height:100%; border:2px blue; background-color:lightgrey; display:inline-block; position:fixed;" id="frameBody" name="frameBody" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="<?= $sBody . (strlen($sURLParameterString) > 1 ? $sURLParameterString : '') ?>" allowfullscreen /></iframe>
    </div>

    <div style="float:right;">
        <iframe style="top:160px; right:0px; width:225px; height:100%; border:2px blue; background-color:grey; display:inline-block; position:fixed;" id="patientMenu" name="patientMenu" scrolling="yes" frameborder="1" marginheight="0px" marginwidth="0px" src="patientMenu.php" /></iframe>
    </div>

    <div>
        <iframe style="bottom:0px; width:100%; height:40px; border:2px red; background-color:grey; display:block; position:fixed;" id="footerTitle" name="footerTitle" scrolling="no" frameborder="1" marginheight="0px" marginwidth="0px" src="frameFooter - Kopie.php" /></iframe>
    </div>

    <?php
        }
    ?>

    </html>

Please mind that, of course, it is a good if not essential step to cast the style="whatever" statements into an external CSS file, but this is not necessary here to show you what I mean.

It is important not to change the name="something" statements from frames to iframes as they are needed for the referral of, for instance, a menu link referring to the above-mentioned code with frameBody (see there):

    [... preceding code ...]

    <li><a target="frameBody" href="dothis.php">Do this</a></li>
    <li><a target="frameBody" href="dothat.php">Do that</a></li>
    <li><a target="frameBody" href="dosomethingcompletelydifferent.php">Do something completely different</a></li>

    [... further code ...]

The allowfullscreen is just an optional element in case one of these iframes should be made fullscreen using an appropriate javascript code (not supplied here).

And, finally, the change of both <!DOCTYPE ...> and <html ...> corresponds to being able to make use of HTML 5 instead of the older HTML 4 declaration which had to refer to a DTD (Document Type Definition).

I hope this bit of code helps in a generic way to root from HTML framesets to HTML iframes on the way to a frameless solution as next possible step.

Source