0

改写

我有一个用 HTML5 编写的网站，以及用 XHTML 编写的同一个网站。我想根据某人是否使用支持 HTML5 的一些最基本功能的浏览器来呈现一个或另一个。

笔记

该站点不使用 HTML5 的画布、音频或视频功能。它只是简单地标记为side、section、nav 等，并使用CSS3 的一些有趣功能进行样式装饰。HTML5 站点和 XHTML 站点之间的差异很小，如果我能做到这一点，任何人都可能几乎不会注意到。内容相同，只是呈现方式略有不同。

我这样做的原因

一旦恐龙浏览器消失，我希望我可以简单地发布 HTML5 站点，并废除旧的 XHTML。

我遇到了一些后勤障碍，还没有完全确定我想如何去做。我最初的想法是使用 Javascript 条件语句来确定要渲染的 PHP。是的，继续笑吧，我可能有一天也会笑。在对此进行调查时，有人评论说 XML 可能使这成为可能。我相当有能力使用 Javascript、PHP 和 XML。这是我第一次尝试将 Javascript 与 PHP 集成，所以现在我明白了为什么我最初的计划需要更多的工作。

最终，我强烈地感觉到这就是我想要前进的方式。我阅读了渐进增强与优雅降级的文章，但我决定为我的客户提供一个漂亮的网站，使用所有新的语义标签和简单的样式选择器来增加 SEO 并保证当 HTML4 消失时，这个新网站将继续存在时间的考验……至少是一小会儿。

如果您强烈反对这种方法，我愿意听听您的意见。无论哪种方式，请分享您的想法。

4

2 回答 2

2

不不不不不不！

两点：

  1. 使用HTML5 shiv - 为旧的 IE 浏览器提供 HTML5 功能）
  2. 渐进式增强- 您不应该为不同的浏览器编写代码。您的代码应该适用于所有浏览器。然后添加增强用户体验的功能，但站点运行不需要这些功能。
于 2012-07-10T01:17:34.850 回答
2

你所求是不可能的；正如我已经解释过的，PHP 是服务器端，而 JS 是客户端；php 端所做的任何事情都在页面交付给用户时完成，因此 js 不可能影响 php 端，除非您的网站或内容交付完全在 ajax 中完成，这是一种使用 js 的方法和php 检索信息；简而言之，js 向您服务器上的另一个 php 页面发送请求并返回结果。

然而，这要复杂得多，在您对 JS 和 PHP 都更加熟悉之前，我不建议您这样做。

然而，除此之外，php 中有一个解决方案，虽然我现在没有完整的代码。

解决方案是 php 4 和 5 的函数get_browser()：

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

以上是您的答案更新之前；关于上述更新，我无话可说。

更新：关于下面关于 ajax 的评论之一，我将尝试.. 一个例子。我不会尝试称它为“简单”，因为 ajax 绝不是……虽然回到正题……

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

以上只是一个例子，我不建议实际使用它，保存retrv_body()功能，并将其更改为您真正可以使用的东西。

希望我在代码中的注释有助于理解；如果还有什么要问的，请随时要求我更彻底地解释。

于 2012-07-10T01:44:12.787 回答