I am displaying a webpage from a server in webview. However to handle some functionality I want to add 3-4 files from asset folder to the webpage.
How do you append these files to the webpage that also has some of its own javascript?
<head>
<script src='jquery.js'></script>
</head>
Paths that dont start with / are relative so try :
<script src='assets/jquery.js'></script>
this will work if your html files are in a directory / folder that contains an assets folder with the JavaScript library within that
if you want to specify an absolute path use
<script src='/assets/jquery.js'></script>
this will work if the assets folder is a sub folder of the document root directory
i added as you told but those javascript not working ,here you can see the html file- `
<!DOCTYPE HTML><html><head> <script
src='/assets/jquery.js'></script><script
src='/assets/rangy-core.js'></script><script
src='/assets/rangy-serializer.js'></script><script
src='/assets/android.selection.js'></script><title>Kendal Hunt -
Psychology - Brown CH, Foster JD, Gordon MS</title><meta
http-equiv="content-type" content="text/html; charset=utf-8" /><link
rel="stylesheet" type="text/css" href="style/style.css"
title="style" /><link rel="stylesheet" type="text/css"
href="style/brl.css" /><script
src="js/jquery-latest.js"></script></head>
`
Related
I am having a bit of an issue in vuejs.
The thing is that i am trying to load more than one template in my vue project. Each component has to load his own css files.
To do that, all i could think of is to put each template css in a folder inside the static folder.
this is the index html
<div id="app"></div>
and in each component i loaded the head tag with css from the static folder
<template>
<html>
<head>
<title> site </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1,maximum-scale=1">
<link rel="shortcut icon" href="static/search/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="static/search/favicon.ico">
<link rel="stylesheet" id="brk-direction-bootstrap" href="static/search/css/bootstrap.css">
<!-- etc etc -->
</head>
<body>
<!-- ... -->
</body>
</html>
</template>
And that's how i solved loading different css templates in one project.
But that made the page loading have an issue, it looks completely off before the css finish loading.
I ma not sure how i can fix! calling all the css files in the index.html does not work.
As #puddi says, use the <style> tags in your component. What would seem to suit your needs best would be to use scoped style, <style scoped> which means the css you include there only applies to that component, not globally.
Depending on how adventurous you want to get, you could build your project in Nuxt.js (a wrapper for vue) which allows you to define layouts that would do exactly what you're asking.
I am creating a nodeJs application in which I am serving html files on request. I have started working with Html recently. I want to create multiple html files but want to include the similar header.html in those all multiple html file. I have read different articles such as:
Make header and footer files to be included in multiple html pages. Also I have tried to use Html5 import statement but nothing is working. Is there any other way to do this with Html5 or with javascript or jquery. my code is:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){ $("head").load("header.html") });
</script>
</head>
<body>
<div id="frontpage"/>
<script src="./bundle.js" type="text/javascript"></script>
</body>
</html>
whereas my header.html is:
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/css/mycssfile.css"/>
<title>My application</title>
But it is not working! is there any way to make it working?
The error I am getting is :
GET http://localhost:3000/header.html 404 (Not Found)
My HTML is not connecting to my javascript. I have run it in debugger several times and no matter what I have tried my HTML has not connected to my js. I have done this small piece of coding a fair few times now and am stumped at why it is not working.
Here is where my HTML is supposed to connect to my javascript.
<head>
<meta charset="utf-8">
<title>One Down</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="termFourMajorProject.js"></script>
<link rel="stylesheet" type="text/css" href="term 4 major project.css">
<link rel="shortcut icon" href="two_decks.png"/>
</head>
Please, can you tell me why my HTML is not connect ing to my javascript? (ignore the jQuery document)
Make sure that your. js file is in the same directory where your html file is present. And also you should add html tag to your code
I want to link the css and javascript files to my asp.net form.
I saw diffrent ways to do that. But dont know the diffrence.
With /
<link type="text/css" rel="stylesheet" href="/Content/animate.css">
With ~/
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
With nothing
<link type="text/css" rel="stylesheet" href="Content/animate.css">
With ../
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
What is the correct way and what are the difference? Please explain also when to use what?
The correct way is "2", because you start addressing from root of project
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
With /
<link type="text/css" rel="stylesheet" href="/Content/animate.css">
This goes all the way to the root directory. If the file with that line is example.com/folder/anotherFolder/index.html, then that line of code will access example.com/Content/animate.css. It just goes to the very start.
With ~/
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
This goes almost to the root like the first example, but stops one folder short. If the file with that line is example.com/folder/anotherFolder/index.html, then that line of code will access example.com/folder/Content/animate.css.
With nothing
<link type="text/css" rel="stylesheet" href="Content/animate.css">
I think for the most part, you will want this one. It accesses files relative to the current one. If the file with that line is example.com/folder/anotherFolder/index.html, then that line of code will access example.com/folder/anotherFolder/Content/animate.css.
With ../
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
This one backs out just one folder/level. If the file with that line is example.com/folder/anotherFolder/index.html, then that line of code will access example.com/folder/Content/animate.css.
The difference is that if you site is http://example.com and you have an application http://exmaple.com/app1.
This means root of the site. So it will become: http://example.com/Content/animate.css
<link type="text/css" rel="stylesheet" href="/Content/animate.css">
The '~' means root of the application. so it will become: http://example.com/app1/Content/animate.css
<link type="text/css" rel="stylesheet" href="~/Content/animate.css">
This is realtive path so depending on where the file is, it will simply look for a Content folder in that same folder and then animate.css file. If you move the file where this is written to another folder, it will still look for a Content folder at that new location and then animate.css file.
<link type="text/css" rel="stylesheet" href="Content/animate.css">
This is saying go up one directory (from the file wherever this line of code is written) and then find Content folder and then animate.css file.
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
Each one has its place and use. Now that you know what they mean, you can choose which to use.
As a final note,
Write all the different ones in an html file.
Open Chrome debugger (or any browser debugger) and select the Network tab.
Access the html page form the browser
See how the browser interprets each path. You will see the browser making requests to each one using the complete URL.
You can use that technique anytime for any path to see what it gets resolved to.
<link type="text/css" rel="stylesheet" href="../Content/animate.css">
Use this when css file is inside a folder before Content
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>
^