I am using the following code to display an HTML page in a webview:
this.requestWindowFeature(Window.FEATURE_NO_TITLE);
this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
WindowManager.LayoutParams.FLAG_FULLSCREEN);
setContentView(R.layout.socialmedia
);
webview = (WebView) findViewById(R.id.webview);
webview.loadUrl("file:///android_asset/www/facebook.html");
And the HTML page:
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap.js"></script>
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
</head>
<body>
<div id="container"></div>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1" ></script>
<fb:like-box href="http://www.facebook.com/workatcareerbuilder" width="292" show_faces="true" stream="true" header="true" hScrollbar:true></fb:like-box>
<!-- <script>
function twitter(){
new TWTR.Widget({
version: 2,
type: 'profile',
rpp: 6,
interval: 6000,
title: '#palafo',
width: 250,
height: 300,
theme: {
shell: {
background: '#ad0000',
color: '#ffffff'
},
tweets: {
background: '#ffffff',
color: '#444444',
links: '#ad0000'
}
},
features: {
scrollbar: true,
loop: false,
live: true,
hashtags: true,
timestamp: true,
avatars: true,
behavior: 'all'
}
}).render().setUser('imomentous').start();
}
</script> -->
</body>
</html>
But it shows nothing on screen. Please help. I have kept Internet permission also.
I found this logcat message:
06-28 06:33:50.510: INFO/GATE(20523): <GATE-M>DEV_ACTION_COMPLETED</GATE-M>
Thanks.
I think it may be that WebView doesn't, by default, allow javascript to execute. If that's the case then you only need to enable javascript:
webview.getSettings().setJavaScriptEnabled(true);
Related
I have a WebView that is loading html tags using loaddata method .All the tags are getting rendered except the videourl.
Can some one help me out?
htmlstring="<html> <head> <link href="http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css" rel="stylesheet"> <script src="http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js"></script> </head> <body> <h1>Skill Cloud</h1> <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" tabindex="0" data-setup='{"techOrder": ["azureHtml5JS", "flashSS", "html5FairPlayHLS","silverlightSS", "html5"], "nativeControlsForTouch": false}'> </video> <script> var myOptions = { autoplay: false, controls: true, width: "100%", height: "auto", poster: "" }; var myPlayer = amp("azuremediaplayer", myOptions); myPlayer.src([{ src: "http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest", type: "application/vnd.ms-sstr+xml" }, ]); </script> <br /> <p>© Microsoft Corporation 2016</p> <video id="azuremediaplayer" class="azuremediaplayer amp-default-skin amp-big-play-centered" controls autoplay width="640" height="400" poster="" data-setup='{}' tabindex="0"> <source src="http://b028.wpc.azureedge.net/80B028/Samples/a38e6323-95e9-4f1f-9b38-75eba91704e4/5f2ce531-d508-49fb-8152-647eba422aec.ism/manifest" type="application/vnd.ms-sstr+xml" /> <p class="amp-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p> </video> </body> </html>"
mWebView.loadData(htmlstring, "text/html; charset=UTF-8", null);
The video source url is not getting rendered
you have enabled javascript ?
yourWebViewb.getSettings().setJavaScriptEnabled(true);
EDIT:
I've tested your code and it works for me this way
webview.getSettings().setJavaScriptEnabled(true);
webview.getSettings().setRenderPriority(WebSettings.RenderPriority.HIGH);
webview.getSettings().setBuiltInZoomControls(false);
webview.getSettings().setLoadWithOverviewMode(true);
webview.getSettings().setLoadsImagesAutomatically(true);
webview.getSettings().setUseWideViewPort(true);
webview.setWebChromeClient(new WebChromeClient());
String htmlstring = "<html> <head> <link href=\"http://amp.azure.net/libs/amp/1.7.1/skins/amp-default/azuremediaplayer.min.css\" rel=\"stylesheet\"> <script src=\"http://amp.azure.net/libs/amp/1.7.1/azuremediaplayer.min.js\"></script> </head> <body> <h1>Skill Cloud</h1> <video id=\"azuremediaplayer\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" tabindex=\"0\" data-setup='{\"techOrder\": [\"azureHtml5JS\", \"flashSS\", \"html5FairPlayHLS\",\"silverlightSS\", \"html5\"], \"nativeControlsForTouch\": false}'> </video> <script> var myOptions = { autoplay: false, controls: true, width: \"100%\", height: \"auto\", poster: \"\" }; var myPlayer = amp(\"azuremediaplayer\", myOptions); myPlayer.src([{ src: \"http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest\", type: \"application/vnd.ms-sstr+xml\" }, ]); </script> <br /> <p>© Microsoft Corporation 2016</p> <video id=\"azuremediaplayer\" class=\"azuremediaplayer amp-default-skin amp-big-play-centered\" controls autoplay width=\"640\" height=\"400\" poster=\"\" data-setup='{}' tabindex=\"0\"> <source src=\"http://b028.wpc.azureedge.net/80B028/Samples/a38e6323-95e9-4f1f-9b38-75eba91704e4/5f2ce531-d508-49fb-8152-647eba422aec.ism/manifest\" type=\"application/vnd.ms-sstr+xml\" /> <p class=\"amp-no-js\">To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</p> </video> </body> </html>";
webview.loadDataWithBaseURL(null, htmlstring, null, "UTF-8", null);
I tried load data with "loadData" but not work use instead "loadDataWithBaseURL", try my code, works for me in android 4.2
For a school project I've to do a PhoneGap application. I want to do a div with a map, and after makes interest points. But it's impossible to have it in my android emulator, got the error "referenceError can't find variable google". I tried a lot of solution I've found and the only thing I can do it's to show a little piece of map on the top of my application, but only on an internet browser.
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="jquery.js"></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script src="jquery.mobile-1.3.0.js"></script>
<script src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
#footer {
position:fixed;
bottom:0;
left:0;
right:0;
}
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBKh2nx6OdT6pdPi-KtPNH_6Lc7Aj9z7d4&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
</head>
<body>
If someone have a piece of code working on his computer, or find an error on mine i would be very happy.
Thanks.
The following works for me in my Nexus 4 emulator. Taken mostly from Google Maps JavaScript API:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script scr="jquery.js></script>
<link rel="stylesheet" href="jquery.mobile-1.3.0.css" />
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="jquery.mobile-1.3.0.min.js"></script>
<style type="text/css">
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
I wish to make a tag's height and width to 100%, now in other examples it worked using tag demonstrated below. But in the code given below, if I remove the "style="width: 370px; height: 505px"" from the and add the following code after meta tag
<style type="text/css>
body{
height:100%;
width:100%;
}
#map-canvas{
height:100%;
width:100%;
}
</style>
it doesn't work.
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"> </script>
<script type="text/javascript">
var shape;
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
zoom: 4,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
shape = new google.maps.Polygon({
strokeColor: '#ff0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#ff0000',
fillOpacity: 0.35
});
shape.setMap(map);
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(e) {
var vertices = shape.getPath();
vertices.push(e.latLng);
}
function clearmap(){
initialize();
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body style="font-family: Arial; border: 0 none;">
<div id="map-canvas" style="width: 370px; height: 505px"></div>
<input type="button" value="click" onclick="clearmap"()>
</body>
I made a jsfiddle out of your code
http://jsfiddle.net/jRwDs/3/
...and the answer from Rohit Azad, to add the html tag to the document style, seems to fix your problem (at least on jsfiddle).
Javascript does not work outside index.html page:
Project Test 1:
Index.html (with GEOLOCATION PAGE CODE) works fine
Project Test 2:
Index.html (with MENU PAGE CODE)
Geolocation.html (with GEOLOCATION PAGE CODE) javascript does not work
The page Geolocation.html opens up, but javascript does not run.
What am i missing?
GEOLOCATION PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<!-- <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />-->
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" charset="utf-8" src="js/cordova-2.5.0.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Ready...';
navigator.geolocation.getCurrentPosition(onSuccess, onError, { maximumAge: 3000, timeout: 10000, enableHighAccuracy: false });
}
function onSuccess(position) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Success...';
initialize(position.coords.latitude, position.coords.longitude);
}
function onError(error) {
var element = document.getElementById('geoTemp');
element.innerHTML = 'Error...';
alert('code: ' + error.code + '\n' +
'message: ' + error.message + '\n');
}
function initialize(latitude, longitude) {
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
function onBodyLoad(){
alert("test!");
}
</script>
</head>
<body>
<h2>Location</h2>
<p id="geolocation">Finding geolocation...</p>
<p id="geoTemp"></p>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
MENU PAGE CODE:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test</title>
<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.3.0.css">
<link rel="shortcut icon" href="favicon.ico">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.0.js"></script>
<script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>
<div data-role="page" id="pageMain">
<div data-role="header">
<h1>
TestPage
</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li><a href="geolocation.html" data-transition="slide">
<h2>Geolocation Test</h2>
<p>Testing</p>
</a></li>
</ul>
</div>
</div>
</body>
</html>
I have also tried to add an onload function to the body tag and call a test function but it didn't work either.
In the link to geolocation.html, add this attribute data-ajax="false". This will prevent jQuery from loading the page via Ajax.
google map v3 is not fully displayed in html5, phonegap.
This map is drag-able, here is JavaScript code(main.js)
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
initialize();
and here is my html
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="css/jquery.mobile.css" />
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-1.9.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.6.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="js/tabs.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.js"></script>
<script type="text/javascript" src="jquery.ui.map/jquery.ui.map.services.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
</head>
<body>
<div id="page-id" data-role="page" >
<div id="map-container"><div id="map_canvas" style="height:600px; width:600px;"></div> </div>
</div>
</body>
</html>
css
#map-container {
padding: 6px;
border-width: 1px;
border-style: solid;
border-color: #ccc #ccc #999 #ccc;
-webkit-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
-moz-box-shadow: rgba(64, 64, 64, 0.5) 0 2px 5px;
box-shadow: rgba(64, 64, 64, 0.1) 0 2px 5px;
width: 600px;
}
#map_canvas {
width: 600px;
height: 400px;
}
Please suggest me solution where is the problem if I inspect it in firebug it loads completely and show a complete map in div.
We had the same problem and we solved it by setting "max-width: none" on the map . But I don't remember why. :(
Looking at your screenshot it seems that the mapcontrol takes up the desired space but the actual map-area isn't large enough. Try to move your call to initialize(); so that it executes when the rest of the page has loaded and see if it helps.
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myLatlng2 = new google.maps.LatLng(-24.363882,131.044922);
var myOptions = {
center: myLatlng,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarker(myLatlng);
setMarker(myLatlng2);
}
function setMarker(p)
{
marker = new google.maps.Marker({
position: p,
title:"Hello World 2!"
});
marker.setMap(map);
}
$(document).ready(function() {
initialize();
});
Another solution might be to call the resize event and have the map control remeasure itself after everything has loaded, that is done by calling google.maps.event.trigger(map, "resize"); (and call initialize() outside of the ready-function as before).
$(document).ready(function() {
google.maps.event.trigger(map, "resize");
});
Pls check the following :
<div id="mapa" style="width: 350px; height: 350px"></div>
Above is the div for map to be listed.
var map = new google.maps.Map(
document.getElementById('mapa'), {
center: new google.maps.LatLng(9.295680287227711, 76.87921151518822),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
I tried all the above wont work any so had done a trick like this which give desired result.
I write a mouse over function and call the below code
(1) Modify
<div id="mapa" onmouseover="show_sidebar()" style="width: 350px; height: 350px"></div>
(2)
function show_sidebar(){
google.maps.event.trigger(map, 'resize');
}
I've had this issue in the past and posted my solution to a similar question.
The following fixed it:
google.maps.event.addListenerOnce(map, 'idle', function() {
google.maps.event.trigger(map, 'resize');
});
Waiting for the map's idle state (i.e. it's finished loading itself) and then telling it to resize itself.