I am trying to create an app with phonegap. in iOS, my app works properly. but in Android, my app's first page is not working in app and it always launches a system browser.
https://www.youtube.com/watch?v=ix2M7XdRN7c&feature=youtu.be&t=4m12s
index.html
<html>
<head>
<META HTTP-EQUIV="refresh" CONTENT="0; url=http://www.google.com/">
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>title</title>
</head>
<body>
<script type="text/javascript">
window.location.href = "http://www.google.com"
</script>
test link
</body>
</html>
I tried many ways for fix it. ex) use 'meta tag', 'window.location.replace', and 'window.location.href' ...
but my app still launches a system browser just in an android platform.
Please let me know, how can i display my first page without launching a system browser.
Have you tried changing the config.xml ?
<content src="index.html" />
Related
Trying to display an existing web page in a phonegap app. It seems like this was a big topic in 2014 but none of those answers seem to apply now.
Here is what I've done in index.html. It works in a web browser but not in the app. Has anyone worked this out? Maybe I am missing a permission somewhere?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Blank App</title>
</head>
<body onload="window.location.href='http://www.google.com'">
<script type="text/javascript" src="cordova.js"></script>
<p>hello</p>
</body>
</html>
This also works in browser but not in phonegap...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Refresh" content="0; url=https://www.google.com" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
This also does not work...
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
HELLO
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Here it is, cost me $100 on upwork. I hope it saves somebody some headache!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Broken</title>
</head>
<body>
<script type="text/javascript" src="cordova.js"></script>
<script>
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var ref = cordova.InAppBrowser.open('https://google.com', '_blank', 'location=no');
}
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WorkFridge - A Magic Box</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,800" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
Unable to access our angular website on iPhone but can be accessed on the android phone. we are getting a black screen on iPhone.
website url: http://stage.workfridge.com
I have an iOS or Android app we would want to show installation banner when users visit your website via mobile browser.
I try to use this plugin :
https://github.com/jasny/jquery.smartbanner
<html>
<head>
<title>YouTube</title>
<meta name="author" content="Google, Inc.">
<meta name="apple-itunes-app" content="app-id=544007664">
<meta name="google-play-app" content="app-id=com.google.android.youtube">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="jquery.smartbanner.css" type="text/css" media="screen">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
</head>
<body>
...
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.smartbanner.js"></script>
<script type="text/javascript">
$(function() { $.smartbanner() } )
</script>
</body>
</html>
I need when any user install my app. show view icon ,But if user not install it , show him download
How can do that
I have an Android application with WebView and index.html in assets.
There is such thing in HTML like localStorage.
In my index.html I have script: localStorage.setItem("key", "value");
Is there any way to debug webkit, or to see stack trace when we call localStorage.setItem ?
I want to see which methods called in native from the beginning to the end.
I think there should be some possibility.
I believe have not enough debug skills.
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
WebView browser = (WebView)findViewById(R.id.webView);
browser.setHapticFeedbackEnabled(true);
browser.getSettings().setJavaScriptEnabled(true);
browser.getSettings().setSavePassword(false);
browser.getSettings().setDatabaseEnabled(true);
browser.getSettings().setDomStorageEnabled(true);
browser.setWebViewClient(new WebViewClient());
browser.setWebChromeClient(new WebChromeClient());
browser.loadUrl("file:///android_asset/index.html");
}
Index.html
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<title>Hello World</title>
</head>
<body>
<script type="text/javascript">
localStorage.setItem("lastname", "Smith");
</script>
</body>
</html>
I am trying to build a web app for Android device using Senahc Touch and display a splash screen. I was using the Sencha framework which has a Ext.Setup property that you can specify the iPhone splashscreen. I've stopped trying to get this parameter to work and am now just trying to use standard HTML5 meta tags to load the splash screen. Has anyone ever managed to get the Android splash scren displayed either in a basic HTML5 app or a fullyblown Sencha app?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-startup-image" href="TSplash.gif" />
<script src="sencha-touch.js" type="text/javascript"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
new Ext.Application({
launch: function() {
new Ext.Panel({
fullscreen : true,
html : 'Hello World_7!'
});
}
});
</script>
</head>
<body></body>
</html>
One way is to add a background image to the body of your html. You see it on startup for a moment before your activity's js kicks in:
<HTML>
<head>
<title>Contacts</title>
<script type="text/javascript" src="sencha-touch.js"></script>
<link href="sencha-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="phonegap-1.1.0.js"></script>
<script type="text/javascript" src="app/app.js"></script>
<link href="app/app.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="0000" style="background-image: url(TSplash.gif);"></body>
</HTML>