I'd like to include a javascript file on every page of a site. I can do this with:
<script type="text/javascript" src="myFile.js" ></script>
This works fine - however as there's nothing between the two tags, I wanted to change it to:
<script type="text/javascript" src="myFile.js" />
If I do this, it doesn't work - nothing after that line loads on the page.
Any ideas why? Thanks
Unfortunately, the HTML specs for REQUIRE a closing tag...
HTML Standard, section 18.2.1
18.2.1 The SCRIPT element
Start tag: required, End tag: required
This is not a bug, it's standard behavior.
Also, empty HTML elements are often not rendered:
<div style="background:red"></div> displays, <div style="background:red" /> doesn't
HTML doesn't support self closing tags. If you want to use them you need to use an xml based doctype AND serve the file as xml.
XHTML or the xml serialisation of html5 would both work.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>XHTML5 Template</title>
<meta charset="utf-8" />
<script type="text/javascript" src="http://documentcloud.github.com/underscore/underscore-min.js" />
</head>
<body>
</body>
</html>
Save this in a file with a .xhtml extension and open it in a modern browser and the self closing tag will work.
Related
I would like to convert this html script into a chrome extension. I followed this short tuto and apparently, I should move all the script ●parts into a .jsfile:
Due to security constraints, we can’t put inline JavaScript into our
HTML files inside of our Chrome extensions, so we have to create a
separate file to hold any JavaScript code we need and we’ll reference
it from the HTML file.
So instead of having just this html:
<!DOCTYPE html> <html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
<script>
function googleSectionalElementInit() {
new google.translate.SectionalElement({
sectionalNodeClassName: 'translate',
controlNodeClassName: 'translate_control',
background: '#f4fa58'
}, 'google_sectional_element');
}
</script>
<script src="//translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en"></script>
</body> </html>
I should have one html ...:
<!DOCTYPE html>
<html>
<body>
<div class="translate">Тестирование</p>
<div class="translate_control" lang="en"></div>
</body>
</html>
...and one .js. But I am not sure how to go with the .js. How shoudl I call the script //translate.google.com/translate_a/element.js?cb=googleSectionalElementInit&ug=section&hl=en. Also should I add the function googleSectionalElementInit inside a document.addEventListener function?
Also will the script work because it will be stored on my local computer and not a server?
I have searched other answers for an resolution to this, but it seemed everyone was simply placing their external .js file before the google api jquery link. This, however, is not my case.
html file (named "index.html"):
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
I have this in the body of my html file to create the button:
<div class="input">
<input type="button" id="test" value="CLICK ME" style="width: 500px; height: 100px" />
</div>
script file (named "script.js"):
$(document).ready(function(){
$("#test").click(function(){
$(this).hide();
alert("You clicked it!");
})
})
When I click the button on my site, nothing happens. I have tried multiple configurations of the order for the script file and google api, but nothing else has worked for me.
However, I do know that my script works because when I place my code inside the html file, under the script tag, my code works (the button vanishes and displays the alert). I'm assuming there's a syntax error of some sort in my file linking, but I'm not sure.
<script src="/script.js" type="text/javascript"></script>
I needed to add a "/" to the path.
I am having trouble linking a javascript file to a dynamic website i made through php. My file structure is simply just:
index.php, css folder (which is working correctly), jscript folder (does
not work) and a pages folder (has all my pages)
My pages are simple just
header.php, registrationContent.php and footer.php
My index just includes all 3 php and it works perfectly fine. My problem is no matter what I do, whether inline, or soft coded javascripting it does not work. I am certain my syntax in the javascript is fine, its just the linking.
My header:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Safe Drive Website</title>
<link href="css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="css/regStyle.css" rel="stylesheet" type="text/css" />
<script src="jscript/javascripts.js" type="text/javascript"></script>
</head>
<body>
<div class="topBar" id="topBar"><input type="Submit" value="Contact Us" class="topNavButton"/></div>
<div id="bannerText"><h1 class="mainHeader">SafeDrive</h1><h2 class="subHeader">Developer's Tool</h2></div>
I close the tags in the footer.php
Javascript files are included directly in your html page.
use the following line in your html page:
<html>
<head>
<script type="text/javascript" src="path/to/your/javascript/file.js"></script>
</head>
...
This is probably uncommon, but I thought of answering my own question because I found a solution, so that anyone else having the same problem could try mine.
Basically, it was loaded, the only problem was that the javascript functions weren't loaded and so to do that, i had to add:
window.onload = myJscriptFunction();
on any tag (body, footer etc. refer to w3schools for that information)
I do hope this helps anyone facing the same problem ^_^
I was trying to use Dygraphs in web application. Please see below simple code.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MyHtml.html</title>
<!--[if IE]>
<script type="text/javascript" src="/js/excanvas.js"></script>
<![endif]-->
<script type="text/javascript" src="/js/rgbcolor.js"></script>
<script type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph-combined.js"></script>
<script type="text/javascript" src="/js/dygraph.js"></script>
<script type="text/javascript" src="/js/CanvasRenderingContext2D.js"></script>
</head>
<body>
<div id="graphdiv"></div>
<script type="text/javascript">
g = new Dygraph(
document.getElementById("graphdiv"), "Date,Temperature\n" + "2008-05-07,75\n" + "2008-05-08,70\n" + "2008-05-09,80\n");
</script>
</body>
</html>
If i include the line
type="text/javascript" src="http://dygraphs.com/dygraph-combined.js"
with the scripts it works fine in firefox and chrome and it wont work in IE, it gives error like 'CanvasRenderingContext2D' is undefined. If i download the dygraph-combined.js and include it in my web application and access it by giving path, it wont work in all three browsers, it gives an error message Dygraph not defined. Please help me. I want to know why this is happening.
You should only need to include dygraph-combined.js, whether from your website or your own site. Did you include excanvas.js on your site? This could explain why it's not working in IE8.
The problem might be that scripts which are in /js/... are not accessible for any of your browser.
It explains why in the case you refer to remote dygraph-combined.js, only IE doesn't work - it needs excanvas.js referenced from /js/...
In the case you downloaded dygraph-combined.js and replace the remote reference to /js/... then no browser works as they can't access the /js/dygraph-combined.js
Check accessibility of /js/dygraph-combined.js and /js/excanvas.js. Should there be the reference without leading slash e.g.: js/dygraph-combined.js?
And as previously mentioned, remove all other script references (except dygraph-combined and excanvas.js). Dygraph-combined already contains everything in one file and excanvas is needed for IE.
I've got this code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" href="http://code.jquery.com/jquery-1.5.min.js" />
<title>JQuery Demo 1</title>
<style type="text/css">
#box
{
background-color: #ff0000;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="box">----Text----!</div>
</body>
</html>
When I include the Jquery file from Google, the div "box" stops being red. When I remove the JQuery file, it becomes red again. WHY?
Try not using self closing syntax for your script element, e.g.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.min.js"></script>
...and the correct attribute to point to a script file is src, not href.
See it on jsFiddle.
In XHTML <script /> means "A complete script element" (note, browsers decide if a document is XHTML or HTML based on the content-type HTTP header, not the Doctype).
In HTML <script /> means "A start tag for a script which starts with a > character", but for historical reasons, it gets treated as "A start tag for a script with a funny attribute that I'll ignore".
So, you have a script element that you open, but it doesn't get closed until the </script> tag for the second script element. The <style> element is inside the script, so it gets treated as JavaScript instead of HTML. Since the script specifies a src the inline script (including the style element) is ignored.