防止包含在框架里面的页面被直接访问

相信大多数人设置框架页面必然有自己的目的,同时也不期望别人直接访问到被嵌套的页面,比如一个典型的两列框架布局,左侧操作导航,右侧页面主体,没有人期望自己的左侧导航页面被直接访问到,本文介绍的方法就是为了防止这个情况发生。

 
<script type="text/javascript">
<!--
if (parent.location.href == self.location.href)
  window.location.href = 'frameset.html';
//-->
</script>

代码先判断了父窗体的链接是否等同于自身链接(当父窗体为空时,parent 等于自身),如果相同,说明当前窗体被直接访问到了,此时,就将当前窗体的链接定向到设置框架的页面,即期望中的父窗体。

防止页面被包含在 frame 里面

很多情况下,我们并不希望自己的页面被其他人恶意嵌套在框架中,其实,在理解了框架之间的关系后,我们很容易实现这一目的。

 
<script type="text/javascript">
<!--
function frameBuster()
{
      if (window != top)
          top.location.href = location.href;
}
window.onload = frameBuster;
// -->
</script>

该段代码判断最高级别的窗体是否等同于窗体,如果不相等,说明当前窗体被包含在框架里面了,就将最高级别的窗体链接定向到当前期望的窗体链接。

用 JavaScript 实现网页图片等比例缩放

在处理网页图片时,特别是一些图片列表的应用里面,很难保证图片统一大小,直接设置图片大小又会导致图片拉伸,造成图片模糊,本文介绍的代码可以在图片加载完成后自动按比例调整图片大小。

用 JavaScript 实现网页图片等比例缩放 – 示例

 
<script language="JavaScript" type="text/javascript">
<!--
// 说明:用 JavaScript 实现网页图片等比例缩放
// 整理:http://www.CodeBit.cn

function DrawImage(ImgD,FitWidth,FitHeight){
	var image=new Image();
	image.src=ImgD.src;
	if(image.width>0 && image.height>0){
		if(image.width/image.height>= FitWidth/FitHeight){
			if(image.width>FitWidth){
				ImgD.width=FitWidth;
				ImgD.height=(image.height*FitWidth)/image.width;
			}else{
				ImgD.width=image.width;
				ImgD.height=image.height;
			}
		} else{
			if(image.height>FitHeight){
				ImgD.height=FitHeight;
				ImgD.width=(image.width*FitHeight)/image.height;
			}else{
				ImgD.width=image.width;
				ImgD.height=image.height;
			}
		}
	}
}
//-->
</script>

调用方式:

<img src="1148202890.jpg" alt="自动缩放后的效果" onload="javascript:DrawImage(this,200,200);" />

如果图片较大,建议在图片标签里面同时设置期望的图片大小,这样不会导致页面在加载中撑开,该大小不会影响最终缩放效果。可以修改上面的代码为:

<img src="1148202890.jpg" alt="自动缩放后的效果" width="200" height="200" onload="javascript:DrawImage(this,200,200);" />

用 javascript 实现 ASCII 和 Unicode 互转

Unicode 标准提供了一种对多语种纯文本进行一致编码的方法,便于国际文本文件的交换。处理多语种文本的计算机用户 、商务人员、语言学家、研究人员、科学家等会发现 Unicode 标准可大大简化他们的工作。Unicode 标准对于经常使用数学符号和其它技术字符的数学家和技术人员也很有价值。本文介绍的是将 ASCII 编码的文本转换成 Unicode 的脚本。

用 javascript 实现 ASCII 和 Unicode 互转 – 示例

 
<script language="JavaScript" type="text/javascript">
 
function A2U() { //ASCII -> Unicode转换
	if (source.value == '') { alert('文本框中没有代码'); return; }
	result.value = '';
	for (var i=0; i<source.value.length; i++)
	result.value += '&#' + source.value.charCodeAt(i) + ';';
}
 
