This is such a wierd problem. I have the following extremly simple HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery.js" />
</head>
<body>
test
</body>
</html>
If I run this page in a web browser, I get nothing at all, just an empty page. If I remove the script reference line entirely, then I get a blank page that displays "test", like it should. This tells me that there is some issue in the jquery.js file, but I have tried 3 different versions of jquery and the one I am using is the latest from the jquery.com website. For the life of me, I can't figure out what I'm doing wrong. I know it will turn out to be simple though.
script tags cannot be self-closing. You need the closing </script> tag:
<script type="text/javascript" src="jquery.js"></script>
Not including the closing tag means the whole content up to and including </html> is treated as the body of the script element. Because the document is then incomplete, your browser closes the script, head and html elements and inserts an empty body element.
you need to close your script tag otherwise it thinks everything after is javascript to be executed...
<script type="text/javascript" src="jquery.js"></script>
The <script> tag is not self-closing, so you'll need a separate </script>:
<script type="text/javascript" src="jquery.js"></script>
See Why don't self-closing script tags work?
You're confusing HTML and XHTML.
In HTML, the script tag is not self closing, so you must write <script src="jquery.js"></script>.
In XHTML, you must set your XML namespace(<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">) and send the document with the correct mime type.
Related
I am using a local HTML file with link to an external script (located in the same directory) that worked when in the file, but externally doesn't. Neither Firefox nor Chrome. Code:
<html>
<head>
<script type="text/javascript" src="docket.js"> </script>
</head>
<body onload="doFunction()"> ...
The script is in a .js file, which has (simplified):
function doFunction() ....
For one, you shouldn't include the script tags in your external js file.
Also try to move the script line at the bottom before the closing body tag.
If after removing, it still doesn't work, you should open the developer tools to get clue of what is going on.
index.html:
<!DOCTYPE html>
<head>
...
</head>
<body onload="doFunction()">
...
<script type="text/javascript" src="docket.js"></script>
</body>
</html>
docket.js:
function doFunction() {
alert("hello...");
}
Note: no script tags
As per w3school - https://www.w3schools.com/tags/tag_script.asp
The external script file cannot contain the tag.
The syntax for script tag is -
<script src="URL">
Where your URL is -
1. An absolute URL - points to another web site (like src="http://www.example.com/example.js") OR
2. A relative URL - points to a file within a web site (like src="/scripts/example.js")
Note: with HTML5, type attribute for script tag is optional.
I'd suggest to add a noscript tag just to make sure you have JS enabled in your browser.
<noscript>Your browser does not support JavaScript!</noscript>
I want to put a minified java script contents in tags directly in HTML page. i have html page like:
<html>
<head>
<script src="jquery.js"></script>
<script src="iemagic.js"></script>
<script src="shim.js"></script>
<script src="jszip.js"></script>
<script src="xlsx.js"></script>
</head>
</html>
I have minified all the javascript contents and put it in a single file called "all.js" and the html works fine, now it looks like :
<html>
<head>
<script src="all.js"></script>
</head>
</html>
I want to include all the content of "all.js" in to HTML directly in "script" tag. I tried with that but no luck, when i open html file in browser it show all the java script content which i have copied in "script" tag.
Is there any other way for this ?
Thank you all for helping me. i have found the solution for this. * added all the "js" files in different "script" tag tested working fine but some of the javascript lines was visible in the browswer. * The problem was "iemagic.js" was having the comments which are not proper and was creating the problem. * I have removed those commented lines and is working find now. without having any "js" file and only one HTML. Thank you All for your help and valuable time.
You can use gulp or jscompress
This question already has answers here:
Where should I put <script> tags in HTML markup?
(21 answers)
Closed 2 years ago.
I understand inline javascripts scattered through html code like the following example is bad
<html>
<head>
</head>
<body>
<p> Foo <script></script></p>
</body>
</html>
However, after coding for a while, understanding that loading Javascripts at the end of the document is the best way to go. I do see a lot of the sites that conform to loading scripts at the end of their document, do so in the following manner :
<html>
<head>
</head>
<body>
<p> Foo </p>
<script></script>
</body>
</html>
What is not made clear, is why not :
<html>
<head>
</head>
<body>
<p> Foo </p>
</body>
<script></script>
</html>
.. as this is outside the body tag which means that the body (in theory) can process faster and still load your scripts before finalizing on </html>.
Or even this :
<html>
<head>
</head>
<body>
<p> Foo </p>
</body>
</html>
<script></script>
Each variation will have (in theory) different performance results, and/or may break functionality in the page depending on the script contents of course.
Of the above formats, which one is the ideal place to load javascripts that would have the highest performance gain without breaking html ?
The best place at the end of the body tag, like
<html>
<head>
</head>
<body>
some html body tags
.
.
.
<script> external or inline </script>
</body>
</html>
If you do like so, then the html will load quicker and main pros is that all your ids and classes will get assigned otherwise sometime if you put script above html, then there might be a chance that you try to get an element by id that is not yet assigned in DOM
[UPDATE]
Here is an example code that Bootstrap is using in their own website: http://getbootstrap.com/getting-started/
you can find this code under Basic template Heading:
<!DOCTYPE html>
<html lang="en">
<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 -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
As noted here, the script tag won't validate outside of the body or head tags. However, you want to place it as far down as possible, so that the rest of the page loads first, to avoid errors. This leaves us with the place furthest down, but inside the body and head tags: just before the closing body tag.
<html>
<head>
</head>
<body>
<p> Foo </p>
<script></script>
</body>
</html>
If you know how the browsers work it will be easy to know where to put it.
First of all it's invalid to include your script after the body or the html element. Only comments and the closing tag for html are allowed after the body. Some browser will do recovery but you shouldn't depend on that.
You may include it any where in the body or the head but you should know that script take the browser attention may be for while and I will stop rendering the dom. That's very bad for user experience so the best place to include it just at the end of the body element.
Like in the example :
<html>
<head>
</head>
<body>
<p> Foo </p>
<!-- ... -->
<script></script>
</body>
</html>
One more thing if you include the script at the top of the page and that script will manipulate the dom that may cause an error if the dom isn't ready yet. The script searching for element which is not exist yet. And it will be very confusing when it runs at time and it doesn't run in another time. You may check the answers for similar questions here and here
How browsers work: As you can see from here, most of the browsers parsing the html elements top to bottom in elements tree hieararchy.
So, when you put a script just before </body> tag, make sures that most of the elements has been loaded or at least parsed. Or, you just need to wait for document.readyState.
Also, by putting your script below </body> tag is semantically not good. But, you can do it and it won't make a difference for the performance.
Important thing to note is the following:
If you put the script in the head tag HTML page rendering is blocked until the script is downloaded.
The more scripts you will put there the slower your page will load.
That’s why an advanced approach is to put the scripts at the bottom of the BODY, and in this case the user can start interacting with a page before the Javascript has Loaded.
You will put the scripts in HEAD only if they MUST be available before the page is shown.
Best way to load your java-script at the end of body tag, but in some case when you use third party script, it need be load before control initialize.
<html>
<head>
</head>
<body>
...........
<script></script>
</body>
</html>
JavaScript is a render blocking resource. So when browser is parsing HTML document and encounters script in between, the control is passed to js engine. Which runs the script and returns the control to browser again.
<html>
<head>
<script src="/main.js" />
</head>
<body>
<script>
//some inline script
</script>
</body>
</html>
So when broswer encounters the script tag in header, it passes the control to js engine. Now beacuse the script is being loaded from network, js engine will wait for script to load. After that it will be executed. Then document parsing will resume. (Inline script in head would have worked faster as network delay would be avoided)
Same goes for inline script. Situation gets complex if CSS is also present along with javascript. If a CSS is also being loaded from network in the head, js engines will wait for it too. So there are 2 dependencies now.
So it is best to add js at the bottom and CSS at top generally (to avoid Flash of Unstyled Content).
A good read for the same is present here :
Critical Rendering Path
I have create a external script call script.js save in js folder. However i don't know why it is not working. Therefore, I have tried put the into the html file and it work fine. So I think it is the problem of missing something in or i don't know.
It is my html code
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="js/script.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<button class="button">show</button>
<p>yo</p>
</body>
JQuery
$(".button").click(function(){
$("p").toggle();
});
Ensure jquery is loaded first:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
I'd also move this to just before the closing </body> tag in your HTML.
And then check where the JS folder is relative to the HTML file you've written. Currently, the folder would need to be at the same level in the directory structure as the HTML file.
Inside your script, use window.onload. The script might be firing before the DOM has actually finished loading.
You might also want to put jQuery on top so that it finishes loading before any possible jQuery code in your script fires.
Try loading JS in the footer.
You need the elements to be present in DOM before you can select them.
Moreover including external js files at the bottom of your page, gives priority of your HTTP requests to the visual display that will be presented to the client instead of to the logic of interaction or dynamics;
this is the usual behavior you'd want.
If you are using jquery in your JavaScript code please put them in this order
<!DOCTYPE html>
<html>
<head>
<title>...........</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="js/script.js"></script>
</head>
If that is not the case can you post the error in the console (using chrome press f12 to see the errors in the console)
Other thing you can check, the js folder is in same directory where your html page is?
let us know
I'm very new to html and trying to make a website. So far, I've got an html file that has the header for my site and I would like to use it in all the pages I create for the site using jQuery's load function.
So basically what I want to do is load Header.html into Page.html.
This is the code in Page.html:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#Header").load("Header.html");
});
</script>
</head>
<body>
Hi
<div id="Header"></div>
</body>
</html>
Header.html looks something like this:
<div id="Header_Name">Adabelle Combrink</div>
<div id="Header_GameProgrammer">Game Programmer</div>
The only thing that comes up on the screen is "Hi" at the moment.
Looks good, apart from the backslashes in the src attributes should be forward slashes.
Is there any particular error you are getting?
Also, as has been pointed out, PHP would be better suited to this job.
<?php include 'header.php'; ?>
Aside from the accessibility question, there might also be a negative SEO impact.
Edit:
Assuming your path to jQuery is correct, then the code you posted should work (it does for me).
Things to try / be sure of:
You are running this on a server (i.e. not just opening the file in your browser, as this will fall foul of the same origin policy). Check that the address in your address bar doesn't start with file://
Make sure that the path to the jQuery library is correct
Make sure that Page.html and Header.html are in the same folder
Check your broswer's error console. Instructions.
you can use iframe for including html file into the div.
Otherwise you have to follow some server side include method.
like, in php <?php include("includes/header.php"); ?>
your code looks fine.
are you running the site on a web server, such as out of visual studio (iis express) ?
You can't run it locally. Ajax wont work that way.
Open your page in chrome, and press f12 to open up dev tools.
go to the network tab.
do you see the ajax request being fired on the load function?
by the way, regarding the header div,
a div is not a self-closing tag. Its a container. Its best that you close it using a closing tag.
Otherwise you might get unpredictable results in some browsers. ( I have not checked in a while, but it was that way a few years ago, probably in explorer 8)
jQuery(document).ready(function(){
jQuery.ajax({
url: 'header.html',
type: 'get',
success:function(data){
jQuery('#header_container').html(data);
}
});
});
<div id="header_container">....</div>
The content returned by the request will go inside the header_container div
Div elements require a closing div tag like so <div></div>.
there is no need to call small pieces of code from another js file, just write your code in the head element like so:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello</title>
<script type="text/javascript" src="../Scripts/jQuery.js"></script>
<script>
$(document).ready(function() {
$("#Header").load("../Templates/Header.html");
});
</script>
</head>
<body>
<div id="Header"></div>
</body>
</html>
Don't be afraid to ask for more info.
$.load() http://api.jquery.com/load/