Javascript – Dynamically Loading External JavaScript or CSS File

We can load external JavaScript(.js) and CSS(.cs) files on a page by giving reference in the head section of the web page.

Syntax

<head>
<script type="text/javascript" src="myfile.js"> // loading .js file
</script>

<link rel="stylesheet" type="text/css" href="mypgm.css"/> // loading css file using link reference.

</head>

Loading JS file

Following Example to show how to load external .js file

<!DOCTYPE html>
<head>
<script type="text/javascript" src="myfile.js">
</script>
</head>

<body onload="greeting();">

</body>
</html>

The following code shows myfile.js file


function greeting() {
	alert("hello !!!!");

}

  • <script type=”text/javascript” src=”myfile.js”> tag is used to define client side script which uses attributes type for specifiying MIME type and src attribute used to specify URL of the file.
  • <body onload=”greeting();”> tag uses onload() event which executes the javascript when page is finished loading which will call the function greeting() from myfile.js file to display the alert message.

Loading JS File Demo

  • Save the file as load_external.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser.

When the execution process is completed successfully we will get the following output:

Javascript - Dynamically Loading External JavaScript or CSS File 1

Loading CSS file

If we want to change style of HTML page then we can make use of CSS by defining required styles for the web page in seperate .css file.Now we will see how to load .css file in JavaScript.

Example to show creation of html file

<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="myfile.css">
</head>
<body>
	<h2>Welcome</h2>
	<h2>This is JavaBeat home Page</h2>
	<p class="MyCss">This site is good for beginners</p>
	<br />
	<a href="details.html">Show Details</a>
</body>
</html>

The following example shows external.css file

body{
	background-color: lightyellow;
    }
h1 {
	color: brown;
	text-align: center

   }

h2 {
	color: blue;
   }

p  {
	color: darkorange;
   }

p:hover {
		color: green;
        }

.MyCss {
		font-color: red;
		font-weight: bold;
		text-align: left;
		font-size: 20px;
	}

Now we will create details.html file as shown below:

<!DOCTYPE html>
<head>
<title>Detail</title>
</head>
<body bgcolor="lightyellow">

	<br> JavaBeat publishes Java web development tutorials and
	articles. It provides articles on many programming langauges such as
	Java,J2EE and frameworks such as Springs,JSF,Hibernate etc.

</body>
</html>
  • <link rel=”stylesheet” type=”text/css” href=”myfile.css”> tag is used to link with external style sheet by using href attribute which links to myfile.css file.
  • <p class=”MyCss”> tag contains class MyCss which determines styles for the text which will display in the browser.
  • p:hover is like linke when user mouses over it.
  • .MyCss is class name which contains styles such as color,wieght,size etc for the texts which should display in the browser.
  • <img alt=”javabeat” src=”C:\jb.jpg”>tag is used to insert image by using src attribute which indicates location of the image.

Loading CSS File Demo

  • Save the file as load_externalcss.html in your system.
  • Just open the file in the browser, you will see the below picture in the browser.

When the execution process is completed successfully we will get the following output:

Javascript - Dynamically Loading External JavaScript or CSS File

Now click on the “My Details” link, the following screen would be displayed:
JS_dynamicjsload3

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*