Android WebView: Using relative paths when loading javascript from assets - javascript

I was able to create an Android hello world app that loads html file from assets folder using WebView.loadDataWithBaseURL method:
webView.loadDataWithBaseURL("file:///android_asset/appcode/", html, "text/html", "UTF-8", null);
My html looks somewhat like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script src="/js/lib/jquery-1.11.0.js"></script> <!-- This script is not being loaded -->
<script src="helloWorld.js"></script> <!-- This script is being loaded -->
</head>
<body>
<div id="placeholder"></div>
</body>
</html>
The problem is the following: jquery-1.11.0.js is not being loaded while helloWorld.js file loads successfully. I verified that the file exists under relative path.
If I move jquery-1.11.0.js to the html file location (to the same place where helloWorld.js is located), it fixes the problem. But I want to use relative paths for loading scripts. Thanks in advance.
UPDATE:
Moving all js files under /assets/appcode/ is not an option,
because I am planning to reuse html files that are relying on these
relative paths
Using CDN links will not work, because I'm
planning to load my own scripts that are not available on the web
If i use "file:///android_asset/appcode/js/lib/jquery-1.11.0.js" instead of "/js/lib/jquery-1.11.0.js" it also works. But this is absolute path, when I want to use relative.

I'd suggest you to use CDN instead:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="helloWorld.js"></script>

Absolute paths sometimes don't work in the WebView such as JavaScript file.
I suggest use relative path with dot(.) followed with path
<script src="./js/lib/jquery-1.11.0.js"></script>
^

Related

How to bundle html, js and css in one .js file?

I have simple app with index.html, style.css and app.js and
i need to built a myBundle.js for easy implemantation in other site like:
<script type="text/javascript" src="myBundle.js"></script>
is that posible ?
That's not a good idea, but maybe you can create elements in js and then use append() method to put your HTML / CSS
You can bundle it all inside the HTML file if you'd like. That would be the easiest way to make it portable
So for example:
yourfile.html
<html>
<head>
<style type="text/css">
/* your CSS */
</style>
<script type="text/js">
// your JS code
</script>
</head>
<body></body>
</html>
Then you can move the file anywhere and it will work independently.
As mentioned below this is not a clean way to code but it will work and is useful in some instances

How to link mulitple css&js files in our project without explicity mentioning it in every other file

