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>
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 am testing a simple script for a larger solution; Im retrieving information from an external JSON file and displaying it within a PhoneGap app. The script works as needed, except when I change the content (not the structure) of the external JSON file. In fact I can even remove the JSON file from the server and the script still displays the original JSON content. Apparently there is something caching somewhere. Is there a way to disable such?
BTW Im running this on a local device via USB debugging not an emulator.
Here is the code (the console log is present for earlier debugging via the browser):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="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" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<script>
$( document ).ready(function() {
console.log( "ready!" );
});
$.getJSON( "http://www.serverxyz.com/test.json", function( data ) {
var items = [];
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
$( "<ul/>", {
"class": "my-new-list",
html: items.join( "" )
}).appendTo( "body" );
});
</script>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
and here is the JSON content:
{
"Goal One": "Activity One Completed",
"Goal Two": "Activity Two Completed",
"Goal Three": "Activity Three Completed",
}
Looks like I can use the cache:false for this. Hope someone finds this helpful.
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" />
document.addEventListener("ondeviceready", function(){ alert("123");},true);
document.addEventListener("backbutton", function(){ alert("123");},true);
// I also used function separately but not worked
// I am using the correct cordova library
// I kept this code in external js file then also its not worked.
// I also called it before including any other js file into the HTML
// same thing also happening for 'backbutton' event
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=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/common.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.min.css.css" />
<title>Since your car is manufactured before 2000</title>
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript">
document.addEventListener("backbutton", function(){
alert("Back button pressed");
},true);
</script>
</head>
<body>
The event is called deviceready, not ondeviceready.
Also, you need the register the backbutton event after the deviceready-event has fired, otherwise, it will not work.
Modified example from the Cordova docs:
<!DOCTYPE html>
<html>
<head>
<title>Device Ready Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// device APIs are available
//
function onDeviceReady() {
document.addEventListener("backbutton", onBackButton, false);
}
function onBackButton(){
// your code here
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>