Cordova inAppBrowser InsertCSS doesn't works - android

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.

Related

Show custom navigation on top of inappbrowser Phonegap webview app

I load a webpage via the inappbrowser plugin for my Phonegap app.
The app shows a website and a webshop which are both accessible from the web as well.
I cannot add a button 'go back to app' (this wouldn't make sense when visiting the site from PC). So I want a custom navigation (I prefer bootstrap) in the phonegap app so I can navigate between multiple different websites.
Unfortunately the navigation gets hidden by the inappbrowser. Is there a way to show the app html navigation on top of the inappbrowser?
Thanks a lot!
adding absolute position, z-index 999999 and display block with css didn't help
One way you do could this is inject the button into your webpage by generating it in your Cordova app Webview:
var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
var button = document.createElement("div");\
button.innerHTML = "Return to app";\
button.classList.add("close_button");\
button.onclick = function() {\
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({action: "closeIAB"}));\
};\
body.appendChild(button);\
'
});
});
You'd then add a listener for the message that's posted when the button is click which closes the inappbrowser:
inAppBrowserRef.addEventListener("message", function (params){
if(params.data.action === "closeIAB"){
inAppBrowserRef.close();
}
});
You could also inject the styling of the button from within your Cordova app:
inAppBrowserRef.insertCSS({
"code": "\
.close_button {\
position: fixed;\
bottom: 0;\
z-index: 500;\
width: 100%;\
background: white;\
color: black;\
padding: 10px;\
font-size: 20px;\
}"
});
Or if you prefer, add the button styling to the CSS in your webpage (if it's under your control).
Similarly, if you don't like the idea of creating the button HTML dynamically, you could include it as part of your webpage but hide it by default unless a particular class is injected by the app:
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
body.classList.add("is_app");\
'
});
});
And in your website CSS:
body:not(.is_app) .close_button{
display: none;
}
Note that the emulation of the postMessage API that has been added to cordova-plugin-inappbrowser for Android & iOS by this PR is not yet in the latest release version on npm (v3.0.0) so you'll need to install the plugin directly off the Github master branch (v3.1.0-dev):
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
I did this long time ago another way. The in app browser opened a website with a additional GET parameter, so the website knows it's opened inside the app. Then in the website I generated a special button, with href containing a custom scheme and some command. (E.g. myapp://close-browser)
Then I configured the app to capture the custom url by using regular app scheme configuration. Once I captured the command in javascript, I closed the in app browser using it's API.

CSS :focus automatically opens link on android device

On a website I use :hover for web and :focus for touch device on a link. But on android devices if I touch the link it do the :focus but then automatically open the link.
It should do the :focus and if the user clicks again on the link, then it should open the link. Is this possible with pure CSS?
I got a short example of my :hover and :focus code:
#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
display:block;
}
There is no problem on iOS (works perfectly on iOS). Just on android devices.
You will need a bit of javascript (jQuery, which is already included in your site) and Modernizr to determine if the user is on a touchscreen device. There are other methods to check for touch but Modernizr will get you the best results in my opinion.
So first include Modernizr. You can download it from their website or use a cdn like cdnjs.com
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
After that, add this javascript to your site:
$(document).ready(function(){
if(Modernizr.touch){
$('#menu-mainmenu').on('click', '> li', function(e){
if(!$(this).data('open')){
e.preventDefault();
}
$(this).data('open', true);
});
}
});
So if you're on a touch device and click on a mainmenu-item then submenu pops up (due the :focus styling) but the link is blocked because of e.preventDefault(). Then the data-value "open" is set to true, so if the user taps on the link again, the if check fails and the link opens normally. I couldn't test it all the way through but it should work...

How to load css in phonegap before page display?

I am creating a Phonegap app. In my app am using different css for "Android" and "ios" so i have to load css only if it is android. The following code works perfectly but initially the page gets loaded without css and then after phonegap loads my css gets loaded which shows me a dancing page everytime when i display that page (i.e) css loads after the page displays.can anyone help to load the css before the page get displayed, but only if it is android platform.
<script type="text/javascript" >
var string;
// Wait for PhoneGap to load
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
function onDeviceReady()
{
check_img();
}
function check_img()
{
string = device.platform;
if(string=="Android")
{
var head = document.getElementsByTagName('head')[0];
var link = document.createElement('link');
//link.id = cssId;
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'css/style.css';
//link.media = 'all';
head.appendChild(link);
}
}
</script>
I found answer here.
http://simonmacdonald.blogspot.in/2012/04/phonegap-android-splashscreen-just-got.html
when you setup a splash screen you do the following in your mainactivity.java file
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 10000);
This would show your splash screen 10 seconds then your index.html page would be loaded. Notice I said then. Yup, that's right showing the splash screen is a blocking call. While the splash screen is being displayed your .html/.js/.css is not being loaded in the background. Well, that is all changing so that your splash screen is shown on one thread while your application loads underneath the splash screen in another thread. The best thing is you don't need to make any changes to your code. Just keep calling the splash screen like you normally would.

jQueryMobile running on Android / PhoneGap refuses .load / .ajax

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

Load first page on splashscreen using phonegap on android

Hi i'm using phonegap in conjunction with Jquery mobile. I'm trying to immediately fetch the main page, while showing the user a splashscreen.
In PhoneGap for Android i'm using this
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html", 2000);
While this loads the splash, it also delays the loading of index.html. It it possible to start fetching it right away? Also, if not with phonegap, has anybody done this using JQM instead of phonegap?
UPDATE: After using it with a slower loading first page (doing a json request) it kinda looks like the splash screens shows for a longer period of time, so this appears to be the default behavior
As given here, you could kill the splashscreen once you have loaded all the assets and DOM elements have been loaded.
something like this:
Java:
super.setIntegerProperty("splashscreen",R.drawable.splashscreen);
super.loadUrl("file:///android_asset/www/index.html", 2000);
on your HTML, javascript section:
function onDeviceReady()
{
cordova.exec(null, null, "SplashScreen", "hide", []);
window.MacAddress = new MacAddress();
window.MacAddress.getMacAddress(function(result){
database._mac_address = result.mac;
}, function(){
database._mac_address = '01:02:03:04:05:06';
});
}
I've implement better solution.
You can set your custom splashscreen and hide it with JS call after page have been loaded
https://github.com/inetstd/phonegap-android-custom-splashscreen/wiki

Categories

Resources