使用JScript的innerHTML属性,可以获取或设置位于指定的 HTML 服务器控件的开始标记和结束标记之间的内容。这个属性现在在页面设计中很流行,因为它可以让静态的页面也能实现动态的效果。
如你可以让静态的页面也实现像ASP页面中的将顶部和底部分别存成一个文件再用include包含到页面中,实现模版的功能。下面看看如何实现:
先做好顶部和底部,如下:
-----------------------------顶部 top.html-------------------------------
<table width="100%" height="100" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">
<tr>
<td>这是顶部</td>
</tr>
</table>
-----------------------------------------------------------------
-----------------------------底部 bottom.html-------------------------------
<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">
<tr>
<td>这是底部</td>
</tr>
</table>
-----------------------------------------------------------------
然后将这两部分的代码分别用下面的格式存成JS文件:
-----------------------------顶部 top.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="blue">';
str=str+'<tr>';
str=str+'<td>这是顶部</td>';
str=str+'</tr>';
str=str+'</table>';
top.innerHTML=str;
-----------------------------------------------------------------
-----------------------------底部 bottom.js-------------------------------
var str;
str='<table width="100%" height="22" border="0" cellpadding="0" cellspacing="0" bgcolor="red">';
str=str+'<tr>';
str=str+'<td>这是底部</td>';
str=str+'</tr>';
str=str+'</table>';
bottom.innerHTML=str;
-----------------------------------------------------------------
下面我们看看要调用这两个部分的文件:
---------------------------------try.html--------------------------------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JScript中innerHTML的例子</title>
</head>
<body>
<!-- 顶部开始 -->
<div id="top"></div>
<!-- 顶部结束 -->
<!-- 主要内容开始 -->
页面主要内容
<!-- 主要内容结束 -->
<!-- 底部开始 -->
<div id="bottom"></div>
<!-- 底部结束 -->
<script language="javascript" src="top.js"></script>
<script language="javascript" src="bottom.js"></script>
</body>
</html>
-----------------------------------------------------------------
这样当你打开try.html的时候,就可看到顶部和底部都已经自动加进来了。
需要注意的是,在JS文件中的innerHTML前面的id名与要调用的页面中的id名要一至。例子中的top和bottom。
一旦你得到了表示窗口的变量,你就能通过各种方法来操纵它。JavaScript提供了许多方法与属性,我们可以使用它们来控制窗口。
移动、滚动、改变大小
下面的方法(N4+,IE4+)负责个定窗口的移动、滚动以及大小改变操作:
// 移动窗口的屏幕位置到指定的偏移x 、y(绝对移动)
window.moveTo(iX, iY)
// 移动窗口的屏幕位置到指定的偏移x 、y(相对移动)
window.moveBy(iX, iY)
// 滚动窗口的屏幕位置到指定的偏移x 、y(绝对滚动)
window.scrollTo(iX, iY)
// 滚动窗口的屏幕位置到指定的偏移x 、y(相对滚动)
window.scrollBy(iX, iY)
// 改变窗口大小到指定的高度与宽度(绝对改变大小)
window.resizeTo(iWidth, iHeight)
// 改变窗口大小到指定的高度与宽度(相对改变大小)
window.resizeBy(iX, iY)
注意,这些方法都属于window对象,所以它们智能在当前窗口或者其他可以引用的窗口被执行。如果你想动态设置窗口的位置和尺寸,就可以在窗口创建后使用move和resize方法。
很不一样的窗口哦!
不过要IE5.5+或以上的浏览器才可以看到效果。
--------------------------------------------------------
<script language="JScript">
var oPopup = window.createPopup();
var oPopupBody = oPopup.document.body;
oPopupBody.style.border = "0px none"
oPopupBody.bgColor='#c0c0c0'
oPopupBody.innerHTML = "<img src='http://www.blogbus.com/images/site/blogbus_logo.gif'>"
oPopup.show(600,30,88,32)
</script>
<FORM name="isc">
<table border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td nowrap height="11">
<select name="example" size="1" onChange="redirect(this.options.selectedIndex)">
<option selected>---Select1-------------</option>
<option>Webmaster Sites</option>
<option>News Sites</option>
</select>
<select name="stage2" size="1" onChange="redirect1(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select2--------------</option>
<option value=" " selected>---Select2--------------</option>
</select>
<select name="stage3" size="1" onChange="redirect2(this.options.selectedIndex)">
<option value=" " selected> </option>
<option value=" " selected>---Select3----------------</option>
<option value=" " selected>---Select3----------------</option>
</select>
<script>
<!--
var groups=document.isc.example.options.length
var group=new Array(groups)
for (i=0; i<groups; i++)
group[i]=new Array()
group[0][0]=new Option("---Select2---"," ");
group[1][0]=new Option("Now Select This One"," ");
group[1][1]=new Option("JavaScript","47");
group[1][2]=new Option("DHTML","46");
group[1][3]=new Option("CGI","45");
group[2][0]=new Option("Now Select This One"," ");
group[2][1]=new Option("General News","115");
group[2][2]=new Option("Technology News","116");
var temp=document.isc.stage2
function redirect(x){
for (m=temp.options.length-1;m>0;m--)
temp.options[m]=null
for (i=0;i<group[x].length;i++){
temp.options[i]=new Option(group[x][i].text,group[x][i].value)
}
temp.options[0].selected=true
redirect1(0)
}
var secondGroups=document.isc.stage2.options.length
var secondGroup=new Array(groups)
for (i=0; i<groups; i++) {
secondGroup[i]=new Array(group[i].length)
for (j=0; j<group[i].length; j++) {
secondGroup[i][j]=new Array() }}
secondGroup[0][0][0]=new Option("---Select 3---"," ");
secondGroup[1][0][0]=new Option("---Select 3---"," ");
secondGroup[1][1][0]=new Option("Now Select This One"," ");
secondGroup[1][1][1]=new Option("Website Abstraction"," ");
secondGroup[1][1][2]=new Option("JavaScript for the non programmer"," ");
secondGroup[1][1][3]=new Option("Java-Scripts.net"," ");
secondGroup[1][2][0]=new Option("Now Select This One"," ");
secondGroup[1][2][1]=new Option("Dynamic Drive"," ");
secondGroup[1][2][2]=new Option("Beginner\'s Guide to DHTML"," ");
secondGroup[1][2][3]=new Option("Web Coder"," ");
secondGroup[1][3][0]=new Option("Now Select This One"," ");
secondGroup[1][3][1]=new Option("CGI Resources","");
secondGroup[1][3][2]=new Option("Ada\'s Intro to CGI"," ");
secondGroup[2][0][0]=new Option("---Select 3---"," ");
secondGroup[2][1][0]=new Option("Now Select This One"," ");
secondGroup[2][1][1]=new Option("CNN"," ");
secondGroup[2][1][2]=new Option("MSNBC"," ");
secondGroup[2][1][3]=new Option("ABC News"," ");
secondGroup[2][2][0]=new Option("Now Select A Page"," ");
secondGroup[2][2][1]=new Option("News"," ");
secondGroup[2][2][2]=new Option("Wired"," ");
var temp1=document.isc.stage3
function redirect1(y){
for (m=temp1.options.length-1;m>0;m--)
temp1.options[m]=null
for (i=0;i<secondGroup[document.isc.example.options.selectedIndex][y].length;i++){
temp1.options[i]=new Option(secondGroup[document.isc.example.options.selectedIndex][y][i].text,secondGroup[document.isc.example.options.selectedIndex][y][i].value)
}
temp1.options[0].selected=true
}
function redirect2(z){
window.location=temp1[z].value
}
//-->
</script>
</td>
</tr>
</table>
</FORM>
一段可以将内容复制到用户的剪贴板的代码:
1.将下面的代码复制到 <head> 内
---------------------------------------------------------------
<style>
.highlighttext{
background-color:yellow;
font-weight:bold;
}
</style>
<script language="Javascript">
<!--
//specify whether contents should be auto copied to clipboard (memory)
//Applies only to IE 4+
//0=no, 1=yes
var copytoclip=1
function HighlightAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
if (document.all&©toclip==1){
therange=tempval.createTextRange()
therange.execCommand("Copy")
window.status="Contents highlighted and copied to clipboard!"
setTimeout("window.status=''",1800)
}
}
//-->
</script>
--------------------------------------------------------------
2.将下面的代码复制到 <body>
--------------------------------------------------------------
<form name="test">
<a class="highlighttext" href="javascript:HighlightAll('test.select1')">Select All</a><br>
<textarea name="select1" rows=10 cols=35 >This is some text. This is some text. This is some text. This is some text.</textarea>
</form>