function U2A() { //Unicode -> ASCII转换
	var code = source.value.match(/&#(d+);/g);
	if (code == null) { alert('文本框中没有合法的Unicode代码'); return; }
	result.value = '';
	for (var i=0; i<code.length; i++)
	result.value += String.fromCharCode(code[i].replace(/[&#;]/g, ''));
}
</script>

用 javascript 修复 IE 下 PNG 图片不能透明显示的方法

在需要的时候修复

PNG 是可携式网络图像Portable Network Graphics这三个单词的第一个字母的缩写。她和 GIF 一样支持透明背景,但其对透明的处理质量远远大于 GIF,逐渐成为网页制作者非常喜欢的一种图片格式。令人无奈的是,IE 却不支持 PNG 图片的透明处理,本文介绍的方法就是针对这一问题的。

用 javascript 修复 IE 下 PNG 图片不能透明显示的方法 – 示例

 
// 说明:修复 IE 下 PNG 图片不能透明显示的问题
// 整理:http://www.CodeBit.cn

function fixPNG(myImage)
{
	var arVersion = navigator.appVersion.split("MSIE");
	var version = parseFloat(arVersion[1]);

	if ((version >= 5.5) && (version < 7) && (document.body.filters))
	{
		var imgID = (myImage.id) ? "id='" + myImage.id + "' " : "";
		var imgClass = (myImage.className) ? "class='" + myImage.className + "' " : "";
		var imgTitle = (myImage.title) ? "title='" + myImage.title  + "' " : "title='" + myImage.alt + "' ";
		var imgStyle = "display:inline-block;" + myImage.style.cssText;
		var strNewHTML = "<span " + imgID + imgClass + imgTitle
			+ " style="" + "width:" + myImage.width
			+ "px; height:" + myImage.height
			+ "px;" + imgStyle + ";"
			+ "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
			+ "(src='" + myImage.src + "', sizingMethod='scale');"></span>";
		myImage.outerHTML = strNewHTML;
	}
}

在页面中需要用到 PNG 图片的地方,添加

onload="fixPNG(this)"

如:

<img src="apple.png" alt="PNG" style="border:1px solid #999;" onload="fixPNG(this)" />

一次性修复页面上所有的 png

 
// 说明:用 javascript 修复 IE 下 PNG 图片不能透明显示的方法
// 整理:http://www.CodeBit.cn

/*
 
Correctly handle PNG transparency in Win IE 5.5 & 6.
http://homepage.ntlworld.com/bobosola. Updated 18-Jan-2006.

Use in <HEAD> with DEFER keyword wrapped in conditional comments:
<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

*/

var arVersion = navigator.appVersion.split("MSIE")
var version = parseFloat(arVersion[1])

if ((version >= 5.5) && (document.body.filters)) 
{
   for(var i=0; i<document.images.length; i++)
   {
      var img = document.images[i]
      var imgName = img.src.toUpperCase()
      if (imgName.substring(imgName.length-3, imgName.length) == "PNG")
      {
         var imgID = (img.id) ? "id='" + img.id + "' " : ""
         var imgClass = (img.className) ? "class='" + img.className + "' " : ""
         var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "
         var imgStyle = "display:inline-block;" + img.style.cssText 
         if (img.align == "left") imgStyle = "float:left;" + imgStyle
         if (img.align == "right") imgStyle = "float:right;" + imgStyle
         if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle
         var strNewHTML = "<span " + imgID + imgClass + imgTitle
         + " style="" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"
         + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"
         + "(src='" + img.src + "', sizingMethod='scale');"></span>" 
         img.outerHTML = strNewHTML
         i = i-1
      }
   }
}

将上面的代码另存为 js 文件,然后在页面中插入:

<!--[if lt IE 7]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

因为 png 图片只有在 IE 中才会有不透明的问题,所以只需在用 IE 浏览时才加载代码,注意要在调用代码中加上 DEFER 关键词,这样会延迟代码执行时间。

关于 DEFER :

它告诉浏览器Script段包含了无需立即执行的代码,并且,与SRC属性联合使用,它还可以使这些脚本在后台被下载,前台的内容则正常显示给用户。

请注意两点:

1、不要在defer型的脚本程序段中调用document.write命令,因为document.write将产生直接输出效果。

2、而且,不要在defer型脚本程序段中包括任何立即执行脚本要使用的全局变量或者函数。

将滚动条(scrollbar)保持在最底部的方法

有些时候(如开发聊天程序),我们需要将将滚动条(scrollbar)保持在最底部,比如聊天窗口,最新发出和收到的信息要显示在最下方,如果要看到最下方的内容,就必须保证滚动条保持在最底部。

将滚动条(scrollbar)保持在最底部的方法 – 示例

 
<script type="text/javascript">
 
function add()
{
	var now = new Date();
 
	var div = document.getElementById('scrolldIV');
 
	div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />';
 
	div.scrollTop = div.scrollHeight;
}
 
function scrollWindow()
{
	scroll(0, 100000);
	setTimeout('scrollWindow()', 200);
}
 
window.onload = function() { scrollWindow(); } 
 
</script>
 
<div id="scrolldIV" style="overflow:scroll; height: 100px; width: 400px; border: 1px solid #999;">
</div>
 
<input type="button" value="插入一行" onclick="add();">

javascript 代码中:

function add() 是在 id 为 scrolldIV 的 div 中插入一条信息,并将其滚动条固定在底部

function scrollWindow() 是将整个页面的滚动条固定在页面底部。

javascript 正确截取单字节和双字节混和字符串的方法

在 javascript 中,英文和中文等双字节字符都被当作是1个字符,但是通常我们需要将中文按两个字节处理,本文介绍的就是用 javascript 正确截取单字节和双字节混和字符串的方法。

javascript 正确截取单字节和双字节混和字符串的方法 – 示例

 
<script type="text/javascript">
/*************************************************************
	Author		: Yanfu Xie <xieyanfu@yahoo.com.cn>
	Url		: http://YITU.org

	Description	: 正确截取单字节和双字节混和字符串
	String str	: 要截取的字符串
	Number		: 截取长度
 *************************************************************/
function substr(str, len)
{
	if(!str || !len) { return ''; }

	//预期计数:中文2字节,英文1字节
	var a = 0;

	//循环计数
	var i = 0;

	//临时字串
	var temp = '';

	for (i=0;i<str.length;i++)
	{
		if (str.charCodeAt(i)>255) 
		{
			//按照预期计数增加2
			a+=2;
		}
		else
		{
			a++;
		}
		//如果增加计数后长度大于限定长度,就直接返回临时字符串
		if(a > len) { return temp; }

		//将当前内容加到临时字符串
		temp += str.charAt(i);
	}
	//如果全部是单字节字符,就直接返回源字符串
	return str;
}

var str = "呵呵he哈哈嘿嘿and";

document.write("字符串:<font color='red'>"+str+"</font><br /><br />");
document.write("javascript 默认截取10个字节的返回值:<br />");
document.write("<font color='red'>"+str.substr(0, 10)+"</font><br /><br />");
document.write("用本文介绍的方法截取10个字节的返回值:<br />");
document.write("<font color='red'>"+substr(str, 10)+"</font><br /><br />");
document.write("截取9个字节的返回值:<br />");
document.write("<font color='red'>"+substr(str, 9)+"</font><br /><br />");
</script>

用类似的方法可以很容易的做出判断单字节和双字节混和字符串长度的方法。

一个不错的 Form 多选列表控件效果

很多人对 form 默认的多选框效果不太满意,因为选中和未选中的项目是在一起的,当选项较多时问题尤为明显,本文介绍的就是将可选项和选中项分开,并且可以通过操作按钮或者双击来移动选项,操作起来非常方便。

一个不错的 Form 多选列表控件效果 – 示例

首先将下面的代码放置在页面的<head>标签内:

 
<style type="text/css">


	.multipleSelectBoxControl span{	/* Labels above select boxes*/
		font-family:arial;
		font-size:11px;
		font-weight:bold;
	}
	.multipleSelectBoxControl div select{	/* Select box layout */
		font-family:arial;
		height:100%;
	}
	.multipleSelectBoxControl input{	/* Small butons */
		width:25px;	
	}
	
	.multipleSelectBoxControl div{
		float:left;
	}
		
	.multipleSelectBoxDiv
	</style>
 
<script type="text/javascript">
	
	/************************************************************************************************************
	(C) www.dhtmlgoodies.com, October 2005
	
	This is a script from www.dhtmlgoodies.com. You will find this and a lot of other scripts at our website.	
	
	Terms of use:
	You are free to use this script as long as the copyright message is kept intact. However, you may not
	redistribute, sell or repost it without our permission.
	
	Thank you!
	
	www.dhtmlgoodies.com
	Alf Magne Kalleland
	
	************************************************************************************************************/
	
		
	var fromBoxArray = new Array();
	var toBoxArray = new Array();
	var selectBoxIndex = 0;
	
	function moveSingleElement()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^d]/g,'');
		var tmpFromBox;
		var tmpToBox;
		if(this.tagName.toLowerCase()=='select'){			
			tmpFromBox = this;
			if(tmpFromBox==fromBoxArray[selectBoxIndex])tmpToBox = toBoxArray[selectBoxIndex]; else tmpToBox = fromBoxArray[selectBoxIndex];
		}else{
		
			if(this.value.indexOf('>')>=0){
				tmpFromBox = fromBoxArray[selectBoxIndex];
				tmpToBox = toBoxArray[selectBoxIndex];			
			}else{
				tmpFromBox = toBoxArray[selectBoxIndex];
				tmpToBox = fromBoxArray[selectBoxIndex];	
			}
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			if(tmpFromBox.options[no].selected){
				tmpFromBox.options[no].selected = false;
				tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);
				
				for(var no2=no;no2<(tmpFromBox.options.length-1);no2++){
					tmpFromBox.options[no2].value = tmpFromBox.options[no2+1].value;
					tmpFromBox.options[no2].text = tmpFromBox.options[no2+1].text;
					tmpFromBox.options[no2].selected = tmpFromBox.options[no2+1].selected;
				}
				no = no -1;
				tmpFromBox.options.length = tmpFromBox.options.length-1;
											
			}			
		}
		
		
		var tmpTextArray = new Array();
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpTextArray.push(tmpFromBox.options[no].text + '___' + tmpFromBox.options[no].value);			
		}
		tmpTextArray.sort();
		var tmpTextArray2 = new Array();
		for(var no=0;no<tmpToBox.options.length;no++){
			tmpTextArray2.push(tmpToBox.options[no].text + '___' + tmpToBox.options[no].value);			
		}		
		tmpTextArray2.sort();
		
		for(var no=0;no<tmpTextArray.length;no++){
			var items = tmpTextArray[no].split('___');
			tmpFromBox.options[no] = new Option(items[0],items[1]);
			
		}		
		
		for(var no=0;no<tmpTextArray2.length;no++){
			var items = tmpTextArray2[no].split('___');
			tmpToBox.options[no] = new Option(items[0],items[1]);			
		}
	}
	
	function moveAllElements()
	{
		var selectBoxIndex = this.parentNode.parentNode.id.replace(/[^d]/g,'');
		var tmpFromBox;
		var tmpToBox;		
		if(this.value.indexOf('>')>=0){
			tmpFromBox = fromBoxArray[selectBoxIndex];
			tmpToBox = toBoxArray[selectBoxIndex];			
		}else{
			tmpFromBox = toBoxArray[selectBoxIndex];
			tmpToBox = fromBoxArray[selectBoxIndex];	
		}
		
		for(var no=0;no<tmpFromBox.options.length;no++){
			tmpToBox.options[tmpToBox.options.length] = new Option(tmpFromBox.options[no].text,tmpFromBox.options[no].value);			
		}	
		
		tmpFromBox.options.length=0;
		
	}
	
	
	
	function createMovableOptions(fromBox,toBox,totalWidth,totalHeight,labelLeft,labelRight)
	{		
		fromObj = document.getElementById(fromBox);
		toObj = document.getElementById(toBox);
		

		
		fromObj.ondblclick = moveSingleElement;
		toObj.ondblclick = moveSingleElement;

		
		fromBoxArray.push(fromObj);
		toBoxArray.push(toObj);
		
		var parentEl = fromObj.parentNode;
		
		var parentDiv = document.createElement('DIV');
		parentDiv.className='multipleSelectBoxControl';
		parentDiv.id = 'selectBoxGroup' + selectBoxIndex;
		parentDiv.style.width = totalWidth + 'px';
		parentDiv.style.height = totalHeight + 'px';
		parentEl.insertBefore(parentDiv,fromObj);
		
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		fromObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelLeft;
		subDiv.appendChild(label);
		
		subDiv.appendChild(fromObj);
		subDiv.className = 'multipleSelectBoxDiv';
		parentDiv.appendChild(subDiv);
		
		
		var buttonDiv = document.createElement('DIV');
		buttonDiv.style.verticalAlign = 'middle';
		buttonDiv.style.paddingTop = (totalHeight/2) - 50 + 'px';
		buttonDiv.style.width = '30px';
		buttonDiv.style.textAlign = 'center';
		parentDiv.appendChild(buttonDiv);
		
		var buttonRight = document.createElement('INPUT');
		buttonRight.type='button';
		buttonRight.value = '>';
		buttonDiv.appendChild(buttonRight);	
		buttonRight.onclick = moveSingleElement;	
		
		var buttonAllRight = document.createElement('INPUT');
		buttonAllRight.type='button';
		buttonAllRight.value = '>>';
		buttonAllRight.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllRight);		
		
		var buttonLeft = document.createElement('INPUT');
		buttonLeft.style.marginTop='10px';
		buttonLeft.type='button';
		buttonLeft.value = '<';
		buttonLeft.onclick = moveSingleElement;
		buttonDiv.appendChild(buttonLeft);		
		
		var buttonAllLeft = document.createElement('INPUT');
		buttonAllLeft.type='button';
		buttonAllLeft.value = '<<';
		buttonAllLeft.onclick = moveAllElements;
		buttonDiv.appendChild(buttonAllLeft);
		
		var subDiv = document.createElement('DIV');
		subDiv.style.width = (Math.floor(totalWidth/2) - 15) + 'px';
		toObj.style.width = (Math.floor(totalWidth/2) - 15) + 'px';

		var label = document.createElement('SPAN');
		label.innerHTML = labelRight;
		subDiv.appendChild(label);
				
		subDiv.appendChild(toObj);
		parentDiv.appendChild(subDiv);		
		
		toObj.style.height = (totalHeight - label.offsetHeight) + 'px';
		fromObj.style.height = (totalHeight - label.offsetHeight) + 'px';

			
		selectBoxIndex++;
		
	}
	
	
	
	</script>

