I’ve been tinkering with a tiny Silverlight app, and I kept running into the situation where the code would work in IE and Safari, but not Firefox. Turns out I was using some older sample code as a guide that had a problem.
In particular, when creating the silverlight object, I was using code like this:
<div id=”agControlHost”>
<script type=”text/javascript”>
Sys.Silverlight.createObjectEx({source:’page.xaml’,
parentElement: agControlHost,
id:’silverlightObj’,
properties: { width:’300′,
height:’200′,
background:’#ffffffff’,
isWindowless: ‘false’,
framerate:’24’,
version:’0.8′ },
events: { onError:null,
onLoad:null },
context:null });
</script>
</div>
Unfortunately, I kept getting an error that the parentElement agControlHost didn’t exist. It took me awhile to realize that I needed to use getElementById() instead of using the element’s name by itself to fix the problem. Here’s the correct way to create a silverlight object:
<div id=”agControlHost”>
<script type=”text/javascript”>
Sys.Silverlight.createObjectEx({source:’page.xaml’,
parentElement: document.getElementById(‘agControlHost’),
id:’silverlightObj’,
properties: { width:’300′,
height:’200′,
background:’#ffffffff’,
isWindowless: ‘false’,
framerate:’24’,
version:’0.8′ },
events: { onError:null,
onLoad:null },
context:null });
</script>
</div>
Now my Silverlight experiment works just fine in IE, Firefox, and Safari.