safari 显示 javascript 源代码而不是执行答案

【问题标题】：safari displays javascript source instead of executingsafari 显示 javascript 源代码而不是执行
【发布时间】：2010-02-24 00:02:30
【问题描述】：

我有一个 web 应用程序，其中有 javscript 散布在页面中。发生的情况是 safari 将转储 javascript 代码的源而不是执行它。我可以始终如一地重现这一点。

页面是不同形式内容的混搭：

它使用 osflv 加载 Flash 视频，并通过服务器端的 php 脚本生成。此外，该页面还包含对 Google Map 的 API 的调用以显示地图。使用 javascript 将内容放置在单独的选项卡中以提供选项卡交互。

我也在使用 mootools，但不确定这是否会导致问题。

以下是 javascript 包括：

<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 来自 osflv，common.js 和 alerts.js 是自定义 javascript 代码，其中包括用于在页面中显示或操作数据的自定义类和函数。

这段代码在页面中执行得很好：

<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>

这段代码也执行得很好：

<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>

这是在html中嵌入到body标签末尾之前的页面底部的最终sn-p代码，Safari会在浏览器中的任何位置随机吐出src代码在好的地图之外脚本包括：

<script src="http://maps.google.com/maps?file=api&amp;v=2&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)

这是带有 js 转储的页面
_{（来源：oxid8.com）}

页面应该是这样的：
_{（来源：oxid8.com）}

【问题讨论】：

你能指出一个示例页面吗？在其他浏览器中是什么结果？
对解决方案感兴趣。我们不时在使用 TinyMCE 的页面上遇到同样的问题。
不幸的是，它是一个防火墙后面的网络应用程序，所以我不能只指向一个公共 URL。让我尝试在帖子中添加更多细节
@jasonbar：您是否也像 Mike 一样在使用 Flash 的页面上遇到这个问题？还是只有TinyMCE？您能否在有此问题的页面某处发布链接或源代码？
@Marcel Korpel：它只发生在带有 TinyMCE 的页面上（并且只有当我们有多个实例时。）我可以将页面源代码放在 pastebin 但是当我在 Safari 中查看源代码时，打印的javascript代码不存在！有没有办法查看当前渲染的源代码？

标签： javascript flash safari mootools

【解决方案1】：

首先，您不应该使用language 属性，它是deprecated。

我唯一能看到的是您在 HTML 中使用 application/javascript 而不是 text/javascript（您在 HTML 中指定的内容与发送 Javascript 文件时使用的 MIME 类型服务器之间存在差异），但是我无法通过像

这样的简单测试用例在 Chromium/Linux 上重现任何错误

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

（也许你也可以试试这个。）

以防万一：脚本元素是否正确关闭？所有的 Javascript 是否正确，即是否通过 JSLint？

也许您可以粘贴 HTML 页面的完整源代码（最好粘贴在 Pastebin 之类的内容上），以便我们仔细查看。

【讨论】：

@hobodave：感谢编辑，但 Firebug 说随机服务器以application/javascript 发送随机 JS 文件，没有x-，这是推荐的方式，根据 RFC 4329：@987654324 @
您是否暗示即使嵌入在我的 html 中的 javascript 也需要具有 application/javascript？我不认为这是问题所在。
@Mike：不，但你没有说它是关于内联 Javascript：应该使用 <script type="text/javascript">（以及使用 XHTML 时的 CDATA）添加。但是其他浏览器会显示什么？ Safari 是在 Mac 上还是在 Windows 上？您能否发布（sn-p）源代码，以便我们了解问题可能是什么？
这是 Mac 上的 Safari。 Firefox 和 IE 不会出现这个问题。我还能够在 Chrome 上重现此问题，这让我相信这是一个 webkit 问题？
尝试将类型从“application/javascript”切换到“text/javascript”，如前所述。还可以尝试通过 jslint 运行该脚本。也许有一些奇怪的东西让 Safari 窒息。另外，您使用的是什么版本的 Safari？

【解决方案2】：

我想我会试一试。我在一些使用 TinyMCE 的页面上遇到了类似的问题（页面上显示了 javascript 甚至我的部分 html）

我的解决方案是升级我正在使用的 TinyMCE 版本。 v3.3 有一个大修的 Webkit 处理程序。

据我所知，问题是 TinyMCE 正在向页面中注入（很差）额外的 javascript 块。

这个（以及一些类似的块）总是被注入到

<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);">

当 onload 触发时，将以下块注入到 DOM 中的一个随机位置，破坏它上面放置的任何内容。

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

正如在 Webkit 开发者工具中看到的那样，其结果是转向

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

进入：

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

由于这显然不是有效的标记，因此输出了垃圾。

将我安装的 TinyMCE 从以前的稳定版升级到 v3.3rc1 解决了这个问题。TinyMCE Changelog 引用了对 Webkit 的全面检修。

编辑：我所说的随机是指随机。它每次都会在不同的位置插入脚本标签，有时会破坏内容，有时不会。

【讨论】：