Im trying to create code editor based on JavaFX WebView. I'm loading jquery to my .html file loaded by WebView like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Code editor</title>
<link type="text/css" rel="stylesheet" href="styles.css"/>
<script type="text/javascript" src="../libs/jquery-3.1.1.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<div id="content">
Loading...
</div>
</body>
</html>
So, this file is loaded to WebView, but jquery is not loaded! script.js loaded but jquery-3.1.1.js is not! I'm suggesting the problem lying somewhere in file system. My files is stored as jar-file resources, so my index.html path is like:
jar:file:/D:/Pe3oHaHc/YandexDisk/Projects/Mira/Mira/build/libs/Mira-0.0.1.jar!/windows/html/editor/scripts.js
I get it by this code in my scripts.js:
var scripts = document.getElementsByTagName("script");
alert(scripts[1].src);
So, scripts.js loaded, but jquery-3.1.1.js is not cause it is in upper folder! And i cannot use $ in scripts.js.
But if i put my jquery-3.1.1.js in the same folder as a index.html it loaded well. I guess its because the strange path inside jar file. Can you help me? I'm realy don't want to place jquery file into same folder to index.html.
The jar protocol does not allow for .. relative location specifiers.
A request to load a relative url from a resource loaded from a jar will use the same protocol as was used to load the original resource. In this case, because the original resource is loaded from a jar, the jar: protocol is used. You can find the definition of the jar protocol in the JarURLConnection class documentation.
You could use a different protocol to load the resources, e.g. http: or file:, in which case .. will work as those protocols understand ... To do so, you would need to extract the relevant resources from the jar file and host them on a web server or local file system. Which is probably not what you want.
A simpler solution is to not use .. in your html files, either by placing the items under a well-known root directory within the jar and using an absolute reference (e.g. /libs/jquery-3.1.1.js), or including the items in the same folder as the html or a subfolder of it (e.g. jquery-3.1.1.js or libs/jquery-3.1.1.js).
I know this is not the answer you wanted, but I don't have an exact solution to do precisely what you want.
Related question:
How to reach css and image files from the html page loaded by javafx.scene.web.WebEngine#loadContent?
Related
I am a complete newbie to this and I'm using Eclipse Oxygen platform to run my application and Apache Tomcat 8.0.36 server.
Firstly, I created a simple HTML page first.html in WEB-INF folder inside my project.
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1>First Page</h1>
<a href="MiniPro/WebContent/WEB-INF/NewFile.html" >Press Here</a>
</body>
</html>
When I run this code, it directs to this link http://localhost:8081/MiniPro/WEB-INF/first.html
and shows an HTTP status 404 error.
Even when I tried this
http://localhost:8081/MiniPro/WebContent/WEB-INF/first.html
it shows the same error.
When I changed the location of first.html page into WebContent folder and run it is showing the result.
Can someone tell why it was not working when it is placed inside WEB-INF folder.
A special directory exists within the application hierarchy named
WEB-INF. This directory contains all things related to the application
that aren’t in the document root of the application. The WEB-INF node
is not part of the public document tree of the application. No file
contained in the WEB-INF directory may be served directly to a client
by the container. However, the contents of the WEB-INF directory are
visible to servlet code using the getResource and getResourceAsStream
method calls on the ServletContext, and may be exposed using the
RequestDispatcher calls.
If you want to keep your file in WEB-INF - you need a Servlet to manage it.
Just a general example of how to get HTML file with servlet:
RequestDispatcher view = request.getRequestDispatcher("mypage.html");
view.forward(request, response);
Otherwise, move your file outside WEB-INF and try to get it with http://localhost:8081/MiniPro/first.html
You May try the ~/<path here >/<file>
~ this will help you point the Home path from you localhost
You are using the path like
MiniPro/WebContent/WEB-INF/NewFile.html
above that path has been located like
http://localhost:8081/MiniPro/WebContent/WEB-INF/first.html
so you can use instead of http://localhost:8081 use the ~
~/MiniPro/WebContent/WEB-INF/NewFile.html
the WEB-INF directory is special in a web project. It is designed that not allow direct visit for outside, but you can visit it with your servlet or jsp code.
I want to connect my .html to .js. I'm trying to run this simple program but it's not working. Below is the screenshot of my file path and files I'm working with.
Here's map.html:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script type="javascript" src="map.js"></script>
</html>
Here's map.js:
document.write("testing");
The problem is below. How can I render the .js file along with the .html file?
Here's views.py:
def map(request):
return render(request, 'personal/map.html')
A common CMS convention is to save JavaScript files in a static folder.
You save anything that you don't want your template engine messing with there: images, javascript, css, etc.
It looks like you may need to save map.js at this path:
mysite/personal/static/personal/js/map.js
After that, you'll need to update you script link in your HTML to something like:
<script src="static/js/map.js">
The src path here isn't relative to where you store the file on your computer, but to the URI that your web server associates with it.
Depending on how you've set things up, you'll need some portion of the new path.
Django has a few ways of linking to static resources, but I'm not familiar enough with the platform to tell you which option you should use.
I have a weird implementation. I have a website built in PHP (http://phpsite.com) and it has a template with a header and footer and sidebar etc with a content area where I place my compiled angular2 app files (hosted at http://awss3bucket.com). We are hosting the angular2 app in a separate S3 bucket and are loading the JavaScript files on http://phpsite.com.
Essentially the php file looks like this:
<html><head></head>
<body>
<?php include "../header.php";
include "../sidebar.php";
<app-root>Loading...</app-root>
<script type="text/javascript" src="https://awss3bucket.com/inline.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/polyfills.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/styles.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/vendor.bundle.js"></script>
<script type="text/javascript" src="https://awss3bucket.com/main.bundle.js"></script></body></html>
When I tried this implementation with the bundled angular files on the same filesystem as the phpsite.com website, it works perfectly fine. But when I try to load them from the S3 bucket, then the relative links that are used in the template file and css files break because they get generated as relative urls and the assets are not on the original.
So my question is, is there a way to change where each component's relative url points to? I can't set a base url because then it'll mess up the assets that are already existing on phpsite.com. For the time being we are using iframe but that is not ideal.
Thanks!
I'm using codecademy to teach myself to code and am trying to load a JS file in an HTML doc. Obviously I cannot find info in google searches to help me understand what I'm doing wrong. This is my current HTML to have the JS file load. Can anyone help me understand what I'm doing wrong so I can have the .js file run when this the HTML file loads? According to the standards at codecademy, the JS file itself is written properly.
<body>
<h4 id="header">...Games...</h4>
<h2 id="list">pick from our unique selection of brand new games...</h2>
<script src="Cards.js"></script>
</body>
That should load fine, as along as your index.html and Cards.js files are in the same folder. If you put your Cards.js file in a /js/ folder, you will need to add /js/Cards.js to your path.
As a side note, I recommend downloading Firefox and the Web Developer and Firebug addons. It will show you if your files are loading and if they're generating any errors, and where the errors are located in the file.
Your script tag is supposed to be in the part of your html document. Make shure the file.js is in the same folder as your file.html or include the folder in the src-attribute as mentioned above.
Your code should loke like this, if you want your script to affect the whole page:
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<script type="text/javascript" src="file.js"></script>
</head>
<body>
#Your page tags
</body>
</html>
Hope this solved your problem! :-)
The html text you posted above should have a name (index.html or games.html) make sure the file type is .html
Make a folder on your computer, give it a name and put your saved html file in that folder. That folder is now your root or directory folder.
Add the javascript file "Cards.js" to the folder next to your html file.
In your text editor open those two files (index.html, Cards.js).
Run the html file in a browser, the "Cards.js" should load. Good luck, hope this helps.
I have an html page which references a number of local script files, and in turn those script files reference other local resources. By local I mean local to the html file.
Is it possible to serve such a web page using a node.js server approach? So far as I've been able to work out so far, the node.js server can return html content, but when that is displayed in the user's browser, I can't easily see how it would be able to reference the various scripts, because the html isn't being served from a normal folder on the server, with relative access to the folders and resources around it.
Is there any way of doing this, or is it mad to even contemplate such an approach? Better just to stick the html and related resources on a standard server and be done with it?
EDIT: I should explain that the motivation for serving the html from node.js is that I'm already serving images from the node.js server, where those images are generated using the same scripts that the html will be using. So there are two ways for the user to get the same content: as a png file or as a web page, and in both methods the work is done by the same core scripts... one has an html front end and the other has a node.js front end. So it would be nice to be able to keep all the code in a single location, rather than having to duplicate stuff and have it in two places, and have to remember to update the code in the secondary location when I update it in the primary location.
EDIT to add folder structure to help debug this (see comments below):
mypage.html
myLibFile.js
/lib/*.js (various js resources including jquery)
/lib/modules/*.js (various js resources)
/lib/fonts/* (various resources)
/themes/*.js (various js resources)
In mypage.html I have:
<script type="text/javascript" src="/lib/jquery.1.9.1.min.js"></script>
<script type="text/javascript" src="/lib/libFile.js"></script>
<script type="text/javascript" src="/lib/modules/modFile.js"></script>
<link href="/lib/fonts/awesomefont.css" rel="stylesheet">
<script type="text/javascript" src="/myLibFile.js"></script>
<script type="text/javascript">
$(function () { // On DOM ready...
// ... code ...
});
</script>
and in my node.js I have attempted to set up express as follows:
self.app.use(express.static(__dirname));
self.app.use('/lib', express.static(__dirname + '/lib'));
self.app.use('/themes', express.static(__dirname + '/themes'));
Of course your relative paths will work when using your own custom built nodejs server, which can serve files, .html .css .js and such.
I assume you have some sort of public folder from where you serve your assets. If you don't use any special routing magic, and just reffer to structure of your public folder, then relative paths in your HTML, will work.
<link rel="stylesheet" href="styles/main.css">
Code above could load something like: public/styles/main.css