Android WebView: How to access JS function from assets folder - javascript

I'm loading a local HTML file in my WebView and executing my JS-Function like so:
webview.evaluateJavascript("start();", null);
It works as long as I have the function declared in <script></script> tags in the HTML file.
...
<body>
<script type="text/javascript">
function start(){
}
</script>
</body>
...
But now I'm first using Webpack to bundle my Javascript code into a single JS file and store this in the assets folder of my app and load it like so:
<script type="text/javascript" src="file:///android_asset/js/bundle.js"></script>
The new bundle.js file contains the start function but now I can't call it, because it's not defined.
What I'm missing here?
EDIT: Ok my function is only accessible in the bundle.js. There are multiple ways to make it work, as I want:
Define global variable with webpack
I choose the following solution to make my function accessible in the global context:
window.start = function() {
}

Related

Access JSON file from src/* folder inside script tag of index.html

I am working on React Application and want to access a JSON file which is part of my src folder inside the index.html file. I have tried using the AJAX script however I can only access the files from the public folder.
The below code snippet works for the files inside the public folder
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
<script>
$(function() {
$.getJSON("./config.json", function (data) {
console.log("JSON Data => ", data)
});
});
</script>
Using the above approach, I cannot access the JSON files inside the ./src/config.json.

Adding require keyword breaks vanilla JavaScript function

I have an HTML file as follows:
<body onload="myFunction('test');"
<div id="test"></div>
<script src="script.js"></script>
</body>
And the JS script is as follows:
function myFunction(id) {
const div = document.getElementById(id);
var html = "<p>test</p>";
div.innerHTML = html;
}
This works and the word "test" is displayed when I load my HTML file in my browser running http-server from npm
But when I add the following line with require for fs to my JS script, the function gives me the following error in VS Code: 'projectCarousel' is declared but its value is never read.ts(6133), and "test" ceases to get displayed when I load my HTML file in my browser:
const fs = require('fs');
Why is adding a line with require stopping my JS script from being executed when I load my HTML file in my browser?
Screenshots included below:
Before adding require
After adding require
You can't use require in the context of the browser, accessing the file system can only be done server side using node.js. Using express to serve your page could be an option.

Laravel 5 mix app.js file creation

I created a custom JavaScript file with a simple function:
function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
Then I added this file to the webpack.mix.js config:
mix.js(['resources/assets/js/app.js', 'resources/assets/js/xyz.js'], 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
and run: npm run dev. npm compiled my script and the picture function was included in the app.js file. Now I'd like to use the "picture" function in a blade.php but whenever I call it I get "Uncaught ReferenceError: picture is not defined". I checked the page source and found that the picture function is wrapped with a different function
(function(module, exports) {
function picture(soemthing) {
document.getElementById('idXYZ').src = "example.com";
}
})
Should I add some additional namespace before calling the picture function from blade.php or I have something wrong with mix configuration?
The functions and classes are not exposed to the public, so all JavaScript logic should be written in the JS files.
If you insist on writing JavaScript logic in the blade file, you could attach the function to the window object.
window.picture = function picture(soemthing){
document.getElementById('idXYZ').src = "example.com";
}
...
window.picture()

Requirejs, basic information

I'm learning Requirejs and I started with two simple .html pages: index.html and second.html.
On the index.html I worte:
<script data-main="assets/js/app.min" src="js/vendor/require.js"></script>
The app.min.js file look like this:
requirejs.config({
baseUrl: 'js/vendor',
paths: {
app: '../app',
jquery: 'jquery-1.10.1.min'
}
});
requirejs(["app/main"]);
My app/main.js file has just a jQuery alert:
define(['jquery'], function($) {
$(function() {
alert('Hello World');
});
});
It works fine!
Now I'm worried just about one thing... What about if I need to load the app/main globally for all my pages and then another file like app/second that run only on second.html page?
Probably I'm missing something about Requirejs... I don't thinks that I need to load everything on the app.min.js file like did for the app/main.
I understand that I can define modules on separate js files but then how can I manage different files for different pages without loading everything in just one file? Probably I'm wrong, I hope you can open the light in my brain for that.
Thanks
I understand that a page might need its own code in addition to what is in app.min. You could do something like this:
<script data-main="assets/js/app.min" src="js/vendor/require.js"></script>
<script>
// You can call the config function as many times as you need to add new configuration.
requirejs.config({
// Presumably, baseUrl does not need to be changed.
// baseUrl: 'js/vendor',
paths: {
// additional paths you may need
}
});
// This loads the code proper to this page.
requirejs(["app/second"]);
</script>
If app/second depends on app/main make sure to have that dependency listed in app/second's define call.
Take a look at this example: https://github.com/requirejs/example-multipage. The example demonstrates how you can create page1.js and page2.js and in those files load the common stuff + page specific things. That's one of several ways to do it.
Another way to do which is what I often use is putting something like this in all your pages:
<script src="require.js"></script> <!-- just require -->
<script src="app.min.js"></script> <!-- your config and also loading the main module -->
and then on second.html, you would also add this
<script>require(["app/second"])</script>
You can use this setup for development, and for production you can replace the first 2 lines with just <script src="optimized-bundle.js"></script>. The optimized-bundle.js could include require.js + config + app/main + app/second. Or if you want to load app/second only on the second.html in production to make your main script smaller, you can have require.js + config + app/main in the primary bundle and optimize app/second into a separate bundle - the html would stay the same in both cases.
Hope this helps.

JS Lint for Visual Studio 2010 problems

I have a file with a JS object:
function Monitor() {
var self = this;
...
And I have a file that creates an instance of this and uses it.
self.monitor = new Monitor();
The files are included in a cshtml file in order:
<script type="text/javascript" src="#Url.Content("~/Scripts/Shared/Monitor.js")"> </script>
<script type="text/javascript" src="#Url.Content("~/Scripts/Views/NewMonitor_Index.js")"></script>
The problem is I get this error:
Warning 1 JS Hint: 'Monitor' is not defined.
How do I configure it so that it finds the monitor object?
I don't think if there is an automatic way. Although JSHint could detect other script tags, it is probably more difficult to get the actual path to the file.
Anyways, if I know that a certain symbol is definitely available in the context, I add a
/*global Monitor*/
at the beginning of the script.
If a symbol will be available in every script, I add it to my .jshintrc file in the directory, like
{
"predef": [
"Monitor"
]
}
But I don't know if/how this works on Windows.

Categories