Google Analytics uses snippets to inject script into pages like this:
It would be easier for users to use the following
<script src="https://wwww.google-analytics.com/analytics.js?id=someID"></script>
So are there advantages of using snippets (script with content) over scripts with src?
Related
I'm building a website using a premium html template, part of the template is in Javascript. So in the template I have something like this - its in the 'master template' every page.
//Template JS
<script src="/js/core.min.js"></script>
<script src="/js/script.js"></script>
Also as part of this website I am using an ecommerce plugin and those files also need to be on the page, so something like this:
//Plgin JS
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="~/Scripts/underscore.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.min.js"></script>
<script src="~/App_Plugins/Merchello/client/js/merchello.ui.settings.js"></script>
<script src="~/App_Plugins/Merchello/client/js/fasttrack.js"></script>
The problem is the JS conflicts when they are all on the page together. is there a way to group the java script files in a way they they can only see whats in that group... like a namespace kind of concept?
Or will I just have to unpick it all?
Using script tags in the same html page no because browser creates only one global space which visible and shared between all scripts.
You can try to use some module bundlers like webpack, requirejs etc.
Or you can use iframe to create a page inside page and move the plugin html and scripts to the iframe.
What's the best way to load fast javascript in different pages ? Should my custom javascripts go separate for each page or all custom javascripts should be present only in 1 common custom.js file and include this file in footer ?
require_once($header);
include_once($page2.php);
require_once($footer);
<script src="js/custom-page2.js"></script>//separate for each page
require_once($header);
include_once($page1.php);
require_once($footer);
<script src="js/custom-page1.js"></script>//separate for each page
OR
//in footer.php include all js in 1 file
<script src="js/all-custom.js"></script>
If all pages share the same scripts using one script will be better.
If they use different scripts you can cut out what each page DOESN'T need and save on HTTP requests.
Or a mixture of the two.
So...it depends?
Basic rule: If you don't need it, don't load it.
I advise you to create your html page by including in this order :
HTML wrap all
Head (with style in one page for example)
Body with:
Javascript modules
Main HTML DOM
Javascript DOM modifiers and launchers
Same like this :
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<script type="text/javascript" src="modules.js"></script>
<div class="body"></div>
<script type="text/javascript" src="functions.js"></script>
</body>
</html>
it's good idea to put all js in header (browser will not render page until all header files are loaded, at least in theory).
browser (proxy etc) will cache your js, so it's not going to be fetched from your site on every request. browser will only check if file has changed.
in most cases browser will keep single connection for all requests, however it still has to ask for every single js file if it hasn't changed. i keep js logic in small seperate files during development, but then i merge them for production.
If I have,
<script src="jquery.js" ></script>
Then any script after this will allows you to use jQuery($) variable. I need to mimic this behavior in javascript. What I need that add my script file,
<script src="myscript.js" ></script>
which will load jquery.js using javascript and any script after this tag will allow you to use jQuery($) variable. I have no control beside myscript.js file. So I need to make sure that jquery.js must be loaded before allowing the browser to run/execute/render next tags.
What you are trying to achieve is not possible. When loading scripts dynamically you need to use callbacks to ensure that those scripts are loaded and use them only inside those callbacks. You cannot have sequential <script> tags in which one of the scripts loads dynamically some other scripts such as jquery and have subsequent scripts use jQuery. Browsers load script tags sequentially and guarantee that they will be loaded in the same order, but once you start injecting dynamic scripts into the DOM the only way to ensure proper load is to use callbacks. Take a look at the following article for more details.
Splitting it up in two parts should work:
index.html:
<html>
<body>
<script src="myscript.js"></script>
</body>
</html>
myscript.js:
document.write('<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>');
document.write('<script src="myprog.js"></script>');
myprog.js:
$(function(){
alert('jquery ready');
});
I'm new to JavaScript and I'm trying to get a slideshow working in my website. I'm following this tutorial: http://www.queness.com/post/1450/jquery-photo-slide-show-with-slick-caption-tutorial-revisited
Unfortunately it doesn't go into a beginners level of detail as to how to get it installed. I know what I should do with the HTML and the CSS but I'm not sure where I should be putting the JavaScript. Does it go in a separate file or something? How do I get it to work?
Also I'm trying to do this within cakephp so if there's any specific cakey thing I can do that'd be awesome!
Copy all that JavaScript on your referenced page. Save to a new file slide.js or something like that.
Edit your HTML document to include a reference to the jQuery libraby, and that new JavaScript file you've just created:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script type="text/javascript" src="http://mysite.com/slide.js" />
You can put JavaScript in an external file with a .js extension, and include that in an HTML page using the script tag:
<script type="text/javascript" src="yourscript.js"></script>
Alternatively, you can write the script directly in the script element:
<script type="text/javascript">
//Your script here
</script>
Also note that as the tutorial you are following uses jQuery, you will need to download and include the jQuery library in your page.
The script tags can be placed anywhere in the document, but are usually found inside the head tag, or just before the closing body tag.
Welcome on SO Helen.
That script uses the jQuery library so you have to also include that. http://jquery.com/
JavaScript can best be placed in seperate file with the extension .js
Add the javascript files just before the </body> tag on your page like:
<script src="/js/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="/js/jquery/jquery-slideshow2.js" type="text/javascript"></script>
The following external CSS files were
included after an external JavaScript
file in the document head. To ensure
CSS files are downloaded in parallel,
always include external CSS before
external JavaScript. 1 inline script
block was found in the head between an
external CSS file and another
resource. To allow parallel
downloading, move the inline script
before the external CSS file, or after
the next resource.
My HTML is:
<head>
<link rel="Stylesheet" href="gStyle.css" />
<script type="text/javascript" src="gMain.js"></script>
<script type="text/javascript" language="javascript">
// Your chart object(s)
var myChart;
// Function to hold all chart creation
function initCharts() {
myChart = new ganttChart("chart1");
myChart.gAddBar("Dynamic!", "22/3/2010", "3/4/2010");
myChart.gLoadData("Going to the shop*4/3/2010*19/3/2010*Watching TV*9/3/2010*23/3/2010*Watching TV*1/3/2010*23/3/2010*Watching TV*18/3/2010*28/3/2010*END INPUT*1/3/2010*9/3/2010");
myChart.gDraw();
myChart.gChangeBarColour(1, "#dd2200");
myChart.gChangeBarColour(2, "#9900ee");
myChart.gChangeBarColour(3, "#00dd00");
myChart.gChangeBarColour(4, "#ffbb00");
myChart.gChangeBarColour(5, "#00aa99");
}
</script>
</head>
<body onload="initCharts()">
<div id="chart1" class="gContainer">
</div>
<div id="db"></div>
</body>
Is it getting confused between the body inline script?
Inspect the page elements. Probably your Chrome extensions are dynamically adding scripts to the page in HEAD.
I think that when javascript is downloaded the browser must wait to get it all and then run it - this stops it going to the next line directly and getting it. I guess styles all get downloaded and then computed down to inheritance position and importance etc...so they can download in parallel.
This kind of thing is hard to regulate in a CMS with components that load their own style and js.
For me, Google Analytics library inserted scripts before the rest of mine.