在JavaScript中检测浏览器字符支持？

本文介绍了在JavaScript中检测浏览器字符支持？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我在一个音乐相关的网站上工作，经常使用特殊字符（♯）和平面（♭）的HTML特殊字符来保持内容漂亮，例如：

&＃9839; &＃9837;但是，我注意到，在一些浏览器（IE6，Safari的PC）中，这些字符不是' t支持。我创建了一个有条件的JavaScript，提供明确的，支持的字符替代特殊的（G＃为G♯和Bb为B♭）。但我很难知道如何检测哪些浏览器缺少这些字符。

我知道我可以测试浏览器（例如ie6），但我是希望做正确的事情并测试字符支持本身。

有没有人知道有一个很好的方法来使用javascript，jQuery或rails？ （页面由rails应用程序提供，因此请求对象和任何其他Rails魔术都在表上。

解决方案

如果创建两个SPAN，一个包含您想要的字符，另一个包含不可打印字符U + FFFD（&＃xfffd;）是一个好的，那么您可以测试它们是否具有相同的宽度。

< div style =visibility：hidden> < span id =char-to-check& ;＃9839;< / span> < span id =not-renderable>&＃xfffd;< / span> < / div> <脚本> alert（document.getElementById（'char-to-check'）。offsetWidth === document.getElementById（'not-renderable'）。offsetWidth ？'不支持' ：'supported'）; < / script>

DIV不使用固定字体样式。

I'm working on a music related website, and frequently use the HTML special characters for sharps (♯) and flats(♭) to keep things pretty, e.g.:

&#9839; &#9837;

However, I've noticed that in some browsers (IE6, Safari for PC) those characters aren't supported. I've created a conditional javascript that serves up plain, supported characters in place of the special ones ( G# for G♯ and Bb for B♭ ). But I'm having a hard time figuring out how to detect which browsers lack those characters.

I know I could test for the browser (e.g. ie6), but I was hoping to do things right and test for character support itself.

Does anyone know of a good way to do this using either javascript, jQuery, or rails? (The page is served by a rails app, so the request object and any other Rails magic is on the the table.

解决方案

If you create two SPANs, one containing the character you want, and the other containing an unprintable character U+FFFD (�) is a good one, then you can test whether they have the same width.

<div style="visibility:hidden"> <span id="char-to-check">&#9839;</span> <span id="not-renderable">&#xfffd;</span> </div> <script> alert(document.getElementById('char-to-check').offsetWidth === document.getElementById('not-renderable').offsetWidth ? 'not supported' : 'supported'); </script>

You should make sure that the DIV is not styled using a fixed font.