实例一：自动刷新窗口
原理：利用reload实现刷新窗口，利用setTimeout实现自动刷新。
源代码：
<script type="text/javascript">
//刷新网页的函数
function fresh(){
window.location.reload(); //调用location的reload函数
}
setTimeout('fresh()',2000); //设置timeout，2秒钟刷新一次
</script>实例二：让页面前进和后退
原理：利用window.history.forward()和window.history.back()。
源代码：
<script type="text/javascript">
//前进
function goForward(){
window.history.forward(); //前进到前一张网页
}
//后退
function goBack(){
window.history.back(); //后退到上一张网页
}
</script>
<input type="button" value="前进" onclick="goForward()"/>
<input type="button" value="后退" onclick="goBack()"/>也可以利用history.go(),其接受一个整形参数，为正时前进，为负时后退。例如：go(-1)和back()效果是一样的。
实例三：关闭窗口
原理：利用window.close()实现。
源代码:
<script type="text/javascript">
//关闭窗口
function closeWin(){
window.close(); //调用windows对象的close方法，关闭窗口
}
</script>
<input type="button" value="关闭此窗口" onclick="closeWin()"/>示例四：页面载入等待界面
原理：加入隐藏层，在跳转页面时将其显示出来。
源代码：
<!-- 友好提示界面的层 -->
<div id="doing" style="Z-INDEX: 99; left:0px; top:0px; display:none; WIDTH:100%; POSITION:absolute; HEIGHT:100%; background:gray;">
<p>载入中，请等待。。。</p>
</div>
<script type="text/javascript">
//提交表单的动作
function submitForm(){
var doing = document.getElementById('doing'); //获取界面的dom
doing.style.display = ''; //取消隐藏
self.location.reload(); //重新加载页面来模拟表单的提交
}
</script>
<input type="button" value="提交表单" onclick="submitForm()"/>注意：开始时等待界面要隐藏起来，设置display=none；在页面跳转时再将其显示出来。
实例五：若干时间后不操作自动关闭页面
原理：设置一个标志变量记录是否进行过操作。通过setInterval定时检查该标志变量来判断是否执行close()。
原代码：
<script type="text/javascript">
var willClose = true; //定义一个是否关闭的全局变量
//鼠标点击网页
function clickBody(){
willClose = false; //当用户鼠标点击网页以后，则把变量置为false
}
function judgeClose（）{
if(willClose){ //判断是否需要关闭
window.close(); //关闭窗口
}else{ //如果点击过，重新开始计算
willClose = true;
}
}
setInterval(judgeCLose,10000);
</script>
<body onclick="clickBody()">实例六：修改网页标题
原理：通过document.title获取和设置标题。
源代码：
<!-- 定义输入框和按钮 -->
<input type="text" name="newTitle" id="newTitle" value=""/>
<input type="button" value="修改标题" onclick="changeTitle()"/>
<script type="text/javascript">
//修改标题
function changeTitle(){
//得到新的title的值
var newTitle = document.getElementById('newTitle').value;
document.title = newTitle; //修改标题
}
</script>实例七：禁止网页被放入框架
原理：通过判断当前网页是否为最顶层网页来禁止被放入框架。
源代码：
<script type="text/javascript">
//判断当前网页是否为最顶层框架的网页
if(self != top){
//如果不是顶层的框架或独立窗口打开的本网页，则进行跳转
top.location.href = self.location.href;
}
</script>实例八：跳转到其他页面
原理：该实例需要由用户提供目的地址。
源代码：
<script type="text/javascript">
//跳转地址
function changeURL(){
//得到新的url的值
var newURL = document.getElementById('newURL').value;
//通过修改地址栏的地址来跳转到新的网页地址
self.location.href = newURL;
}
</script>
<!-- 定义输入框和按钮 -->
<input type="text" name="newURL" id="newURL" value=""/>
<input type="button" value="跳转地址" onclick="changeURL()"/>如果网页处于一个框架中，则跳转只限于框架，要将整个窗口跳转，须将self改为window。
实例九：进入页面时的问候
原代码：
<script type="text/javascript">
alert('欢迎您的光临'); //采用弹出框对用户一个问候语
</script>实例十：
<script type="text/javascript">
//动态加载JavaScript, myjs.js
function loadJs() {
//得到html的头部dom
var theHead =document.getElementsByTagName('head').item(0);
//创建脚本的dom对象实例
var myScript = document.createElement('script');
myScript.src='./myjs.js'; //指定脚本路径
myScript.type='text/javascript'; //指定脚本类型
myScript.defer=true; //程序下载完后再进行解析和执行
theHead.appendChild(myScript); //把dom挂载到头部
}
</script>
<!-- 定义按钮 -->
<input type="button" value="动态加载JS" onclick="loadJs()"/>实例十一：判断页面是否加载完毕
<script type="text/javascript">
//加载完成以后的回调函数
function myOnLoad(){
alert('网页加载完毕'); //提示一句话
}
//使用window的onload属性进行回调处理
window.onload = myOnLoad;
</script>onload监视页面中的所有元素，有时只需判断文档是否已经加载完毕：
//定义回调函数
function mypageLoad(){
if(document.readyState=="complete")
alert("文档加载完毕")；
}
document.onreadystatechange=mypageLoad;实例十二：避免浏览器使用缓存加载页面
<script type="text/javascript">
//加载完成以后的回调函数
function myOnLoad(){
//获取到所有的超级连接DOM
var links = document.getElementsByTagName('a');
for(var i=0; i<links.length; i++){ //遍历
var link = links[i]; //得到当前的链接的DOM
var href = link.href; //链接的地址
if(href.indexOf('?') > -1){ //地址中是否已经包含了参数
//修改链接的地址，加上一个参数：当前时间的毫秒数
href += '&time=' + new Date().getTime();
}else{
href += '?time=' + new Date().getTime();
}
link.href = href; //赋新的地址
}
}
//使用window的onload元素进行回调处理
window.onload = myOnLoad;
</script>实例十三：打开窗口时显示广告并自动关闭
<script type="text/javascript">
//展示广告图片
function showAdPic(){
//获得广告的DOM
var ad = document.getElementById('ad');
//直接在DOM中添加HTML源码来添加一个图片的DOM
ad.innerHTML = '<img src="./ad.jpg" width="300" height="200"/>';
//设置定时器，5秒以后关闭广告图片
setTimeout(function(){
var ad = document.getElementById('ad');
ad.style.display = 'none'; //隐藏图片
}, 5000);
}
//使用window的onload元素进行回调处理
window.onload = showAdPic;
</script>
4521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
