Last updated on June 9th, 2022 at 01:18 pm
This tutorial will show you how to add a splash page on your website using javascript. Here i am using iframe tag. You are free to use FRAME or any other like a div/span etc., according to your convenience.
To start with lets define a IFRAME
<iframe width="100%" height="96%" name="SplashPageshow" src="javascript:parent.blank"></iframe>
Keep in mind, you can either trigger the function by using onload property
<body onload="SplashPage()">
OR
Using Button
<input type="button" value="Start Splash Page" onclick="SplashPage()"/>
You can even modify this code for developing an image slideshow frame by dynamically adding image tag with some opacity switch.
Add your own messages by modifying the message array
message[1] = "Check out this JavaScript SplashPage!!";
message[2] = "Yet another cool effect using javascript...";
message[3] = "you can easily add this to your web pages.";
message[4] = "Why don't you put it on your site?";
message[5] = "Don't forget, there are still<br>lots more scripts to check out!";
HTML Display
You can display your messages by using the below HTML. This is just for demo feel free to modify it as per requirement
SplashPagepage = '<body bgcolor='+background+'>'
+ '<center><table border=0 '
+ 'height=100%><tr><td><center><b><font '
+ 'color='+text+' size=6>'+message[i]+'</font></b>'
+ '</center></td></tr></table></center><font size=1 color="white">'
+ '<div style="position: absolute; right: 10px; bottom: 10px;" id=copy>Script From Mistonline.in</div></font></body>';
Message speed along with the HTML page background, speed, msgcount etc., is defined here
var background = "black";
var text = "white";
var URL = "https://mistonline.in/wp/";
var speed = 4000; // time in milliseconds (4000 = 4 secs)
var msgcount = 5;
change the URL variable to your own, that way it will automatically redirect after displaying the messages.
You might also be interested in, how to add splash page using jQuery?
Entire Script
<script LANGUAGE="JavaScript">
var background = "black";
var text = "white";
var URL = "http://mistonline.in/wp/";
var speed = 4000; // time in milliseconds (4000 = 4 secs)
var msgcount = 5;
var i = 1;
var blank = " ";
function StringArray (n) {
this.length = n;
for (var x = 1; x <= n; x++) {
this[x] = '';
}
}
message = new StringArray(msgcount);
message[1] = "Check out this JavaScript SplashPage!!";
message[2] = "Yet another cool effect using javascript...";
message[3] = "you can easily add this to your web pages.";
message[4] = "Why don't you put it on your site?";
message[5] = "Don't forget, there are still<br>lots more scripts to check out!";
function SplashPage() {
SplashPagepage = '<body bgcolor='+background+'>'
+ '<center><table border=0 '
+ 'height=100%><tr><td><center><b><font '
+ 'color='+text+' size=6>'+message[i]+'</font></b>'
+ '</center></td></tr></table></center><font size=1 color="white">'
+ '<div style="position: absolute; right: 10px; bottom: 10px;" id=copy>Script From Mistonline.in</div></font></body>';
if (i == message.length + 1) parent.location = URL;
if (i < message.length + 1) {
frames['SplashPageshow'].location = "javascript:parent.SplashPagepage";
i++;
setTimeout("SplashPage()",speed);
}
}
</script>
<body onload="SplashPage()">
<iframe width="100%" height="96%" name="SplashPageshow" src="javascript:parent.blank"></iframe>
<input type="button" value="Start Splash Page" onclick="SplashPage()"/>
admin
Great tutorial..!! Its really very useful to know JavaScript splash page creation method. Thanks for sharing.