Window对象
Window 对象表示浏览器中打开的窗口
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象
window.frames 返回窗口中所有命名的框架对应的window对象
parent是父窗口（如果窗口是顶级窗口，那么parent==self==top）
top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe）
self是当前窗口（等价window）
opener是用open方法打开当前窗口的那个窗口
|
<script type="text/javascript">
//需要将父窗口的一些数据传递给子窗口
function sendToChild(){
//得到父窗口的某些控件
var inputbox= window.document.getElementById("inputbox");
//然后得到其值
var text= inputbox.value;
alert(text);
//得到子窗口
var childwindow=window.frames[0];
//获得子窗口控件
var div_child=childwindow.document.getElementById("showmsg");
//让控件显示text,innerHTML 浏览器会自动去识别，innerTEXT就是原样输出
// div_child.innerHTML ="<font size=7> hellow </font>";
//div_child.innerText = "<font size=7> hellow </font>";
//将值给子窗口
div_child.innerHTML=text;
}
</script>
I am a out html page.<br/>
<input type="text" id="inputbox" name="username" value="aaa" />
<input type="button" value="send" onclick="sendToChild()" />
<iframe id="child" src="02inner.html"></iframe>
<div id="wait_msg_back">hhh</div>
|
<script type="text/javascript">
function sendBackToParent(){
//数据得到
// var inputbox=window.document.getElementById("input");
// var text=inputbox.value;
var text=window.document.getElementById("input").value;
alert(text);
//找到父窗口
var parent_window=window.parent;
//数据发回去
var wait_msg_back=parent_window.document.getElementById("wait_msg_back");
wait_msg_back.innerHTML=text;
}
</script>
I am a inner html page.<br>
<div id="showmsg">hhh</div>
<input type="text" id="input" />
<input type="button" onClick="sendBackToParent()" value="sendback"/>
|
|
<script type="text/javascript">
<!--
function openwindow(){
window.open("02inner.html");
}
//-->
</script>
|
<script type="text/javascript">
function sendBackToOpenner(){
var openwindow=window.opener; //这里获得的是前面打开这个网页的窗口；；超链接也有这个效果
openwindow.document.getElementById("opendiv").innerHTML=window.document.getElementById("input").value;
}
</script>
|
|
<script type="text/javascript">
<!--
function openmemberTypewindow(){
window.showModalDialog("9.html");
//打开另外一个网页窗口
}
//-->
</script>
|
|
与对话框有关的方法
window.alert(String)
Boolean window.confirm(String)
String window.prompt(String)
|
<script type="text/javascript">
function openmemberTypewindow(){
window.showModalDialog("list.html");
}
function openconfirmDialog(){
var confirmvalue=window.confirm("最后确认，是否要提交？");
//alert(confirmvalue); //查看是否提交成功
if(confirmvalue){
}else{
//不提交，什么都不做
}
}
function openpromptDialog(){
var age=window.prompt("请输入您的姓名","18");
alert(age);
}
</script>
|
<input type="button" onclick="openmemberTypewindow()" value="选择客户类型" />
<input type="button" onclick="openconfirmDialog()" value="确认是否提交" / >
<input type="button" onclick="openpromptDialog()" value="输入年龄">
//点击不同按钮会显示出对应的对话框
|
|
mainwindow.html
<script type="text/javascript">
<!--
function openmemberTypewindow(){
var ret = window.showModalDialog("list.html");
//list页面关闭后window.returnValue返回值给ret
//alert(ret);
window.document.getElementById("membertype").value = ret;
}
//-->
function openconfirmDialog(){
var confirmvalue=window.confirm("最后确认，是否要提交？");
//alert(confirmvalue); //查看是否提交成功
if(confirmvalue){
}else{
//不提交，什么都不做
}
}
function openpromptDialog(){
var age=window.prompt("请输入您的姓名","18");
alert(age);
}
</script>
<input type="text" id="membertype" />
<input type="button" onclick="openmemberTypewindow()" value="选择客户类型" />
<input type="button" onclick="openconfirmDialog()" value="确认是否提交" / >
<input type="button" onclick="openpromptDialog()" value="输入年龄">
|
list.html
<script type="text/javascript">
//方式一
function sendtype(form)
{
//将用户在这里选择的type给回去
if (form.elements[0].checked)
window.returnValue = form.elements[0].value;
else if (form.elements[1].checked)
window.returnValue = form.elements[1].value;
else if (form.elements[2].checked)
window.returnValue = form.elements[2].value;
else if (form.elements[3].checked)
window.returnValue = form.elements[3].value;
//window.returnValue = "vip";
window.close();
return false; //boolean true表示可以提交到服务器 false 不提交
}
//方式二
function sendtype2(radioobj){
alert(radioobj.value);
window.returnValue = radioobj.value;
window.close();
}
</script>
<form method="post" action="02inner.html" onsubmit="return sendtype(this)">
<!--action后面跟提交后要转到处理的页面-->
<input type="radio" name="membertype" value="金" onclick="sendtype2(this)">金<br>
<input type="radio" name="membertype" value="银">银<br>
<input type="radio" name="membertype" value="铜">铜<br>
<input type="radio" name="membertype" value="铁">铁<br>
<input type="submit" value="提交" />
</form>
|
setInterval和setTimeout
|
<script type="text/javascript">
function bomb(){
alert("炸弹已经爆炸！！");
}
function start_bomb(){
setTimeout("bomb()",3000); //bomb函数执行一次，3000ms后执行
}
function start_bomb2(){
setInterval("bomb()",3000); //bomb函数一直执行，时间间隔3000ms
}
</script>
|
<input type="button" onclick="start_bomb()" value="启动一次"/>
<input type="button" onclick="start_bomb2()" value="启动多次"/>
|
setTimeout广告漂浮
|
<script type="text/javascript">
function changePosition(){
var adv = document.getElementById("adv");
adv.style.top=Math.random()*600+"px";
adv.style.left=Math.random()*1000+"px";
}
setInterval("changePosition()",1000);
</script>
|
<div id="adv" style="position:absolute; top:0.5cm; left:1cm">
<a href="http://www.baidu.com" target="_blank"><img src="cartoon.gif" /></a>
</div>
|
|
<script>
window.onload=function(){
//定时器每秒调用一次fnDate()
setInterval(function(){ fnDate(); }, 1000);
}
//js 获取当前时间
function fnDate(){
var oDiv=document.getElementById("div1");
var date=new Date();
var year=date.getFullYear();//当前年份
var month=date.getMonth();//当前月份
var data=date.getDate();//天
var hours=date.getHours();//小时
var minute=date.getMinutes();//分
var second=date.getSeconds();//秒
var time=year+"-"+fnW((month+1))+"-"+fnW(data)+" "+fnW(hours)+":"+fnW(minute)+":"+fnW(second);
oDiv.innerHTML=time;
}
function fnW(str){
var num;
str>10?num=str:num="0"+str;
return num;
}
</script>
|
<div id="div1"> </div>
|