然后将下面的代码放在页面的<body>标签内:

 
<form method="post" action="multiple_select.html">
<select multiple name="fromBox" id="fromBox">
	<option value="3">Finland</option>
	<option value="4">France</option>
	<option value="6">Mexico</option>
	<option value="1">Norway</option>
	<option value="5">Spain</option>	
	<option value="2">United Kingdom</option>
</select>
<select multiple name="toBox" id="toBox">
	<option value="12">Canada</option>
	<option value="13">Germany</option>
	<option value="11">United States</option>
</select>
</form>
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>
<p>You move elements by clicking on the buttons or by double clicking on select box items</p>

配置方法:
(1)用类似下面的代码创建两个多选列表

 
<select multiple name="fromBox" id="fromBox">
  <option value="3">Finland</option>
  <option value="4">France</option>
  <option value="6">Mexico</option>
  <option value="1">Norway</option>
  <option value="5">Spain</option>  
  <option value="2">United Kingdom</option>
</select>
<select multiple name="toBox[]" id="topBox">
  <option value="12">Canada</option>
  <option value="13">Germany</option>
  <option value="11">United States</option>
</select>

(2)用下面的javascript代码初始化设置:

 
<script type="text/javascript">
createMovableOptions("fromBox","toBox",500,300,'Available countries','Selected countries');
</script>

