Hey guys. I don't do HTML or Javascript, I prefer to work in C#, but one of the JS guys tells me that he needs a script included within the head tag. The page in question is a content page of a master page. I can't seem to make this work. I tried adding the script by a programmatic reference this.ClientScript.RegisterClientScriptInclude, but it came out in the <body> tag. I tried adding a ScriptManager and a ScriptReference in the contentplaceholder inside the <head> tag of the master page, but this didn't work either. How can this be accomplished?
Just put a client side reference to the script in.
<head> <script lang="Javascript" src="./scripts/yourscript.js"></script>
Or, if it needs to be inline, include the actual script right there in the master page.
Related
I'm redesigning application that could be a good fit for SPA. After reviewing the code I found that previous developers used JQuery/JavaScript load() method to include .html files. For example they have header.html and footer.html. On page load .html are loading in div containers. Example:
<!DOCTYPE html>
<html>
<head>
<title>App Home Page</title>
</head>
<body>
// Body content
<script>
$(function () {
$('#header').load('includes/header.html');
$('#footer').load('includes/footer.html');
});
</script>
</body>
</html>
In this case loading .html doesn't have any impact on JavaScript events since none of the elements in these two files have events. In case for example if I put onClick function in one of the elements in header.html that will be a problem. The DOM content will load before script on the bottom of the body tag. I have questions about this methods:
Is it a good approach to load .html files using JavaScript for
this purpose?
Is there any reason to load .html with JavaScript
other than cleaner code and easier maintenance?
If there are
benefits of loading .html with JavaScript, how to prevent race
condition in case where DOM is loaded before script content?
I'm trying to understand why this approach would be a good option and if that is a good practice now days in Web Development of Single Page Applications. Another thing that I forgot to mention is that I only use front end languages for this project. There is no server-side language involved.
Hi guys I’m new to JavaScript and web development. I came across this question recently about the location of the script tag. I know it’s a common question and I’ve viewed some answers on stackoverflow also this style guide on google. but I am still not very clear on this problems.
For example, I have I html page with an external script js file like this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script src='js.js'>
</script>
</head>
<body>
</body>
</html>
and the js file is
var loadTime = document.createElement('div');
loadTime.textContent = 'You loaded this page on: ' + new Date();
loadTime.style.color = 'blue';
document.body.appendChild(loadTime);
It seems to me that this js file is not dependent upon any DOM elements of the html file being available so it should not matter where I put this script tag. But it turns out I have to put this script tag to the bottom of the body closing tag, otherwise the date won't appear on the page as expected. Another workaround is using defer attribute in the script tag like this
<script src='js.js' defer></script>
This is what baffles me, if a script has any operation related to DOM, it seems to me that it cannot be put at inside the head tag at the front without a defer or async attribute in it. Why this google style guide https://developers.google.com/speed/docs/insights/BlockingJS still suggest we can write inline script in the head tag given accessing and operating on DOM are incredibly common in any script file.
According to http://caniuse.com/#feat=script-defer, 94.59% of all browsers support this. 94.92% support it at least partially. Why the async and defer attributes are not used widely? I mean, I viewed a lot of HTML sources out there, and I just don't see the async and defer attributes anywhere?
So here are some explenations.
Using <script></script> in HTML without any extra attributes will block HTML parsing (in other words 'loading html to browser window') from that point. Specified script will be then fetched and executed upon successful download. After that, execution will be resumed (page will be loaded).
Using <script async></script> allow HTML parser not to block parsing until the script is downloaded.
Using <script defer></script> allow HTML to be fully parsed, and script code will be executed after that.
So to anwser your question from the topic - scripts in <head></head> can be included (and will work properly) if they do not require to acces things that are not there yet.
In your example you are trying to append sth to body (which is not yet there).
If you are using <script async></script> in <head></head> it is also not guaranteed to work. Eg. script is tiny (almost instant download) - it will be executed before html is fully parsed (results in accessing things that are not there yet). We can time async requests, it's part of their beauty.
Using async makes sense if fetched script is not accesing DOM straightforward.
Using defer makes sense eg. if JS file is big (eg. fetch takes 5sec) and we want to show user sth. on the page. After script is loaded we change the page to it's inteded 'look' via js in script.
Note that these are not all use cases of async and defer.
Suggest you check the answer of this load and execute order of scripts
The normal way is in the head tag only loading the javascript.
Then after the whole html file is loaded, in the document onload call your functions.
document.addEventListener('DOMContentLoaded', function() {
console.log('document - loaded - ');
//call your functions
}, true);
So Google tells me to do this:
Paste your snippet (unaltered, in it’s entirety) into every web page you want to track. Paste it immediately before the closing </head> tag.
I understand this part, but as I'm including my header and footer, I guess this is not what I'm supposed to do.
If you use templates to dynamically generate pages for your site (like if you use PHP, ASP, or a similar technology), you can paste the tracking code snippet into its own file, then include it in your page header.
So I guess this is what I'm talking about(?), but I don't really get exactly where they want me to put the snippet. Do I put it in my header.php file once right before the closing </head> tag and then include the header.php file into every page or do I have to put the snippet directly in on every page? Incase I have to put the snippet in on every page, where exactly do I put it? Could someone please give me an example of this?
You can paste the Google Analytics Javascript snippet into its own file, call it ga.js for example.
Then in your header.php file, right before you close the tag, include that Javascript file, like so:
<script type="text/javascript" src="ga.js"></script>
This will load the GA code in your head section every time you load the header.php file. This should happen to every page that you load header.php automatically.
If you already have split your header, that I guess is included into you other html or php files, in it's own file and it includes the </head> tag, then you can put a script right above it.
This would look something like this:
[...]
<script>
<!-- Your personal google analytics snippet -->
</script>
</head>
Then all sites, that include your header.php, also load the snippet from analytics and get tracked.
I have no idea how to describe this accurately/intelligently because it seems to be completely impossible, yet there must some reason for it.
I am trying to leverage jquery, jquery-ui, qtip (tooltip for jquery) and highcharts (javascript charting), but for purpose of post I could just as easily been only using jQuery and jQuery-UI.
If I include my <script/> tags at the bottom of my <head/> element I get an error trying to call the .slider() extension to configure my sliders. But if I put the <script/> tags right before the closing of my <body/> element then everything works. To illustrate, the following will not work (obviously some pseudo code below):
<head>
<script jquery.js/>
<script jquery-ui.js/>
</head>
<body>
... html ...
<script type="text/javascript">
$(document).ready(function () {
$(".slider").slider( { .. options .. } );
} )
</script>
... more html *including* the .slider elements
</body>
However, if I move the two jQuery script tags to be right above the </body> closing element things work. When the script tags are in the head element and I debug my application, basically the page does appear to have completely loaded and Visual Studio highlights the line calling the .slider() function saying it doesn't know what slider() is. Looking at the call stack, it appears to be correctly calling it from the document ready function...the mark up all appears to be there as well, making me believe the document truly is ready.
Now I didn't include things that are required by asp.net 1.1/2.0 site in my pseudo code, namely a <form/> element with runat="server' and the use of a <asp:ScriptManager/> tag (we needed that for parsing monetary values from different cultures leveraging Microsoft Ajax). I can't believe they would be causing the problem, but maybe they are. Additionally, asp.net injects several of its own script sections (i.e. for validation, post back, etc.)
Regarding the form tag...all the html and document.ready markup would be inside the form tag, while the script tags are always outside of the form tag (either above it, in the head or below it at the bottom of the body).
Obviously I could leave the script tags at the bottom, and I very well may end up doing that, but I am trying to get a clean 'template site' of which to use when creating new client sites and it just feels wrong that I have a restriction forcing me to put those tags at the bottom of the html. I'm sure our framework code (or maybe asp.net's) is simply inserting something that is causing problems/conflicts with jQuery, but I don't really know how to go about debugging/diagnosing what that problem is. So if anyone has any suggestions I'd greatly appreciate it.
It looks like jQuery 1.3.2 is being loaded by ASP.NET (see your second WebResource.axd). The two library versions are overwriting each other. Thus the reason it works when you load 1.6.2 at the end of the page.
I remember my instructor last semester mentioning something about how to sequence JavaScript commands in the HEAD section of my ASP.Net document, but for the life of me, I can't find it in my notes. Are there special concerns about the order Java and other statements inthe HEAD section?
I am putting the Javascript on a .aspx page that is based on a Master Page, if that makes any difference.
Thanks in advance!
No, the sequence doesn't really matter. And you don't need to put your JS in the HEAD section either, unless you're referencing an external JS file. If you're using master pages, and you need a certain JS function on a page, just create the JS function on the page, with the requisite script tags:
ASPX:
<script language="javascript" type="text/javascript">
someFunction = function(){
//do something
}
</script>