如何显示浏览器特定的 HTML？
Posted
技术标签:
【中文标题】如何显示浏览器特定的 HTML？【英文标题】：How to display browser specific HTML? 【发布时间】：2010-10-18 20:07:26 【问题描述】：我正在尝试找到一种方法，使用 javascript 或条件 cmets（或其他任何方法）显示一个指向 IE 用户的链接和指向所有其他浏览器的另一个链接。
基本上...
//pseudo code
<!--[if IE]>
<a href"ie-only.html">click here!</a>
<!--[else]>
<a href"all-other-browsers.html">click here!</a>
<![endif]-->
我认为条件注释标签无法做到这一点（仅适用于 Internet Explorer）。另外，我认为没有“其他”声明。
有没有办法用 javascript 做到这一点？请帮忙！谢谢！
【问题讨论】：
【参考方案1】：我认为条件注释标签无法做到这一点（仅适用于 Internet Explorer）
确实如此。您只需将非 IE 浏览器的内容保留在某个位置，使其成为条件注释子句的一部分，但实际上不在 内。然后不了解条件 cmets 的浏览器会很好地看到内容。这称为downlevel-revealed 条件注释。
不幸的是，Microsoft 给您的标记是无效的 HTML（甚至不是格式良好的 XML）。要使其通过集合，您只需要一些额外的“--”：
<!--[if IE]> This is IE! <![endif]-->
<!--[if !IE]><!--> This ain't IE! <!--<![endif]-->
虽然我不得不回应 AnonJr 的不回答，但与其他浏览器相比，您很少需要为 IE 提供完全独立的链接/页面。如果你正在做一些棘手的事情，比如复杂的 VML 和 ActiveX 在 IE 和其他浏览器上的 Flash 中工作，我想这可能是有原因的，但通常在同一个基本页面上进行一些 CSS 和脚本 hack 就足够了。
【讨论】：
+1;多么棒的答案。这个版本需要的鼻子要少得多，我会使用它。它应该适用于所有浏览器，而且在 IE6、7 或 8 中确实没有问题。不过，我希望它能够像他们自己的例子一样得到微软的“祝福”，只是为了确定。 @Marc：条件 cmets 已在 IE10 中移除（兼容模式除外），因此您只能使用它们注入到 IE9 的回退。有关背景，请参阅msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx。幸运的是，IE10+ 通常足够好，您很少需要在内容级别进行浏览器嗅探。【参考方案2】：这不会是流行的答案，但该死的时候有人开始发布它了 - 停止使用特定于浏览器的垃圾。当新版本出现时，您只会让未来的问题长期存在。
如果开发人员花费了额外的时间（是的，这需要时间和努力。如果你不能说服你的客户你还不够努力），那么我们就不会看到 IE7 “破坏网络”和使用 IE8 就不会那么吵闹了。
是的，IE 的标准不符合其他标准。但是，Fx 也缺少标准中的某些内容。当谈到“标准”时，他们都很糟糕。但他们都在变得更好。 （速度不同，但都在变好。）
首先想想你为什么要这么做，然后问问自己，当下一个浏览器版本出来时你是否真的想处理这个问题，你必须重新调整你的浏览器检测以及你如何处理浏览器 Y 的版本 X .
[/咆哮]
编辑：为了回答一些指出我没有真正回答问题的明显事实的 cmets，如果没有更多信息，这个问题让我怀疑我们是否没有试图提供帮助一个人决定hammer in a nail with a glass bottle or a shoe...
【讨论】：
你只是四处乱窜，没有提供替代/不/然后使用这些功能？？这对很多事情来说是不可能的。 （例如：将参数传递给 xslt 文件以命名一个） @Peter - 物体检测？未在您的特定情况下进行测试，因为我从未使用过 XSLT。 这是对“我应该显示浏览器特定的 HTML 吗？”问题的一个很好的回答，但这不是被问到的问题。 欣赏您的回答背后的情绪，但先回答问题并将其添加为警告会更合适。 OP 这样做可能有一个非常正当的理由；许多公司将 IE 作为他们的默认浏览器和（不幸的）仅适用于 IE 的 Intranet 功能。 我非常嫉妒 - 我无法想象在没有遗留系统、管理员访问限制、受限网络权限、专有 MS 功能或时间和预算限制的世界中会是什么样子。我不知道有多少开发人员不想想以正确的方式去做，但有时你必须做出最好的妥协：o/【参考方案3】：这是微软认可的方式：
<!--[if IE]>
<a href="ie-only.html">click here!</a>
<![endif]-->
<![if !IE]>
<a href="all-other-browsers.html">click here!</a>
<![endif]>
更多信息请访问http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx。
编辑
从 IE 5 开始，隐含地保证此代码可在所有当前和未来版本的 IE 中工作。对于非 IE 浏览器，代码通过依赖那些忽略“无意义”<![if !IE]> 标记的浏览器工作，它们都是做，我从未见过它失败。对于只使用良好的 ol' HTML cmets 的版本，请参阅 bobince's answer，实际上我更喜欢 Microsoft 提供的解决方案。
【讨论】：
肯定第二个链接将成为所有非 IE 浏览器评论的一部分（因此被忽略）？ 正如 Tom 所说，由于 IE 是唯一支持这种条件语句的，而且条件是 !IE，所以第二个链接永远不会显示。 对于所有非 IE 浏览器，第一部分是 HTML 注释。第二部分是not HTML 注释——" 会被非 IE 浏览器忽略，但后面的 HTML 不会。我向您保证，第二个链接出现在所有非 IE 浏览器中。 :) @Marc 没错，IE 中的条件 cmets 在 IE 9 模式之外无法工作。您仍然可以使用特征检测和/或 UA 嗅探。【参考方案4】：我想出了一种方法：
从http://www.quirksmode.org/js/detect.html 获取javascript 代码并将其放入<head> 标记中。
然后在你的<body> 标签中使用：
<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer')
document.write('<a href="#">Explorer</a>');
else
document.write('<a href="#">Other Browsers</a>');
// -->
</script>
不确定这是否是最简单的方法，但它完成了工作。
【讨论】：
这通过嗅探用户代理字符串来工作，这是对浏览器行为进行分叉的最糟糕、最不可靠的方式；它并没有说“如果你是 JavaScript 新手，不要使用这个脚本”！ "Conditional cmets" 的优点是无论客户端是否启用了 JavaScript，都能正常工作。 我认为使用用户代理字符串没有问题。大多数用户不会惹它，如果他们这样做，他们知道这可能会导致奇怪的行为。 但是当新版本出现时，可能会发生奇怪的行为而用户没有意识到......因此我对有针对性的解决方案缺乏兴趣。【参考方案5】：也许是在黑暗中开枪，但这行得通吗？
<style>
a.forIeOnly display: none;
a.notForIe display: block;
</style>
<!--[if ie]>
<style>
a.forIeOnly display: block;
a.notForIe display: none;
</style>
<![endif]-->
<a href="#" class="forIeOnly">Link One</a>
<a href="#" class="notForIe">Link Two</a>
它远没有 if/else 语句那样干净/有吸引力，但是……这是我能想到的实现解决方案的最简单方法。尽管它本身可能充满了问题。
【讨论】：
@geisterfurz：非常感谢！我有点震惊地意识到我的答案中有一个错字在我的答案中幸存了近八年......>. 【参考方案6】：我没有尝试，但也许你可以在 CSS 上使用 IE 缺陷。 Eric Meyer 写了这篇关于这个主题的文章：Tricking Browsers and Hiding Styles。
【讨论】：
依赖这样的缺陷的问题是，当浏览器制造商修复它们时，你现在必须争先恐后地寻找新的黑客来获得相同的功能。依靠“缺陷”是让每个人都对 IE8“打破网络”如此兴奋的部分原因【参考方案7】：您始终可以使用 CSS 对特定浏览器隐藏代码。例如，考虑以下代码：
<a href"ie-only.html" id="ie-only">click here!</a>
<a href"all-other-browsers.html" id="other-browsers">click here!</a>
您可以应用以下 CSS hack，相应的链接将显示到相应的浏览器。
/* Display settings for most browsers */
#ie-only display: none;
#other-browsers display: block;
/* Display settings for IE <= 6 */
* html #ie-only display: block;
* html #other-browsers display: none;
【讨论】：
【参考方案8】：IE 支持conditional compilation，您可以使用它轻松交付仅限 IE 的代码，而无需执行用户代理嗅探或功能检测。
/*@cc_on
/*@if (@_jscript)
alert("IE.");
@else @*/
alert("Not IE.");
/*@end
@*/
【讨论】：
【参考方案9】：将此添加到您的标题中：
<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>
然后你想要的任何你的 .css 页面：
/* Chrome Only */
.chrome embed
display: none;
/* Firefox Only */
.gecko video
display: none;
来源：http://rafael.adm.br/css_browser_selector/
可用的浏览器代码 [浏览器]：
ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
【讨论】：
以上是关于如何显示浏览器特定的 HTML？的主要内容，如果未能解决你的问题，请参考以下文章
如何在带有新窗口和特定显示器的窗口中全屏启动 chrome 浏览器
Android：如何通过 Intent 打开特定文件夹并在文件浏览器中显示其内容？
如何将 QTextBrowser（其中包含 html 表）的光标移动到 PyQt5 中的特定行？