网站在 iPad / iPhone 上显示 JavaScript 错误，在 3G 下但在 WiFi 下没有

Posted 2023-04-15

【中文标题】网站在 iPad / iPhone 上显示 JavaScript 错误，在 3G 下但在 WiFi 下没有

【英文标题】：Web site exhibits JavaScript error on iPad / iPhone under 3G but not under WiFi

【发布时间】：2011-03-17 23:28:30

【问题描述】：

在 iPad 上以 3G [曾经] 连接 http://www.manage-us.com 会导致 javascript 错误，如果开发者控制台已启用，则可以看到该错误。如果在 WiFi 连接下使用同一 iPad 访问同一页面，则不会显示错误。 [错误现在已经消失，因为我应用了下面的修复程序！]。

这是为什么？

我尝试在 Mac 上的 Safari 和 Mac 上的 iPad 模拟器上模拟低带宽（使用 dummynet）。这不会重现问题。

我目前怀疑这是我在英国 (O2) 的移动运营商引入的问题，已知该问题会通过代理缓存修改某些内容，例如降级图像文件。如果您可以通过其他移动运营商确认在 iPad 或 iPhone 上通过 3G 连接时没有遇到此问题，那将很有帮助。

【问题讨论】：

iPad 是否根据连接类型更改用户代理字符串？也许服务器正在相应地提供不同的页面？

“Javascript 错误” - 需要详细说明吗？

当前错误是：“ReferenceError: 找不到变量：liftAjax”。我之前在页面上有 Google Analytics 代码，并且与未终止的 cmets 相关的不同 JavaScript 错误在包含的 ga.js 代码中表现出来。 （但仅限 3G 连接时）

现在又在 ga.js 代码中显示屏幕错误。

为了清楚起见 - 该网站不再显示错误，因为我应用了下面的修复程序。同样令人感兴趣的是同一问题的另一个独立案例：oh7lzb.blogspot.com/2010/07/…

【参考方案1】：

我对此进行了进一步调查，发现问题在于英国移动运营商 O2（Apple 最初的独家 iPhone 运营商）在将 Web 内容发送到 iPhone 和 iPad 之前对其进行了修改。可能在将其发送到任何运行移动浏览器的设备之前。

它们不确定地将一些 CSS 和 JavaScript 内联到网页的主要源文件中。这可能会导致错误，因为他们的算法错误或从源文件中删除空白的结果，源文件中有句法错误，否则是良性的。

这些修改还会从受版权保护的 javascript 库和 css 库中删除版权信息，并对交付优化造成严重破坏。

例如，假设用户正在访问您网站上的一系列页面，这些页面都链接到 jQuery 库。 O2 不是让您的移动浏览器在本地缓存库，而是在每个页面上内联库，强制您的手机为每个页面一遍又一遍地加载整个库。

我在这里写了一篇关于这个问题的博客，希望能引起更多的关注：http://stuartroebuck.blogspot.com/2010/07/mobile-proxy-cache-content-modification.html

我的解决方法是使用document.write() 在加载时插入 JavaScript 库依赖项并防止 O2 内联它们。这似乎工作得很好。例如：

<script type="text/javascript">
// <![CDATA[
// Using document.write to load JavaScript dependencies to bypass O2 network inlining of JavaScript.
function loadJS(file)document.write("<" + "script type='text/javascript' src='" + file + "'></" + "script>")
loadJS("/js/jquery-1.4.2.min.js");
loadJS("/js/myJSLibrary.js");
// ]]>
</script>

请注意，与以往一样，如果页面以 XHTML 形式提供，document.write 将不起作用。

【讨论】：

很好看。我注意到 O2 在通过 3G 提供服务时会压缩站点（当我在 iPhone 上使用网络共享时也会发生这种情况），但我没有意识到它们有时会导致 JavaScript 错误。我已经就此联系过他们；祈祷他们会在某个时候解决问题。

@Paul - O2 有没有就这件事回复你？我刚刚在它制作的网站上使用 jQuery 遇到了同样的问题，它破坏了它。他们有什么反馈吗？可能忽略了你不是吗...

@ppumkin：你看过 sroebuck 关于这个问题的博文吗？这里有一个很好的总结：stuartroebuck.blogspot.com/2010/07/…

@ppumkin：这里有一个解决方法：stuartroebuck.blogspot.com/2010/08/…

@PaulD.Waite 谢谢。 5 年后他们仍然在努力

【参考方案2】：

对于任何需要在 ASP.NET 中解决此问题的人，这将按照 http://stuartroebuck.blogspot.com/2010/08/official-way-to-bypassing-data.html 为使用 URL 重写模块 2.0 http://learn.iis.net/page.aspx/665/url-rewrite-module-20-configuration-reference 的 javascript 文件设置 Cache-Control 标头。

<system.webServer>
        <rewrite>
            <outboundRules>
                <rule name="Compression header" preCondition="Match JS Files">
                    <match serverVariable="RESPONSE_Cache-Control" pattern="(.*)" />
                    <action type="Rewrite" value="no-transform" />
                </rule>
                <preConditions>
                    <preCondition name="Match JS Files">
                        <add input="RESPONSE_CONTENT_TYPE" pattern="(javascript)$" />
                    </preCondition>
                </preConditions>
            </outboundRules>
        </rewrite>

也可以使用 HttpModule 来完成

public class AddHeaderModule : IHttpModule

    public void Init(HttpApplication context)
    
        context.EndRequest += OnEndRequest;
    

    void OnEndRequest(object sender, System.EventArgs e)
    
        if(HttpContext.Current.Response.ContentType.Contains("javascript"))
            HttpContext.Current.Response.Headers.AddHeader("Cache-Control", "no-transform");
    

和

<configuration>
   <system.web>
      <httpModules>
         <add name="AddHeaderModule" type="your.namespace.AddHeaderModule" />
      </httpModules>
   </system.web>
</configuration>