有条件地包含 HTML <meta> 元素答案

【问题标题】：Including HTML <meta> element conditionally有条件地包含 HTML <meta> 元素
【发布时间】：2011-12-30 03:58:46
【问题描述】：

首先，我做了一些谷歌搜索，发现 IE 的“条件注释”并理解它是非标准的。我也觉得没有标准的 HTML 'IF' 所以我的问题是我需要做什么才能达到同样的效果（也许是 Javascript？）...

我想有条件地包含一个外部 .html 文件（来自一系列外部 .html 文件）。具体来说，每个外部文件都只包含一行中的 <meta> 元素。或者，是否可以在 HTML 文件中包含多个内联 <meta> 元素并有条件地“选择”一个（有效地忽略其他元素）？

基本上，我可以做一些与这些伪代码示例中的任何一个相同的事情吗？

对外部文件使用伪代码的示例...

<html>
    <head>
        if some-condition
            <!--#include file="meta1.html" -->
        else
            <!--#include file="meta2.html" -->
        ...
    </head>
     ...
</html>

直接选择替代元素的替代示例（同样是伪代码）...

<html>
    <head>
        if some-condition
            <meta name="viewport" content="abc" />
        else
            <meta name="viewport" content="def" />
        ...
    </head>
     ...
</html>

注意：在所有情况下，<meta name 属性将始终为 viewport - 它只是 content 属性可能需要更改一些其他属性。

编辑：主要条件是客户的类型。一个例子是，为了帮助在 Android 设备上正确调整 Web 应用程序页面的大小，您可以将某些 content 数据用于只有 Android 设备才能理解的 viewport。对于传统浏览器，我会为content 设置一组默认数据（例如宽度/高度）。这也可以扩展到其他客户端，例如 Google TV、iOS 等。

【问题讨论】：

条件是什么？
如果您已准备好使用条件 HTML，那么您已准备好使用服务器端语言。我建议从简单的开始，例如使用 PHP。
@zzzzBov：我原以为可能需要 PHP - 问题是服务器端的一部分不在我的控制范围内。当谈到大多数与网络相关的事情时，我还是个菜鸟，在过去的一周里，我学到了很多关于 html/javascript/jquery 的知识，我以前不知道……尽管如此，我还是个菜鸟。 :)

标签： html

【解决方案1】：

使用 Javascript：

document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="abc" />' );

演示：http://jsfiddle.net/ThinkingStiff/ccX5p/

【讨论】：

【解决方案2】：

你可以很容易地用 javascript / jQuery 做到这一点。

设置您的条件，然后将append() 设置为head。

例子：

if(//condition here){
    $('head').append('<meta name="viewport" content="abc" />')
}

else{
    $('head').append('<meta name="viewport" content="def" />')
}

【讨论】：

javascript/jquery 代码会去哪里？（请参阅我对我的回答的菜鸟评论:)）。我不清楚客户端在哪个阶段解析 <meta> 元素与其他所有内容有关。
谢谢。我投了赞成票，但 ThinkingStiff 的回答将我指向 window.onload（是的，在 HTML 方面我真的是个新手）

【解决方案3】：

如果您使用的是服务器端，例如 asp 或 java，这对您来说会变得容易得多。

我会认为你没有使用服务器端编码。

使用 javascript 获取浏览器名称（我猜是 navigator.appname）。

那么你可以使用 DOM 在<head> 元素中添加<meta ..../> 标签。

document.getElementsByTagNam('Head').appendChild(metaChild);

【讨论】：