I want to load an external JavaScript file index.js in index.html within QWebEngineView.
qrc file:
<RCC>
<qresource prefix="/">
<file>index.html</file>
<file>index.js</file>
</qresource>
</RCC>
index.js and index.html file:
console.log('test');
<!DOCTYPE html>
<html lang="en">
<body>
<h1>Hello world!</h1>
<script src="index.js"></script>
</body>
</html>
I use ui->widget->load(QUrl("qrc:/index.html")); to load the html file, and run in debug mode. It works fine, I can see "Hello world!" and console message "test". When I run in release mode, I got a Resource :/index.js not found or is empty.
I can see some difference files in release build folder, like index_js.cpp which not generated in debug mode, it seems that qml engine load the js file. How to disable it and load js file in release mode properly?
My Qt Version: 5.12.7 MSVC2017 64bit.
Related
I have an simple Express application defining routes for an html file in my public folder. In this index.html file i have linked my css and js file which are in the same folder. When i use npm start it works without any problem but when i publish it on zeit-now i get error 404 for js file and "Refused to apply style from 'https://test.julienmerasli.now.sh/public/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled." for css file.
Here is my deployment : https://test.julienmerasli.now.sh/
Here is my project: https://gitlab.com/chaudoinblazin/test-zeit-now-css
Looking at your code - I think the problem is with the paths you used to reference the css and js files.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="public/style.css">
<script type="text/javascript" src="public/index.js"></script>
<title></title>
</head>
<body>
<button onclick="buttonClicked()">This is a button</button>
</body>
</html>
The files served from the public folder will be available from your root of the website so e.g. https://test.julienmerasli.now.sh. Right now though your html will look for the css and js files in https://test.julienmerasli.now.sh/public.
So inside the html you just have to remove the public part on the href and src paths and this should work.
Not sure what you're trying to build but if you just wanna serve some static or simple API files, you might not need Express. Check out this migration guide for a good intro.
I never really thought about it until I switched from webpack to brunch where I saw the following lines in index.html:
<script type="text/javascript">
require('main');
</script>
When you try to simply open up a local html page (even after everything's been built in webpack), it produces errors (SCRIPT5009: SCRIPT5009: 'require' is not defined) and doesn't render correctly, but when you open the page through a dev server it renders correctly.
Why are dev servers required for bundlers? What are the dev servers doing behind the scenes to allow the browser to properly render pages with bundles? Isn't the rendering capability built into the browser itself?
Originally I thought it was putting up a node server to help translate commands such as require(), but the above shows that the line was passed through to the browser. Why does the browser choke on that command when you just open the html file versus when it's delivered via a server?
On a side note everything works fine when the page is delivered via apache as well. If it is some sort of node translation, then how does apache not choke on it?
edit:
The files that show delivered are:
logo.png (just a vue logo)
app.js (the bundled javascript file)
the html file, which looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-webpack-brunch</title>
</head>
<body>
<div id="app"></div>
<script src="/app.js"></script>
<script type="text/javascript">
require('main');
</script>
</body>
</html>
Everything is delivered exactly like that, and that's the extent of the project. If the javascript bundle were including requirejs then it should also work if you just open the file locally as well
Edit 2:
typing require in the console produces the following:
(t,r){null==r&&(r="/");var i=l(t);if(o.call(n,i))return n[i].exports;if(o.call(e,i))return u(i,e[i]);throw new Error("Cannot find module '"+t+"' from '"+r+"'")}:
<script src="/app.js"></script>
You are loading /app.js which will define your require function.
The URL starts with a /.
If you load it from a webserver, the / refers to the root of the site.
If you load it from your local file system, then the / refers to the root of your filesystem (or disk if you are Windows). This will be the wrong place because webpack will not generate it there (you would not want c:\app.js created for every application you built with webpack).
The require keyword is giving errors because it's a made up way to require external files. If you used import, the standard native implementation, it would work out of the box on newer browsers. Bundlers aren't required.
Require came from https://requirejs.org/
They're looking for that word require and, essentially, injecting code at that source path into a built file. It'd be like if I made a injectFile keyword for my InjectFileJS project.
<script type="text/javascript">
injectFile('main');
</script>
That would produce the same error, injectFile is undefined. You would need to run my made up file loader on your web server to parse and transpile the files for that function to exist.
However, if you use import you can get away with not having a bundler as a requirement on new browsers: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
Issue updated. Please check the edit
I want to use the debugger included in Webstorm to run my project. I'm
using Angular2 and TypeScript. I need to place breakpoints into my typescript files.
Basically, my index.html just imports some .js files and starts my
app by calling a function named bootstrap defined in another .js file (transpiled from a .ts file !).
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/">
<meta charset="UTF-8">
<title></title>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="../node_modules/es6-shim/es6-shim.min.js"></script>
<script src="../node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="../node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="../node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<script src="../node_modules/rxjs/bundles/Rx.js"></script>
<script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="build/core/system.config.js"></script>
<script src="build/core/moduleLoader.js"></script>
<script src="build/core/bootstrap.js"></script>
<script src="../node_modules/angular2/bundles/router.dev.js"></script>
<script>
bootstrap();
</script>
</head>
<body>
<app-view>Loading...</app-view>
</body>
</html>
bootstrap is defined as follow :
const bootstrap:()=>Promise<void>= async function() {
await ModuleLoader.loadAll();
System.import('core/app').then(null, console.error.bind(console));
};
window.bootstrap = bootstrap;
When I run my index.html in debug mode, an error is thrown,
bootstrap() is not defined.
When I run the app inside a browser, it works well. Have I missed some configuration ?
I've installed the jetbrains plugin (I'm using chrome) and configured the port. I can see the "Loading..." on my browser.
EDIT
Maybe a usefull information :
I'm using node. Into my main server-side script, I set up express and do some configuration. When I'm trying to debugging, my server is listening but on another port (8080). The debugger uses the port 63343.
You can start a JavaScript debug session for any URL - you just need to specify it in the JavaScript run configuration. If you app is running on localhost:8080, then use that URL in the JavaScript debug configuration.
Another important point: make sure you generate source maps when compiling your TypeScript code.
The Dart app runs fine in Dartium, but I would like to convert it to JS.
C:\dart-sdk\bin\dart2js --out=test.js main.dart generates JS from:
import 'dart:html';
void main() {
querySelector('#myid').text = 'Wake up, sleepy head!';
}
Then I add it to the <head>:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<p id="myid">hello</p>
</body>
</html>
But when I run it in Firefox, it doesn't work. It shows only "Hello" on the page. What am I doing wrong?
dart2js is usually not the straight-forward way to generated JS from Dart.
Normally you just run pub build in your project directory.
Ensure you have your pubspec.yaml configured properly csp: true (for Chrome apps Using Polymer in a Dart Chrome App, Chrome App CSP violation after Dart/Polymer transform/compile to JavaScript)
Hi I am working on standalone java application running on some port number.
I am trying create UI with HTML where it includes some external js files.
I have included those files in header tag as below.
<script type="text/javascript" charset="utf-8" src="js/jquery.json-2.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
But it always gives the error message as "Filed to load resource:the server responded with status code of 404.
Any ideas?
Seems like a pathing issue to me.
What is the relative location of your "js" directory from the calling page in your file system?