safari displays javascript source instead of executing

Question

i have a web application that has javscript interspersed through the page. What happens is that safari will dump the source of the javascript code instead of executing it. I can reproduce this consistently.

The page is a mashup of different forms of content:

it loads flash videos using osflv and is generated via a php script on the server side. In addition the page also contains calls to Google Map's API to display a map. The content is placed in separate tabs using javascript to provide tab interaction.

I am also using mootools, and not sure if that is potentially causing issues.

Here are the javascript includes:

<script type="text/javascript" src="/js/mootools-1.2.1-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="/js/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript" src="/js/sifr.js"></script>
<script type="text/javascript" src="/js/sifr-debug.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script type="text/javascript" src="/js/alerts.js"></script>
<script type="text/javascript" src="/js/swfobject.js"></script>
<script type="text/javascript" src="/js/autocompleter.js"></script>
<script type="text/javascript" src="/js/observer.js"></script>
<script charset='ISO-8859-1' src='/js/rac.js' language='javascript'></script>

rac.js comes from osflv, common.js and alerts.js are custom javascript code that includes custom classes and functions used to either display or manipulate data in the page.

This block of code executes in the page just fine:

<script type="text/javascript">
        var whitney = { src: '/flash/whitney.swf'};
        sIFR.activate(whitney); 
        sIFR.replace(whitney, { selector: 'h6#propertyHeadline', wmode:'transparent',css: {'.sIFR-root': {'color': '#1ca9b9' }}});  
 </script>

This code also executes just fine:

<script language='javascript'>
  var src = '/player';
  if(!DetectFlashVer(9, 0, 0) && DetectFlashVer(8, 0, 0))
   src = 'player8';
  AC_FL_RunContent('codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', 520, 'height', 440, 'src', src, 'pluginspage', 'http://www.macromedia.com/go/getflashplayer',    'id', 'flvPlayer', 'allowFullScreen', 'true', 'movie', src, 'FlashVars','movie=media/orig/4b845109d99d0.flv&fgcolor=0x1CA9B9&bgcolor=0x000000&autoload=off&volume=70');
</script>

This is the final snippet of code that is embedded in the html towards the bottom of the page before the end of the body tag, Safari will randomly spit out the src code in the browser at any point beyond the good maps script include:

<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;amp;key=googlemapsapikeyblockedout" type="text/javascript"></script>
<script type="application/javascript">

    function InitPropertyDashboardTabs(){
        mytabs = new TabPanel('DashboardTabPanel');
                initializeGallery();
        initializeSiteplan();
        initializeMap('address blocked out');
        }

    var map = null;
    var geocoder = null;

    function initializeSiteplan()
    {
        var flashvars = {PropertyId:1,BasePath:'/',wmode:'transparent'};
        var params = {wmode: 'transparent'};
        var attributes = {id: 'SWFSitePlan',name: 'SWFSitePlan'};
        swfobject.embedSWF("/flash/FloorplanViewer/FloorplanViewer.swf", "SiteplanFlash", "915", "500", "9.0.0", "expressInstall.swf", flashvars, params, attributes);
    }

    function initializeGallery()
    {
        var  params = {wmode: 'transparent'};..... (more code)

This is what the page with the js dump

this is what the page should look like:

Answer 1

First, you shouldn't use the language attribute, it's deprecated.

The only thing I can see is that you use application/javascript instead of text/javascript in your HTML (there's a difference between what you specify in your HTML and the MIME-type servers use when sending a Javascript file), but I cannot reproduce any errors on Chromium/Linux with a simple test case like

<!DOCTYPE html>
<html>
  <head> 
    <title>dkdkd</title> 
  </head>
  <body> 
    <script type="application/javascript"> 
      var i=0;
    </script>
  </body>
</html>

(Perhaps you can try this, too.)

Just in case: is the script element closed properly? Is all Javascript correct, i.e. does it pass JSLint?

Perhaps you can paste the full source of the HTML page (preferably on something like Pastebin), so we can have a closer look.

Answer 2

I guess I'll give this a shot. I was having a similar problem on some pages that used TinyMCE (javascript or even parts of my html were being displayed on the page)

MY solution was to upgrade the version of TinyMCE that I was using. v3.3 has an overhauled Webkit handler.

The issue so far as I can tell was that TinyMCE was injecting (poorly) additional blocks of javascript into the page.

This (and a handful of similar blocks) is always injected into <head>

<script type="text/javasript" src="http://www.example.com/javascript/rte/langs/en.js" onload="tinemce.dom.ScriptLoader._onLoad(this,'http://www.example.com/javascript/rte/langs/en.js', 0);">

Which, when onload fired, injected the following block into a random location in the DOM, mangling whatever it was placed on top of.

<script type="javascript" src="http://www.example.com/javascript/rte/langs/en.js"&gt;

The result of that, as seen in the Webkit Developer Tools was to turn

<td class="tab" nowrap="">

into:

<td class="ta<script stype="text=""javascript"" src="http://www.example.com/javascript/rte/langs/en.js"&gt; "b" nowrap=>"

Since that's clearly not valid markup the resulting garbage was output.

Upgrading my install of TinyMCE from the previous stable to v3.3rc1 fixed the issue.TinyMCE Changelog references a total Webkit overhaul.

edit: By random I really mean random. It inserts the script tag in a different location each time, sometimes breaking content, sometimes not.