问题
I have a jquery-mobile application that is running inside a UIWebView in an iphone application. The webview shows the jquery-mobile page correctly, BUT only when the page is not loaded with a 3G connection. I know this sounds very weird and it is a very weird problem indeed, because if the page is loaded with a WIFI connection, it is display perfectly... here is a screenshot...
If instead my client uses a 3G connection to load the jquery mobile page, it seems that for some reason the javascripts and CSS that are needed to display the jquery mobile page are not loaded. Here is a second screenshot showing what the page looks like when it is loaded with 3G...
(Note: I know that this screenshot is not exactly the same page as the first one, but when it loads correctly it has the same styling as the first screenshot)
As you can see from the title of the page, the 3G connection that is giving this problem is in the Netherlands and my client has tried two different 3G providers in the Netherlands and encounters the same problem with both providers. If I test the application where I live, namely in South Africa, the page loads correctly with my 3G connection.
So, my question is, does anyone have any idea what could be causing the jquery mobile javascripts and CSS to fail to load on 3G connections in the Netherlands?
回答1:
I have determined what was going wrong on the 3G connection in Holland. This problem arises because several mobile operators do content modification before delivering it to the phone and this modification breaks jQuery. From my experience and from what I have read on the internet, it seems that the following providers do content modification: O2 in UK, Vodafone in the Netherlands and T-Mobile in the Netherlands.
To see reports of other people who have been encountering issues with these 3G connections breaking javascripts look at the following links:
http://stuartroebuck.blogspot.com/2010/07/mobile-proxy-cache-content-modification.html
http://blog.gotfocussolutions.com/index.php/2011/10/jquery-mobile-doesnt-work-on-o2-3gedge-due-to-mobile-proxy-cache-content-modification/
http://bugs.jquery.com/ticket/8917
http://www.ladysign-apps.com/blog/code/javascript/jquery-does-not-load-3g-iphone-safari/
The last link listed above also gives the work around to this problem; the javascript file that is being being modified and broken by the 3G connection must be moved to an external server. So, for example, if jQuery is being broken by the 3G connection (as was the case for me), then don't serve the jquery file yourself, instead make use of a CDN like google: http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
Hope this information saves someone else the hours of frustration that this issue has cost me!
回答2:
For anyone experiencing this problem on O2 (certainly here in the UK anyway) the reason is because O2 have an "optimisation platform" which takes external CSS and Javascript files and sets them inline on the document which can cause conflicts. (source)
This URL was certainly one of the better links I stumbled upon to regarding this particular problem:
http://stuartroebuck.blogspot.co.uk/2010/08/official-way-to-bypassing-data.html
One of the more reliable work arounds is to modify your website's headers to return the Cache-Control: no-transform header as O2 have indicated that if this response is provided then they will not modify the headers.
You can add the following to your .htaccess file:
<files ~ "\.(html|php|js)$">
Header add Cache-Control "no-transform"
</files>
回答3:
I solve this by changing url in ajax, from ../folder/subfolder/test.php to http://mydomain/folder/subfolder/test.php
来源：https://stackoverflow.com/questions/7930179/jquery-mobile-page-not-loading-correctly-on-netherlands-3g-connections