I'm testing the jquery.mobile script and was able to run a HTML5 content using WebView.
It seems that it can't find my jquery files but i've placed them accordingly inside the following path:
Project > assets > www > jquery
where my html file is located:
Project > assets > www > index.html
my html looks like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="file:///android_asset/www/jquery/jquery.mobile-1.0.min.css" />
<script src="file:///android_asset/www/jquery/jquery-1.6.4.min.js"></script>
<script src="file:///android_asset/www/jquery/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
#floatMe
{
float: right;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#btnHello').click(function() {
var name = $('#txtName').val();
alert(name);
});
});
</script>
</head>
<body>
<div id="floatMe">
What's your name?
<input id="txtName" value="" />
<button id="btnHello">say hello</button>
</div>
</body>
</html>
The error keeps prompting me:
ReferenceError: Can't find variable: jQuery at file:///android_asset/www/index.html
ReferenceError: Can't find variable: $ at file:///android_asset/www/index.html
Have you tried using a path relative to your HTML page?
<script src="jquery/jquery-1.6.4.min.js"></script>
That's how you reference scripts from a page within a PhoneGap project, which should be similar since it's running in a WebView too.
Related
I want to load dynamic HTML content in Flutter WebView with other resources like JS, CSS, and images stored in my asset directory.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="./style.css" />
<!--<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-mml-chtml.js">
</script>-->
<script src="script.js"></script>
</head>
<body>
<!-- dynamic content using those js and CSS -->
</body>
</html>
This is my asset directory mentioned in pubspec.yaml
# To add assets to your application, add an assets section, like this:
assets:
- assets/htmls/
I used the below code to load the HTML but with no luck:
webViewController?.loadHtmlString(html, baseUrl: 'file://assets/htmls/');
Problem
I am able to successfully load my index.html file in my WebView from the local assets directory with webView.loadUrl("file:///android_asset/www/index.html);
The page remains white and I get js errors in my chrome debug console that say that the *.js and *.css files that are linked in the index.html are not able to be found. Filed to load resource: net:: ERR_FILE_NOT_FOUND.
Information
WebView settings
webView.getSettings().setJavaScriptEnabled(true);
webView.getSettings().setDomStorageEnabled(true);
webView.getSettings().setJavaScriptCanOpenWindowsAutomatically(true);
webView.getSettings().setAllowFileAccess(true);
webView.getSettings().setAllowUniversalAccessFromFileURLs(true);
WebView also has a custom WebChromeClient and WebViewClient.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
...
<link rel="stylesheet" href="styles.css">
...
</head>
<body>
<app-root></app-root>
...
<script type="text/javascript" src="runtime.js">
</script>
...
</body>
</html>
I have a www directory inside my assets directory that contains my website content.
Directory Structure:
assets
www
index.html
*.js (many js files)
styles.css
etc
All the files are located in the same directory as the index.html so I'm not sure why they aren't able to be found.
Is there something with the Android WebView that is causing this error? I'm at a loss here.
I had the same issue once. I have added the complete paths and it worked. Please add the path,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
...
<link rel="stylesheet" href="file:///android_asset/www/styles.css">
...
</head>
<body>
<app-root></app-root>
...
<script type="text/javascript" src="file:///android_asset/www/runtime.js">
</script>
...
</body>
</html>
and respectively to all other files.
I'm making an app in cordova. I've installed some plugins, but problem is that I cannot use those plugins as when I try to call them like window.plugins.googleplus.login then it says property 'plugins' does not exists on window. So I searched from solution and they said use window['plugins'] I tried that too, but now it says undefined.
I tried cordova plugins ls and it lists all my plugins. Also checked available plugins in android.json, all plugins are there. Can anyone help me why it is undefined? My index.html looks like below.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scrmbl</title>
<base href="./">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<base href="./">
<script type=”text/javascript” src="cordova.js"></script>
</head>
<body>
<app-root>
<center>
<div style="margin-top: 200px;">
<img src="./assets_v2/images/icon.png" alt="" >
<br><br>
<img src="./assets_v2/images/preloader.gif" alt="">
</div>
</center>
</app-root>
</body>
</html>
Any help will be highly appreciated.
cordova --version
8.0.0
I think you are calling it without deviceready. None of the googleplus methods should be called before deviceready has fired. The plugin should be called when everything's ready for the plugin to be called.
Example:
document.addEventListener('deviceready', deviceReady, false); function deviceReady() {
console.log('Device is ready!'); window.plugins.googleplus.trySilentLogin(...); }
Reference visit here
I want to know if it's possible to create a page (example login) with Ionic creator web site (see http://ionic.io/products/creator), download it as .zip archive (always via their web site), and than open the index.html page inside an Android webView. I need of this page only for a "GUI" of a web application (on a server) that a want to execute inside my native Android app (creating an hybrid app).
I have tryed to call this index.html page inside the WebView of my Android app but I obtain "404 - not found" message.
This is the index.html page inside the .zip archive of this my Ionic Creator little project that I have obtained from their web site:
<!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></title>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development)
<script src="cordova.js"></script>
-->
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<link href="css/ionic.app.css" rel="stylesheet">
<style type="text/css">
.platform-ios .manual-ios-statusbar-padding{
padding-top:20px;
}
.manual-remove-top-padding{
padding-top:0px;
}
.manual-remove-top-padding .scroll{
padding-top:0px !important;
}
ion-list.manual-list-fullwidth div.list, .list.card.manual-card-fullwidth {
margin-left:-10px;
margin-right:-10px;
}
ion-list.manual-list-fullwidth div.list > .item, .list.card.manual-card-fullwidth > .item {
border-radius:0px;
border-left:0px;
border-right: 0px;
}
.show-list-numbers-and-dots ul{
list-style-type: disc;
padding-left:40px;
}
.show-list-numbers-and-dots ol{
list-style-type: decimal;
padding-left:40px;
}
</style>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/routes.js"></script>
<script src="js/directives.js"></script>
<script src="js/services.js"></script>
<!-- Only required for Tab projects w/ pages in multiple tabs
<script src="lib/ionicuirouter/ionicUIRouter.js"></script>
-->
</head>
<body ng-app="app" animation="slide-left-right-ios7">
<div style="">
<div style="">
<ion-nav-bar class="bar-stable">
<ion-nav-back-button></ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
</body>
</html>
Did you linked it properly? Did you placed it in the www folder? Can you show us our java code where you load the webview into?
i'm new with PhoneGap build and i'm tryng to write a simple app with a button for facebook login. In PhoneGap build documentation i found is very simple to add this plugin
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha256.js"></script>
<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/components/enc-base64-min.js"></script>
<script src="js/facebookConnectPlugin.js"></script>
<script src="js/jq.js"></script>
</head>
<body>
<div data-role="page" id="contenuto">
<a href="index.html" data-role="button" class='bt_loginProprietario'>Login</a>
<a href="index.html" data-role="button" class='bt_loginFacebook'>Login con facebook</a>
</div>
</body>
</html>
jq.js
function loginFacebook(){
facebookConnectPlugin.login( ["email"],
function (response) { alert(JSON.stringify(response)) },
function (response) { alert(JSON.stringify(response)) };
};
$(document).ready(function(){
$('#contenuto').on('click','.bt_loginFacebook',function(){
loginFacebook();
});
});
in PG build i see the plugin correctly loaded but when i try to execute the app on my android phone nothing happens when i click on button. i tried to execute in my browser and i receive the error "cordova is not defined
thx for the help this is my first post, i don't understand what is wrong
update
with your suggestion my jq.js now has this code:
document.addEventListener("deviceready", function(){
$('#contenuto').on('click','.bt_loginFacebook',function(){
loginFacebook();
});
});
but when i press the button nothing happens, i saw an error in my chrome console that says cordova is not defined
help pls
This is very common for person new to cordova/phonegap.
You are using a facebook plugin for phonegap. Phonegap REQUIRES that you wait until the deviceready event fires before you access any phonegap or 3rd-party plugin services. This blog post explains in more detail.
FYI – Cordova events must be run after deviceReady
http://www.raymondcamden.com/2015/07/15/fyi-cordova-events-must-be-run-after-deviceready