见

Question

我正在使用TagCanvas Plugin并希望在IE 8浏览器中测试它，正如我添加Exoplorer canvas for IE <9 所记录的那样，我无法初始化canvas元素并在IE 8中查看它！

     <head>
         <script src="excanvas.js" type="text/javascript"></script>
         <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
            <script src="tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">

            window.onload = function () {
                try {
                    TagCanvas.Start('myCanvas');
                } catch (e) {
                    // something went wrong, hide the canvas container
                    alert("cannot load");
                    document.getElementById('myCanvasContainer').style.display = 'none';
                }
            };
     </script>
        </head>
<body>
   <div id="myCanvasContainer">
 <canvas width="300" height="300" id="myCanvas">

  <ul>

   <li><a href="#">test</a></li>
   <li><a href="#">test1</a></li>

  </ul>
 </canvas>
</div>
</body>

我可以知道我是否缺少IE 8中支持的canvas元素的任何引用？

Answer 1

见

Modernizr是您的访问者支持的JavaScript library that detects which HTML5 and CSS3 features。在检测功能支持时，it allows developers to test for some of the new technologies and then provide fallbacks for browsers不支持它们。这称为feature detection and is much more efficient than browser sniffing.

再次使用canvas作为示例，您通常需要对不支持的IE8及以下版本进行回退。通常的做法是链接到JavaScript polyfill，例如HTML中的FlashCanvas：

<script src="http://flashcanvas.net/bin/flashcanvas.js"></script>

The problem with this approach is that all browsers will download this script.
这是不必要的should be avoided where possible.

您可以将<script>元素包装在条件注释中，但是如果您可以将文件完全保留在标记之外，那么您应该这样做。 You can do this using Modernizr.load().

Modernizr has YepNope built into it，您可以轻松测试某个功能，然后提供填充。

.load() function的基本用法允许您test获取功能和ask whether it’s true (yep) or false (nope).
在此示例中，Modernizr tests for canvas support和if the feature doesn’t exist, then it loads FlashCanvas：

Modernizr.load({
  test: Modernizr.canvas,
  nope: 'http://flashcanvas.net/bin/flashcanvas.js'
});

在IE 8中标记canvas插件

1 个答案:

见