I really hate asking questions that I feel were asked a thousand times before. This is one of those questions I feel others must have encountered, but having searched stack overflow, none of the supposed solutions work for me so I must be doing something wrong.....
I have an extremely simple app setup. index.htm, and terms.htm. There is some textual data in test.htm. I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.
At first I tried loading terms.htm's data into an element within index using $('#elementid').load('terms.htm'); (both test and index are in the same root /assets/www/ directory, and my webview loads index oncreate) but absolutely nothing was happening. So I opted to try .ajax so that I could at least get an error message, and all I get is 'error'. Surely, it is possible to load local textual assets with JQ on DroidGap?
$('#header').load('terms.htm');
$.ajax({
type:"GET",
timeout:10000,
async: false,
url: "terms.htm",
success: function(data) {
$('#header').html(data);
},
error: function(xhr,msg){
alert( msg);
}
});
I'm not 100% sure, but I think it's a problem with ICS 4.0.3. On 4.0.2 ajax seems to work completely fine, but for me too on 4.0.3, no ajax. Like you, I've tried everything, and nothing has worked..
I'm using PhoneGap btw. Ajax works fine in the standard browser, but not in a PhoneGap app..
If you are running your application in Chrome
Then you need to disable-web-security and enable loading local files see Cross-domain requests using PhoneGap and jQuery doesn't work
Else if Safari or simulator or web-server
Then it should work
See this link. I had the same problem and this solved it. Also, I think they fixed it in 1.6.0 but I am now seeing the same issue on iOS with PhoneGap 1.6.1.
it is just a long shot, but you say "I set both $.support.cors = true; and $.mobile.allowCrossDomainPages = true; at the appropriate time after stuff has loaded.". The jQuery mobile documentation says you have to set your global configuration before you load JQM:
Because the mobileinit event is triggered immediately, you'll need to bind your event
handler before jQuery Mobile is loaded. Link to your JavaScript files in the following
order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
In your case this would be:
<script src="jquery.js"></script>
<script>
$(document).bind("mobileinit", function(){
$.support.cors = true;
$.mobile.allowCrossDomainPages = true;
});
</script>
<script src="jquery-mobile.js"></script>
Like I said, just a guess ...
Related
I want to open page in Cordova WebView and add some styles. I have
function setSize() {
alert('Trying to load styles'); //works
app.insertCSS({code: 'body{width: 100% !important;height: 100% !important;background-color: red !important;}'}, function(){
alert('Styles are loaded!');
});
}
function onDeviceReady() {
var app= window.open('http://example.com','_self','location=no');
app.addEventListener('loadstart', setSize());
}
But it doesn't work. Is there any mistake ?
inAppBrowser is not a page from your application its a web page displays within browser of your app so to apply css into your browser elements you have to load CSS file into page of browser,
So here is an answer I have given in stack overflow before, which is working fine for that OP so try it, may be you will get success in what you wants to do.
I am trying to edit my WordPress theme file to show one ad code if an Android device is detected, another set of code if iOS.
The code is in the format:
<script type="text/javascript" src="//xxxxxxxx.js"></script>
I have tried several previous answers, such as the following:
Detecting iOS / Android Operating system
Detect Android phone via Javascript / jQuery
What is the best way to detect a mobile device in jQuery?
All of which are slightly different and cause my page to not load (blank page).
Could someone please give me a hand and post the full simplest/fastest code to simply detect Android versus iOS and do nothing for anything else (i.e. a Windows PC). Something I can just copy and paste into the theme files where I want it.
Edit: I also tried things like the following to no avail (this was exactly what I pasted into the WordPress theme file, without the xxx and including proper reference to external .js file:
<?php var isAndroid = /(android)/i.test(navigator.userAgent);
if (isAndroid) {?>
<script type="text/javascript" src="xxxxxxx.js"></script>
<?php } ?>
and
<?php function getMobileOperatingSystem() {
var userAgent = navigator.userAgent || navigator.vendor || window.opera;
if( userAgent.match( /Android/i ) )
{?>
<script type="text/javascript" src="//xxxxxxx.js"></script>
<?php}
} ?>
[EDIT]
Try changing your code to the below snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
function isAndroid() {
return /Android/i.test(navigator.userAgent);
}
function isIOS() {
return /iPhone|iPad|iPod/i.test(navigator.userAgent);
}
if(isAndroid()) { $.getScript("//cdn.bounce.bar/xxxx.js"); }
</script>
The reason what you tried above doesn't work is because you are trying to put javascript code into a PHP function when the interpreter is looking for PHP code.
If you have direct access to the HTML page, then you could do something like the following. This code is taken almost directly from Detect if browser is running on an Android or iOS device.
<script>
function isAndroid() { return /Android/i.test(navigator.userAgent); }
function isIOS() { return /iPhone|iPad|iPod/i.test(navigator.userAgent); }
</script>
Remember that PHP code is generally server side and javascript code is generally client side. I would try to load the script using Javascript depending on the OS type. Something like this might work if you are using Jquery:
<script>
if(isAndroid()) {
$.getScript("//xxxxxxx.js");
}
</script>
I'm still not exactly sure what you are trying to do, but let me know if this doesn't work and provide more details, and I'll try to help out.
You could do this
if(/Android/i.test(navigator.userAgent) ) {
..............
}
else if(/iPhone/iPad/i.test(navigator.userAgent) ){}
I'm trying to bind interactions to dynamically loaded links:
HTML:
<div id="content">
My dynamic content will be here.
</div>
JS:
$(function(){
loadContent();
$('#content').css('height',400);
$('#content').on('click','a',function(){
alert();
});
});
This is working fine on desktop, and with a quite short content on Android.
But it will not work with longer content on Android (with no JS error on Eclipse). Yet, I have not identified any other differences but content length between working and not working pages. Therefore, I tried to artificially limit the length of the content, and then it is working fine.
Do you have any clues of what is happening ?
// EDIT
I updated the code as I had made some basic mistakes when typing this question. This version better reflects the core problem.
// EDIT
I finally managed to isolate what produced a conflict. It is due to a css update of the div after content being loaded. If I artificially remove the height style attribute using Weinre, then the links are clickable again!
I can't see how this is working on desktop at all because the on() call should be inside the DOM ready handler, and the event name should come before the filtering element, like this:
$(function(){
loadContent();
$('#content').on('click', 'a', function(e) {
alert('something');
});
});
First, fix your document ready function to wrap loadContent and on.
Second, If you load content after the page is loaded. you should bind event to the body like this
$(function(){
loadContent();
$('body').on('click', '#content a', function(){
alert('Hello world!');
});
});
Im having a problem with Jquery Mobile after compiling it with Phonegap.
Here is a code snippet:
function game() {
$.mobile.changePage( "#game", { transition: "slideup"} );
}
Page 1:
<a onclick="game()" data-role="button">Start game</a>
Page2:
<div data-role="page" id="game" data-theme="a">
...
</div>
When i click the link "Start Game" it sure does change the page, but it double blinks. This looks very bad, and im trying to get rid of it. I like the transision slideup, but i just want the page to change without it looking like its double changing.
Anyone able to help? :)
Phonegap problem with blinking on android is due the poorly performing platforms like Android version 2.x. I advise you to turn them off on that android versions. There are some possible css fixes but I never managed to include them properly in my code.
Transitions can be turned off like this:
$(document).bind("mobileinit", function()
{
if (navigator.userAgent.indexOf("Android") != -1)
{
$.mobile.defaultPageTransition = 'none';
$.mobile.defaultDialogTransition = 'none';
}
});
More about android phones problem can be found here: http://jquerymobile.com/blog/2012/01/10/upcoming-releases-1-0-1-1-1-and-beyond/
After much after a lot of testing and refinement, we’ve decided to use a 3D transform feature test to exclude poorly performing platforms like Android 2.x from the more complex slide, pop and and flip transitions so these will fall back to the default fade for all transitions to ensure a smooth experience.
Solution found, thanks to Gajotres.
I found that i had to include the transition disable script before jquery mobile, which in terms are a bit weird. It would be more logical to include it after, however it works now, and im happy :)
The solution:
<script src="js/disableTransition.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
My experience is that loading websites in a WebView is much slower than performing the same actions in the Android Web Browser. I can see that all files have been loaded in my Apache log, it will take a few seconds until the page is displayed in the WebView control, however. Opening the same page in the native Web browser will result in an immediate display. It seems that rendering is somehow crippled.
Which browser settings do we have to apply in order to achieve the same performance as loading the page in the native web browser?
Our current settings:
browserset.setLoadsImagesAutomatically(true);
browserset.setJavaScriptEnabled(true);
browserset.setDatabaseEnabled(true);
browserset.setDatabasePath("data/data/com.xxx/databases");
browserset.setDomStorageEnabled(true);
browserset.setRenderPriority(WebSettings.RenderPriority.HIGH);
browserset.setSupportZoom(false);
browserset.setUserAgentString( browserset.getUserAgentString() + " (XY ClientApp)" );
browserset.setAllowFileAccess(true);
browserset.setSavePassword(false);
browserset.setSupportMultipleWindows(false);
browserset.setAppCacheEnabled(true);
browserset.setAppCachePath("");
browserset.setAppCacheMaxSize(5*1024*1024);
I finally got the reason of android webview bad performance issue.
Notice the image below... It used 12 seconds from OnPageStarted to OnPageFinished. Because it should load CSS,javascript and ... AJAX...
I notice that JQuery and JQueryMobile need load all DOM struct in Html.So if I lazy load the javascript after OnPageFinished,it should show page faster.
First use setTimeout instead of $(document).ready(function() {}); in JQuery.Then use lazyload javascript file.
The final html and javascript is:
<script src="/css/j/lazyload-min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
loadComplete(){
//instead of $(document).ready(function() {});
}
function loadscript()
{
LazyLoad.loadOnce([
'/css/j/jquery-1.6.2.min.js',
'/css/j/flow/jquery.flow.1.1.min.js',
'/css/j/min.js?v=2011100852'
], loadComplete);
}
setTimeout(loadscript,10);
</script>
You can find lazyload-min.js in http://wonko.com/post/painless_javascript_lazy_loading_with_lazyload
After do that,you can see the log image below:
Now, it only takes 2 seconds from OnPageStarted to OnPageFinished.
I posted the article at https://wenzhang.baidu.com/page/view?key=22fe27eabff3251f-1426227431
But it was written in Chinese:)
I ran into a similar issue, and after some heavy debugging noticed the native browser and WebView browser seem to be using different caches.
This code can be used to disable the WebView cache, and made WebView much faster for me (though at the expense of not caching). Note that it uses private APIs, so by using it you're risking the code will break in future releases:
try
{
Method m = CacheManager.class.getDeclaredMethod("setCacheDisabled", boolean.class);
m.setAccessible(true);
m.invoke(null, true);
}
catch (Throwable e)
{
Log.i("myapp","Reflection failed", e);
}