javascript - dynamically include PHP based on browser features

947

REWRITE

I have a website written in HTML5, and the same website written in XHTML. I would like to render one or the other based on whether or not someone is using a browser that supports some of the most basic features of HTML5.

NOTE

The site does not use the canvas, audio, or video features of HTML5. It is simply tagged with aside, section, nav, etc, and uses some of CSS3's fun features for styling embellishments. The difference between the HTML5 site and the XHTML site is minimal, and probably will be barely noticeable to anyone if I can make this work. The content is the same, it is just presented slightly differently.

THE REASON I DID IT THIS WAY

Once the dinosaur browsers are gone, I am hoping I can simply post the HTML5 site, and do away with the old XHTML.

I am running into some logistical snags and have not fully formulated how I want to go about this. I initially had the idea to use Javascript conditional statements to determine which PHP include to render. Yes, go ahead and laugh, I probably will some day too. While investigating that, a person commented that XML might make that possible. I am fairly capable with Javascript, PHP and XML. This is the first time I have tried to integrate Javascript with PHP, so now I understand why my original plan needed some more work.

Ultimately, I feel pretty strongly that this is how I want to move forward. I read about progressive enhancement versus graceful degradation, but I have decided that I want to give my client a beautiful website using all of the new semantic tags and simple style selectors to increase SEO and guarantee that when HTML4 goes away, this new site will stand the test of time...at least for a little while.

If you strongly object to this method, I am willing to listen to what you have to say. Please share your thoughts either way.

791

Answer

Solution:

What you ask for is impossible; as I already explained, PHP is server-side, and JS is client-side; anything done php side is finished by the time the page is delivered to the user, so it is impossible for js to influence the php side unless your site, or content delivery, is done completely in ajax, which is a method of using js and php to retrieve information; in short, js sends a request to another php page on your server and returns the result.

That however is much more complicated, and I do not recommend it until you are more familiar with both JS and PHP.

That aside, however, there is a solution in php, although I do not have the complete code right now.

The solution is the php 4 and 5 function of :

$arr = get_browser(null, true);
$var = "some browser";
if ($arr['parent'] == $var) {
   require('/php/file.php');
}
else {
   //etc
}

The above is before your answer update; I have nothing else to say in regards to said update.

Update: In regards one of the comments below in regards to ajax, I will attempt.. an example. I won't attempt to call it 'simple', because ajax is anything but.. though back to the point...

HTML:

<html>
    <body>
        <div id="main_body">
        </div>
    </body>
</html>

JS:

//some code to determine user-agent/browser, set variable 'agent' with result
var use_html5;
if (agent == browser) {
    use_html5 = 'yes'
}
else {
    use_html5 = 'no'
}

function retrv_body() {
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) {//readState 4 is when the request has finished;
            //0: request not initialized 
            //1: server connection established
            //2: request received 
            //3: processing request 
            //4: request finished and response is ready
            document.getElementById('main_body').innerHTML = xmlhttp.responseText;
            //set html of div with id 'main_body' to rendering retrieved from php_file_in_same_dir.php
        }
    }
    xmlhttp.open("POST","php_file_in_same_dir.php",true); 
    //set type of form, boolean is in regards to whether the request is asynchronus or synchronous
    //most ajax requests are async, which means they themselves finish executing usually after the function itself has run.  I'm not truly knowledgeable regarding this specific thing since I've only ever used async requests, though I would assume being a sync request would mean the function actually waits until it returns a value before it finishes executing.
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //set the headers of the content.
    xmlhttp.send("html5=" + use_html5);
    //finally, send the data.  Depending on the data, the data may need to be url-encoded.
}

retrv_body();

PHP:

<?php
if ($_POST['html5'] == 'yes') {
    include('body5.php');
}
else {
    include('body_other.php');
}
//body generating code, render page.
?>

The above is just an example, and I would not recommend actually using it, save theretrv_body() function, and changing it into something you can really use.

Hopefully the comments I've put in the code will help in understanding; if anything is left to question, feel free to ask that I explain more thoroughly.

387

Answer

Solution:

No.No.No.No.No!

Two points:

Use HTML5 shiv - Gives older IE browsers HTML5 capabilities)

Progressive enhancement - You shouldn't code for different browsers. Your code should work in all browsers. Then add features that enhance, but are not required for the site to function, the user experience.

People are also looking for solutions to the problem: php - Which things to put in symfony bundles

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question