My project is on angularjs and php. I have been placed in a project that has been previously done by a group of 3 and the documentation was not clear. What I observe from that code is that whenever I declare any bootstrap class or id
without explicitly linking it in that html file
Eg:
<html>
<head>
<title>some title</title>
<!-- No CSS file linked here -->
</head>
<body>
<button class="btn btn-primary">Here</button>
</body>
For above document bootstrap classes "btn btn-primary" are applied. However, they have included that bootstrap file in a folder named "css" but DID NOT include/import that in that html file.
How does my html file know where to search for suitable css file?
Does it search all the available css files?
Is that a good practice or do I need to change that?
when I go to inspect -> sources
<html lang="en" ng-app="quiz">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.2.1.slim.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="script/angular.min.js"></script>
<script src="script/angular-route.min.js"></script>
<script src="app.js"></script>
<script src="controllers/displayController.js"></script>
<script src="controllers/quizController.js"></script>
<script src="controllers/welcomeController.js"></script>
<script src="controllers/csvController.js"></script>
<script src="controllers/loginController.js"></script>
<script src="controllers/adminController.js"></script>
<style>
body
{
background-color: bisque;
background-repeat: no-repeat;
background-size: cover;
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div ng-view>
</div>
</body>
</html>
This is the default html for every page, now if I add anyother .js(In js file) or .css( In css file) it doesn't show up here or adds in my html. This came to notice when I added HTML2CANVAS file for one particular html file and it is saying "html2canvas is not defined" in console
Edit:
Thanks for the help JkAlombro, I found that this project uses angular router($routeprovider) So I traced default html file(index.html in this case) and added my js scripts and css links. To know whether your project uses $routeprovider, goto app.js file and check for app.config(function($routeProvider). Just so it helps anyone.
The reason why you can't see any css/js imports to your other HTML files is because that app using an angular router (most probably $routeProvider) and I can confirm that in your index html file.
See that <div ng-view> in your index? That's where all of your other html files are being displayed depending on what route is being pointed. Other proofs that you are using angular router is this script
<script src="script/angular-route.min.js"></script>
Why you don't have to import your css and js in the rest of your html file?
Because everything is being rendered to your index.html (or whatever your default html file is named) so you only need to include all of your scripts and css links there and it will be used all over your app. That's how a Single Page Application works (at least for AngularJS).
If you wanna trace where the router is being configured, most probably you can find it in your app.js or displayController.js.
Make a common header and footer file. Include all your css file in header and javaScript file in footer.
eg:
header.file
- Only push your content here -
footer.file
This way the css and js will be common for every other file.

How to Assemble HTML,CSS and JS with EachOther

http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/
In the "See in Action" section you can see the whole code is separated into 3 parts (HTML,CSS and JS). I'm new in working with asp.net. I know I can put css and js codes inside different files and have a web form which contains html and asp.net tags, But really I do not know how I can assemble the codes are shown in above page to get the correct output.
Any help please?
Simple straightforward example for a way they can all come together:
<html>
<head>
<style>
/* PUT YOUR CSS HERE */
</style>
</head>
<body>
<!-- PUT YOUR HTML HERE -->
<script>
// PUT YOUR JS HERE
</script>
</body>
</html>
This way they all come together at one page, and can affect each other (Css can affect HTML, and JS can affect html & style (which means, it can also change the Css).
Note - the only one you really need in an HTML page is the HTML itself. you could add links to other resources you have written in other files instead of copypasting scripts if you already have the files pre-made, which is probably the better, more orginised approach to this - however the one I've written is more easy to understand if you're a novice, and is probably the best if it's your first time trying all these together. Good luck, new web dev, may the force be with you. (:
Here is the file structure I usually use:
/
|_index.html
|
|_assets/
|_css/
| |_style.css
|
|_ js/
|_script.js
And my index.html generally looks like this:
<!doctype html>
<html>
<head>
<title>Test page</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<h1>Hello world!</h1>
<script src="assets/js/script.js"></script>
</body>
</html>
Why is the CSS linked in the head tag?
Because I want the CSS to be loaded as soon as it can, so the user doesn't see an unstyled version of my page when it loads.
Why is the script called at the bottom of the page?
Because that way, I'm sure the whole document is loaded and parsed when I execute my script.

Where in the HTML file should Jquery and Bootstrap be placed?

Curious at to where I place my Jquery and Bootstrap files. They recommend that you always place at the bottom for performance purposes yet when I check sites that use Jquery/Bootstrap the majority of users always place them at the top. Also should I be loading my own JavaScript files before or after the bootstrap/Jquery files?
I take it that I load the my own css file first before the bootstrap file if I want to override some of their styling, is this correct and does the same apply to javascript files?
Typically stylesheets in the head and scripts before the closing </body> tag:
<html>
<head>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="your-other-styles.css">
</head>
<body>
<!-- content -->
<script src="jquery.js"></script>
<script src="bootstrap.js"></script>
<script src="your-other-scripts.js"></script>
</body>
</html>
You'll want files from vendors such as jQuery and Bootstrap to be included before yours. This means that:
CSS: You can override their styles with your own*
Scripts: You have access to any objects added to the global scope such as window (jQuery adds $,
for example)
However, if you require a script to be available before your content loads (such as Modernizr), then putting it in the <head> ensures it's ready before any of your content.
Including scripts at the bottom ensures that the actual page content is loaded first; when the scripts are finally downloaded the content (DOM) will be ready for your scripts to manipulate.
* assuming your selector specificity is at least equal to those in your vendor CSS
Bottom is best to place all your script references at the end of the page before </body>.It should look like below in normal page.
<html>
<head>
<link href="path/to/file.css" rel="stylesheet" type="text/css">
</head>
<body>
<script src="path/to/file.js" type="text/javascript"></script>
</body>
</html>
Although in some cases it may be necessary to load JavaScript before page load if any of your function need to access JavaScript before Page Load.Specially if you are working with JQuery UI And Bootstrap.
You can decorate your script tags with the defer attribute so that the browser knows to download your scripts after the HTML has been downloaded:
<script src="Jquery.js" type="text/javascript" defer="defer"></script>
or
<script src="demo_async.js" async></script>
When present, it specifies that the script will be executed asynchronously as soon as it is available.
http://www.w3schools.com/tags/att_script_async.asp
If you need script to access in page for use then script need to available before using it. Although it need to be sure the browser support defer="defer". Async is supported by all major browsers.
Javascript by default block any other parallel downloads. So if you have many tags in the head, calling on multiple external scripts will block the HTML from loading, thus greeting the user with a blank white screen, because no other content on your page will load until the java script files have completely loaded. Another advantage to load script in bottom is that any error caused by external script will not stop the page from Loading to browser.
Style css need to present in top <Head> to access in page.
It really depends on what you want to achieve, but generally JS is placed at the bottom and CSS in your head section. Make sure that jquery library loads before Bootstrap's JS library and your custom css file loads after Bootstrap's CSS, so it will override. You can load Bootstrap's CSS from their CDN (or others, like cloudflare - for example http://cdnjs.com/libraries).
Make sure you minify all that & activate compression and you shouldn't experience any performance issues.
Advanced techniques imply using the most important part of your CSS in your head area, then send the rest of the CSS in the bottom area. Or have your whole static content (CSS + JS) hosted on a CDN.

Views in play-framework 2.1 not handling javascript

I've come into a wall : Basically, Javascript doesn't seem to be working in my play pages.
So I have a view main.scala.html as a template for other views.
This file looks like that :
#(page : String, title: String)(content: Html)
<!DOCTYPE html>
<html lang="en">
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/bootstrap.min.css")">
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="#routes.Assets.at("javascripts/bootstrap.min.js")" type="text/javascript"></script>
</head>
<body>
<!--some stuff-->
#content
</body>
</html>
So I tried putting a simple thing in the body of the views.
-First in the main.scala.html template
-Then in a view that used this template
-Finally in a thing.html, with no links what so ever with Play! Framework, that I opened in my browser:
<html lang="en">
<head>
<title>title</title>
</head>
<body>
truc
</body>
Only the third option return the wanted result : A popup with thing in it.
My question is : Why is my javascript not handled by play? Do I have to "import" some global javascript feature in order to use it?
Thanks for your help, if you need more info, tell me.
Play produces normal HTML code - browser doesn't care what kind of soft produced it, so I suspect, that you have some mistake in path to some JS file in your head, so it avoids running other scripts, Use some kind of inspector in your browser, to validate, that all resources are downloaded properly. Also check JS console, most probably there are some errors shown.
On the other hand, placing simple JS directly in the views most often works correctly, however, keep in mind that, view's renderer may consider some JS typical syntax as a Play's tag, or something, therefore you need to control still if after rendering your JS is not 'damaged' by this process. For views where you want to use more advanced JS it's absolutely safer (and more comfortable) to include JS from static file(s) the same way as you are using for jquery.js or bootstrap.js
May be you forgot to write
#main(title = "my title") {
<h1>Other html<h1>
<p>My js here</p>
truc
}
P.S:
If it is helpfull don't forget that you shouldn't white head , html and body tags any more, it is included already. Otherwise you will have not valid html, and it will render bad in all browsers

Categories