Can anyone please help me get the external page that the Cordova InAppBrowser loads on Android app to fit to the phone screen size ?.
I am invoking the inapp browser from a Sencha Touch app using the follwing code.
var opt = 'location=no,clearcache=yes,closebuttoncaption=Back,EnableViewPortScale=yes';
window.open('http://sg-prod-mobilityapi.cloudapp.net','_blank', opt);
When ever I invoke the url I get the following screen
Could anyone please help me out ?.
Add this code into your index.html
<meta content=
"width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
name="viewport" />
If the external page fit to the browser viewport, it should have a responsive design. I gone through that url, in that the middle div is set with fixed width and height of 340x380 px. you can only enable the zooming in in app browser.
Also phonegap allow you to execute some scripts after loading the url, just like injecting scripts.
var iabRef = window.open('http://sg-prod-mobilityapi.cloudapp.net', '_blank', 'location=yes');
iabRef.addEventListener('loadstop', replaceCustomStyle);
function replaceCustomStyle() {
iabRef.executeScript({
code: "var itm = document.querySelector('#Main div');
itm.setAttribute('style','width:100%');"
}, function() {
alert("Element Successfully Hijacked");
});
}
Try this and it is documented here
Related
I've build my web app into a progressive web app (PWA).
Everything works great except when i click on a input for typing something in the pwa the keyboard hides elements which are position fixed to the bottom.
on the website viewed with chrome on android this is not a problem.
i've tried to debug this with the devtools connected to my phone, but there the keyboard doesn't appear.
Does anyone have an idee what i can do to fix this?
One of the elements with this problem:
.scanner .text-input-btn {
position: fixed!important;
bottom: 18vh;
left: 50vw;
margin-left: -28px;
}
I think it may be a bug in the google chrome's PWA launcher, i think the webview is still 100% of the device height i/o the 100% minus the height of the virtual android keyboard.
In the browser: (correct)
In a PWA: (wrong)
Take a look at your manifest.json and make sure display property is standalone, we had a couple of problems with display set to fullscreen, samsung keyboard takes the focus out of the PWA
you ned to set meta tag for your pwa app
if you use javascript framework like ( vuejs / reactjs / angularjs ) can use below meta code
{name: 'viewport', content: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'},
{viewport: 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no',mobileAppIOS: true},
{name: "mobile-web-app-capable", content: "yes"},
{name: "full-screen", content: "yes"},
{name: "browsermode", content: "application"},
{name: "screen-orientation", content: "portrait"},
if you want can set below code to your html page
<meta name='viewport' content= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'>
<meta viewport= 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' mobileAppIOS= true>
<meta name="mobile-web-app-capable" content= "yes">
<meta name="full-screen" content="yes">
<meta name="browsermode" content="application">
<meta name="screen-orientation" content="portrait">
I've been wrestling with making calls to window open, using inappbrowser from within my app. Basically, I'm using phonegap as a wrapper to load up a mobile skinned CMS site with special app features.
Here is the index.html. I'm using inappbrowser (with location set to no).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Emerald Test App</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="width=device-width" />
<script src="phonegap.js"></script>
<script type='text/javascript'>
var ref = null;
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
var url = 'https://my-cms-site.com/content.aspx?page_id=31&org_id=1&app=1';
var target = '_blank';
var options = "location=no"
ref = cordova.InAppBrowser.open(url, target, options);
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
What I'm looking to do, is open links in a system browser - from my external site loaded through inappbrowser
I've tried downloading files using similar documentation and suggestions from posts like
<script type="text/javascript">
window.open(url, '_system');
</script>
And _blank, and adding 'location=no' etc, but no dice. These are external pages, loaded from my remote site.
When these links are clicked, they open in the same browser (inappbrowser or webview) and take over the browser. What I'm looking to do is open these up in another system browser (chrome, safari, whatever). This would take care of my download issue (as the files will hopefully open up in the system browser and the user can figure out what to do with them).
I've tried to add an event listener, and executescript to return a value of the href. Then use that value to window.open(href,'_system'); from the index.html (instead of the remote page). Because on the index, I will still have the reference to inappbrowser.
ref.addEventListener( "loadstop", function() {
ref.executeScript(
{ code: "var gbal = null; $('a').on('click', function() { gbal = $(this).attr('href'); }); (function runIt() { return gbal })();" },
function( values ) {
if (values != null) {
//alert( values[ 0 ] );
window.open(values[0],'_system');
}
}
);
});
}
The values[0] is always null. Which seems to indicate I'm not doing something correctly in the code: portion of executescript - or $(this) is not really this
So, big question - how can I open links in my external site in a system browser. window.open('whatever.htm', '_XXXXX') makes no difference when called on my remote site. Am I on the right track by using an event listener?
Answering my own question here so anyone facing a similar situation can get a solid answer. I've pieced this together from other posts, references and documentation.
So you want to open up a link to an external browser, in a remote loaded site in InAppBrowser?
On your remote site, you will need to include a script src to your cordova.js file, your cordova_plugins.js file, and include your plugins folder. These files must be hosted on your remote site.
I am choosing to load mine conditionally if I know it's the "app". The cordova files when loaded will throw a series of alerts, so you won't want to load these unless you know it's the app.
Where do you get these files? I installed Phonegap Desktop and used the files from the build, but had some reference errors. I instead used Phonegap Build, and extracted the files from the APK. Renamed the appname.apk to appname.apk.zip and extracted/copied the needed js files to my server. *There are some issues with platform differences, and the cordova.js file will need to be altered and conditionally loaded for iOS/Android.
These are necessary so you have handles to the inappbrowser (and in the case of my "close the app" requirement - navigator).
On my remote (external) site (after I have loaded the cordova/plugins) I can now close the app with a simple call to
navigator.app.exitApp();
In the pages of my remote (external) site loaded in inappbrowser, I can now open links in external pages by doing something like this:
<a onclick="loadUrl('http://google.com'); return false;" href="#">Test link, don't click</a>
<script type="text/javascript">
$('.closeapp').click(function() {
navigator.app.exitApp(); //this only works on Android. iOS doesn't allow for programmatic exit
});
function loadUrl(url){
navigator.app.loadUrl(url, { openExternal:true });
return false;
}
</script>
I plan on modifying the loadURL function somewhat using jquery, to be handled on click and look for a class. Something like:
$('.downloadable').click(function() {
var url = $(this).attr('href');
navigator.app.loadUrl(url, { openExternal:true });
});
The above only works for Android.
Trying a vanilla window.open('http://www.whatever.com', '_system') doesn't open an external browser in iOS from my external site. I thought about using another ref = cordova.inappbrowser.open() from inside my external site? That doesn't work. Anyone have any ideas?
so i have a question about open websites with the webView.loadURL function. On ios the scale factor seems to be perfect, and the page fits perfect to the Rectangle I create to visualize the page. But if i create a build for andorid, the website opens with the maximum of zoom, so I have to tap into the screen and zoom out to see the complete page.
Has someone an idea how to determine the automatic zoom on android? It would be great if I load the page, and it would be showed completely, without a zoomfactor like on ios.
To change the size of the rectangle wouldn't be a solution, because I have a fix size, and I need to keep it.
Best regards and thanks a lot!
Hopefully it is not too late and hopefully this time it will be useful.
Try adding an element into the dom like this:
var webView:StageWebView = new StageWebView();
webView.viewPort = new Rectangle( 0, 0, this.stage.stageWidth, this .stage.stageHeight);
webView.stage = this.stage;
var htmlString:String = "<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>";
webView.loadString( htmlString );
If you can access the source code of the website, try to write this: <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
I am a beginner in learning Android app development. Here is my issue
I am using the eclipse given along with Android SDK to develop the Apps. To web enable the Apps i have used phonegap build tutorial to add cordova API. Now i am able to see the html file if i just use a normal HTML controls or text. But i have a code which calls a webservice from another WebSphere server and displays the data. When i run the code in IIS server (using DreanWeaver IDE) it works perfectly. But when i try to run this as an app in the emulator (From Android SDK) i dont see any output from the webservice. I can't even see a call from the android app to my webspehere server (which i can see when i run this code as a web page in Dreamweaver). Here is my index.html code. I have included the ws.js and prototype.js inside assets/www/scripts/ if anyone is wondering about that. Can somebody help me to resolve this issue.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta charset="utf-8">
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/ws.js"></script>
<script type="text/javascript">
function onBodyLoad(name, container)
{
console.log("Here1");
var call = new WS.Call('http://localhost:9080/ILM/services/ILMReports');
var nsuri = '';
var qn_op = new WS.QName('getInboundSearchByItemReport',nsuri);
var qn_op_resp = new WS.QName('getInboundSearchByItemReportResponse',nsuri);
call.invoke_rpc(
qn_op,
new Array(
{name:'name',value:name}
),null,
function(call,envelope) {
var ret =
envelope.get_body().get_all_children()[0].
get_all_children()[0].get_value();
container.innerHTML = ret;
}
);
/*window.location = "TestingAJAXWS.html";*/
}
function onDeviceReady()
{
// do your thing!
navigator.notification.alert("PhoneGap is working")
}
</script>
</head>
<body onload="onBodyLoad('aaa',$('result'))">
<h1>Hey, it's PhoneGap!</h1>
</body>
The problem i can see is the localhost address you are using to access the web service.
Somehow android emulator don't allow to the localhost address as it is unknown to the emulator. (if you know the reason please write)
This is an old thread. But i hope it'l help somebody else.
/T
I developp a mobile web app with facebook javascript SDK.
I use the meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> to scale my content. But when I init my facebook app FB.init(), page width expands a lot and horizontal scroll appears.
How to fix this bug width on Android browser ? (don't appear on iOS)
We were encountering this same issue and we came up with a workaround. Note that obviously this may be outdated in future FB API modifications.
We had to load in the FB SDK asyncronously and make sure the XFBML param is set to false.
<!-- this div element is required by FB JS SDK -->
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: facebookapikey, status: false, cookie: false, xfbml: false});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Hope that helps everyone out.