Menu
Hey there. I have to use the Google Chrome Frame to support certain HTML5-features such as the Canvas for Internet Explorer 8. I've implemented the code, but it doesn't seem to work at all. The part of the script that checks whether the user has installed GCF works, it displays the overlaying frame with a link to the installer. I have installed GCF and even restarted IE8, but it doesn't seem to be functioning at all. When I go to Tools -> Manage add-ons, it says it is installed and running, so that can't be the problem. I've searched around and found that you can check whether or not it is active by right-clicking on the page, it should display a context menu. This doesn't happen for me, and my page just throws an error where I first use the canvas element. I have used the meta-tag which should activate GCF on my page, but it doesn't appear to do anything at all.
My code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
This last line of code should activate GCF rendering. Then at the end of my page:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>
</body>
</html>
This should run a script that checks whether or not GCF is installed (this works). I attach an onload event to my window that executes a function which contains:
<body onload="init();" onunload="doLMSFinish();">
function init() {
CFInstall.check({
mode: "overlay", destination: "http://www.waikiki.com"
});
}
This code is also used to check whether or not GCF is installed (this also works).
Any ideas? I have installed GCF, used the correct meta tag which should activate GCF rendering, and have placed this meta tag right at the top of my page as the first item in my header block. What's wrong with it?
EDIT: I am testing this on a local web page. Is that the reason why it doesn't work? The project I'm working on is meant to be run locally, not server-side. I already had to ditch Chrome support altogether since it simply would NOT allow me to load local xml files (which is the core functionality of the project).
EDIT #2: I have uploaded my stuff to an FTP to check if it would work online, but it still doesnt. I even made a small test page that just contains the basic html skeleton, the meta tag to initialize chrome frame rendering, and one canvas which loads an image. It just errors upon loading the canvas element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<script type="text/javascript">
canvasSavannah = document.getElementById("savannahStatic");
contextSavannah = canvasSavannah.getContext("2d");
savannah = new Image();
savannah.src = "savannah_static.png";
savannah.onload = function() {
contextSavannah.drawImage(savannah, 0, 0);
};
</script>
</head>
<body>
<canvas id="savannahStatic" width="942" height="645">
</canvas>
</body>
</html>
552
Have a look at javascript defer and async on html5
Having run your test page I noticed the js tries to initialize before the html has rendered. Move the script to the bottom of the page to get the test page to work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
</head>
<body>
<canvas id="savannahStatic" width="942" height="645">
</canvas>
<script type="text/javascript">
canvasSavannah = document.getElementById("savannahStatic");
contextSavannah = canvasSavannah.getContext("2d");
savannah = new Image();
savannah.src = "savannah_static.png";
savannah.onload = function() {
contextSavannah.drawImage(savannah, 0, 0);
};
</script>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
