I am using the highcharts charting library,
i am including excanvas if the browser is ie using
<!--[if IE]>
<script type="text/javascript" src="<script type="text/javascript" src="excanvas.compiled.js"></script>
<![endif]-->
yet i still get
'G_vmlCanvasManager' is undefined
is it a typo?
yours is
<!--[if IE]>
<script type="text/javascript" src="<script type="text/javascript" src="excanvas.compiled.js"></script>
<![endif]-->
should it be?
<!--[if IE]>
<script type="text/javascript" src="xcanvas.compiled.js"></script>
<![endif]-->
I also get this error. It was a I was referencing 'G_vmlCanvasManager' in my javascript instead of 'window.G_vmlCanvasManager'
Related
EDIT:
In here, it shows this as being a comment. In my IDE, it shows this as being code. So weird (Code set #2):
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
I have two files. One has comments and one does not. The first set of code functions perfectly. The second set of code tells me Uncaught ReferenceError: $ is not defined in the JavaScript console, and the alert is not called. Why are the comments affecting my script?
Code Set #1
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
Code Set #2
<!DOCTYPE html>
<html lang="en">
<head>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
</head>
<body>
<script>
$(function () {
alert("JQUERY!");
});
</script>
</body>
</html>
These are no ordinary comments, but conditional comments.
See: http://www.quirksmode.org/css/condcom.html
The comment above comments all javascript includes, thus they are not loaded, except in Internet Explorer lower than Version 9.
You get the error message because jquery is not loaded (it is inside the HTML comments). If you Use e.g. IE8 there won't be an error.
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="bootstrap-3.3.2-dist/js/bootstrap.min.js"></script>
<![endif]-->
The if construct there is a conditional comment used for IE.
The script tags will only be rendered if you're using an IE with a version number greater than 9. Every other browser will treat that whole section like a single comment and not include any of that javascript.
Your file is expecting jQuery to be loaded. It seems that you commented out the jQuery script, you have to include the jQuery script, uncommented:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
It won't be run by the browser right? It will only be in every case streamed by the server, and downloaded by the client.
It shouldn't make any difference, as long as you don't have too many characters
Although dynamic pages generated server side, you might have to use server-side comment such as: <%-- comment --%> or {% comment %}
<!--[if lt IE 9]> & <![endif]--> are conditional comments for IE. Other browsers will read them as comments. If you are using an IE Version later than 9 these scripts will be loaded, which could be causing conflicts with other scripts.
Is it possible to combine code angular with IE7?
What you need to mount and write to this minimum sample to work in IE7?
<!DOCTYPE html>
<html lang="en" id="ng-app" ng-app='app'>
<head>
<!--[if lte IE 8]>
<script src="bower_components/json3/lib/json3.min.js"></script>
<![endif]-->
<meta charset="UTF-8">
<title>Tests</title>
<script type="text/javascript" src="bower_components/angular/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div ng-controller="ButtonCtrl" ng-init="name = ''">
<button id="start-button" ng-click="run('Brrrr!!!')">push</button>
<p>{{name}}</p>
<p ng-init="count = 0">{{count}}</p>
</div>
</body>
</html>
I've never tired with IE7 but for IE8 I put the below html in. Which basically polyfills
HTML5 elements, CSS3 selectors and media queries. You might also want to look at es5 shims (https://github.com/es-shims/es5-shim). However, it you use all the native angular methods i.e. angular.forEach(...) you might be ok without this. As always you need to really test this in all browsers!!!!
<!DOCTYPE html>
<!--[if IEMobile 7 ]>
<html class="no-js iem7" xmlns:ng="http://angularjs.org" id="ng-app" ng-app="fsn"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!-->
<html class="no-js" id="ng-app" ng-app="fsn">
<!--<![endif]-->
<head>
<!--[if lte IE 8]>
<script>
document.createElement('ng-include');
document.createElement('ng-switch');
document.createElement('ng-if');
document.createElement('ng-pluralize');
document.createElement('ng-view');
// needed to enable CSS reference
document.createElement('ng:view');
</script>
<![endif]-->
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.2/html5shiv.js"></script>
<script src="//s3.amazonaws.com/nwapi/nwmatcher/nwmatcher-1.2.5-min.js"></script>
<script src="//html5base.googlecode.com/svn-history/r38/trunk/js/selectivizr-1.0.3b.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.1.0/respond.min.js"></script>
<![endif]-->
<meta charset="utf-8">
<script src="../vendor/modernizr/modernizr.js"></script>
</head>
It is also worth looking at the APIs that IE7 wouldn't support 'console' for example. The angular team say they only support down to IE8 with Angular <1.2.x so you might have to play about with it to get it to work smoothly.
I have IE8 working well but it does noticeably struggle with loading some larger pages as it is so slow.
i use javascript code in project and i want not load this code in lt IE 9. i use this code but its not working:
<!--[if lt IE 9]>
<script type="text/javascript">
....
</script>
<![endif]-->
<!--[if !lt IE 9]>-->
...
<!--<![endif]-->
You can visit this microsoft article to learn how to build more complex conditional comments
try this:
<!--[if gte IE 9]>-->
...
<!--<![endif]-->
<!-- Target IE 8 and lower -->
<!--[if lt IE 9]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->
So perhaps give this a try:
<!-- Target IE 9 and lower -->
<!--[if lt IE 10]>
<script type="text/javascript">alert('hello world');</script>
<![endif]-->
How to prevent the load of the D3 library for IE8 (and below) ?
<head>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
</head>
<head>
<!--[if !IE || gte IE 9]><!-->
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<!-- <![endif]-->
</head>
<!--[if gt IE 8]>
<script src="../lib/d3/d3.v2.min.js" type="text/javascript"></script>
<![endif]-->
What is difference between using
<!--[if IE]>
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('nav');
</script>
<![endif]-->
instead
<!--[if lt IE 9]>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
I believe that the HTML shim library also includes the IE print Protector