I am re-writing a widget framework for a client so that all widgets are loaded dynamically client side after page load. Widget content may be complex and include all manner of scripting.
I was having problems getting javascript blocks in the dynamically loaded content to execute in any other browser than Firefox. I was also seeing some blocks execute in the other browsers, but not all and couldn't figure out what was special about the syntax, methodology, or source of those that would work.
I finally figured out that it was the 'type' attribute on the script blocks themselves. We had some script tags with 'ecmascript' and others with 'javascript'. The 'ecmascript' type is not dynamically executed by webkit browsers, or IE; 'javascript' type blocks are. This includes omitting the type attribute altogether as these browsers assume javascript when not otherwise indicated.
Perhaps this script type exclusion is well documented somewhere, but most discussions surrounding problems loading scripts dynamically center on getting around same source issues. Here it is simply a matter of type.
Take home point: always indicate 'text/javascript' if you include the type attribute.
You can test for yourself with the code below. Change the type in the content page to see the background behind 'HI' turn red in browsers other than Firefox.
Simple script loading page...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script language="javascript" type="text/ecmascript">
$(document).ready(function() {$("#target").load("/testcontent.htm");
})
</script>
</head>
<body>
<div id="target">
</div>
</body>
</html>
Simple Content Page:<script type="text/ecmascript">
$("#test").css("background-color", "red");
</script>
<div id="test" style="height:20px;width:20px;">
HI!
</div>
Posts