参数说明如下:
"fromBox" – 第一个多选列表的id(<select multiple name="fromBox" id="fromBox">)
"toBox" – 第二个多选列表的id(<select multiple name="toBox[]" id="toBox">)
500 – 控件的总宽度
300 – 控件的总高度
"Available countries" – 第一个多选列表的显示名称
"Selected countries" – 第二个多选列表的显示名称

提交表单的方法:

当提交表单时,我们希望只有选中的选项值被提交,所以需要一些javascript代码进行一些小的处理。

先在form标签中加入提交事件的处理:

<FORM onsubmit="selectItem()">

再加一段javascript代码:

 
function selectItem()
	{
		var obj = document.getElementById('toBox[]');
		for(var no=0;no<obj.options.length;no++){
			obj.options[no].selected = true;
		}
	}

Javascript 中父窗口与子窗口的交互

有时我们需要在父窗口和子窗口中进行交互,比如在子窗口中上传完文件,将上传的结果返回到父窗口中。本文介绍的就是一个简单的交互实例。如果你的头脑够灵活,完全可以举一反三。

Javascript 中父窗口与子窗口的交互 – 示例

 
<script type="text/javascript">
<!--
function openWindow()
{
	newWindow = window.open('','newWindow','height=300,width=300,scrollbars=auto');  
	if (newWindow != null)
	{
       var windowHTML= "<html><head><title>preview</title></head>";
       windowHTML += "<body><h1 align='center'>";
       windowHTML += "这是子窗口!</h1><hr><div align='center'><form action='#' method='get'>";
       windowHTML += "<input type='button' value='将父窗口的背景设为红色' onclick='window.opener.document.body.style.backgroundColor="red";' /><br>";
       windowHTML += "<br ><input type='button' value='关闭' onclick='self.close();' />";
       windowHTML += "</form></div></body></html>";

       newWindow.document.write(windowHTML);
       newWindow.focus();
    }
}
//-->
</script>
 
<input value='打开子窗口' onclick="openWindow();" type="button">
<input type="button" value="将子窗口的背景设为蓝色" onclick="if (window.newWindow){newWindow.document.bgColor='blue';newWindow.focus();}" />

Javascript 预览代码

在我们编写了客户端代码,如 css、javascript、(x)html后,通常需要进行调试,而本代码可以让您在新打开的窗口中预览,方便及时修改。同时也可以用于代码演示。

Javascript 预览代码 – 示例

 
<textarea cols="70" rows="20" id="code"></textarea>

<script type="text/javascript">
<!--
function openWindow()
{
	newWindow = window.open('','newWindow','height=300,width=500,scrollbars=auto');  
	if (newWindow != null)
	{
		var windowHTML= document.getElementById('code').value;

		newWindow.document.write(windowHTML);
		newWindow.focus();
	}
}
//-->
</script>

<br /><br />
<input value='预览代码' onclick="openWindow();" type="button" />