BOM下的属性和方法---上
-------------BOM------------------------------------------------
三个系统对话框
浏览器可以通过alert()、confirm()和prompt()方法可以调用系统对话框向用户显示信息。
//弹出警告 alert(“Lee”); //直接弹出警告框 //提示框 //确定和取消 confirm(“请确定或者取消”); if(confirm((“请确定或者取消”)){ alert(“您按了确定！”); //按确定返回true }else{ alert(“您按了取消！”) //按取消返回false } //输入带输入提示框 var num = prompt(“请输入一个数字”, 0); //两个参数,一个提示,一个值 alert(num); //得到输入的值 //prompt 输入的内容 输入的都是字符串。在网页上所有的输入的内容都是字符串。 var num1 = prompt('请输入第一个数', 100); var num2 = prompt('请输入第二个数', 100); var rse = confirm('确定计算' + num1 + '+' + num2 + '?'); if(rse){ alert(num1 + num2); // 100100 （假设输入的都是100） alert(Number(num1) + Number(num2));//结果 200(假设输入的是100) //所有网页上输入的内容都是以字符串的形式，如果要进行运算必须转换成Number类型 }else{ alert('您取消了！'); }
一个方法open
window.open
3、open方法
// window.open()
//
/*
open()
第一个参数：url 打开新窗口，加载该url
第二个参数：任意字符串 给你打开的新窗口起一个名字
第三个参数：width,height是窗口的宽高
top,left 是以屏幕左上角为原点
*/
window.onload = function(){ var oBtn = document.getElementById("btn1"); oBtn.onclick = function(){ open("https://www.baidu.com", "baidu", "width=400,height=400,left=200,top=200"); }
window.open() 方法可以导航到一个特定的URL，也可以打开
一个新的浏览器窗口，一般可以接受三个参数:
1.要加载的URL
2.窗口的名称或者窗口的目标
3.一个特性的字符串
open(“http://www.baidu.com”); //新建页面并打开百度 open(“http://www.baidu.com”, “baidu”); //新建页面并命名窗口并打开百度 open(“http://www.baidu.com”, “_parent”); //在本页窗口打开,_blank是新建
【注】不命名会每次打开新窗口，命名的第一次打开新窗口,之后在这个窗口中加载。
第三个参数字符串中的参数说明：
left , top 都是相对于屏幕窗口左上角，而不是浏览器窗口。
open三个参数都是以字符串的形式。
既open(字符串，字符串，字符串)；字符串可以直接用引号赋值' '也可用 其他类型用+拼接最后得到字符串。
open('http://www.baidu.com','baidu','width=400,height=400,top=200,left=200’);
//open本身返回子窗口的window对象
var box = open();
box.alert('');//可以指定弹出的窗口执行 alert();
---娱乐---------利用open攻击代码：----------------------
--------------------利用open攻击代码：end--------------------------------
子窗口操作父窗口（火狐支持——了解即可）IE11也支持
opener属性
document.onclick = function(){ opener.document.write(“子窗口让我输出的!”); }
代码示例：
父网页：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 9pt;"> }
</style>
<script>
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
open("sub.html", "子窗口", "width=400,height=400,left=200,top=200");
//点击按钮时利用 window下的open方法打开一个子名字叫 子网页 ，宽400px，高400px，距离屏幕左边的位置200px，
//距离屏幕上边的距离200px 的网页。
}
}
</script>
</head>
<body>
<h1>父窗口</h1>
<button id = 'btn1'>打开子窗口</button>
</body>
</html>
子网页代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
font-size: 9pt;"> }
</style>
<script>
/*
【注】opener是火狐兼容
如果有父窗口打开子窗口这件事情发生，
在子窗口会产生一个对象 opener
opener是window对象，是打开当前窗口的 父窗口的 window对象
*/
window.onload = function(){
var oBtn = document.getElementById("btn1");
oBtn.onclick = function(){
// alert(opener);
opener.document.write("hello world");
//所以点击子网页（窗口）的 按钮 向页面输出 hello world 并不会输入到子窗口，而是输出到了父网页（窗口）中
}
}
</script>
</head>
<body>
<h1>子窗口</h1>
<button id = 'btn1'>按钮</button>
</body>
</html>
浏览器效果：
两个对象 history，location
history对象
【history对象】
history对象是window对象的属性，它保存这用户上网的记录,从窗口被打开的那一刻算起。
7.1.history对象的属性和方法
属性
history.length;//history对象中的记录数
方法
history.back(); //前往浏览器历史条目前一个URL,类似后退
history.forward(); //前往浏览器历史条目下一个URL,类似前进
history.go(num); //浏览器在history对象中向前或向后
history对象
history对象的属性
history.length
返回，当前窗口的历史记录，只要关闭当前窗口就没有了。
history.length 与 window.history.length 相同说明history是window下的属性，history也是
个对象（js里一切皆对象），所以它下面也有属性和方法
history对象的方法
history.back() 返回上一条记录
history.forward() 前进到下一条记录
history.go(num)
可以传参
正整数 2 前进两条记录
负整数 2 后退两条记录
0 刷新页面
只要两次的url不一样就会产生历史记录（history）
代码示例：
<script>
/*
history对象
history对象的属性
history.length
返回，当前窗口的历史记录，只要关闭当前窗口就没有了。
history对象的方法
history.back() 返回上一条记录
history.forward() 前进到下一条记录
history.go(num)
可以传参
正整数 2 前进两条记录
负整数 2 后退两条记录
0 刷新页面
*/
// alert(history === window.history);
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = function(){
/*
只要两次url不一样，就会产生历史记录。
*/
alert(history.length);
}
}
//返回上一条
function backFunc(){
history.back();
}//返回下一条
function forwardFunc(){
history.forward();
}
//自定义返回第几条历史，可以存入参数
function goFunc(){
history.go(2);
}
</script>
</head>
<body>
<button id = 'btn1'>展示有几条历史记录</button>
<button onclick = "backFunc();">back</button>
<button onclick = "forwardFunc();">forward</button>
<button onclick = "goFunc();">go</button>
</body>
</html>
浏览器效果：
location对象
location是BOM对象之一，它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性;所以window.location和document.location等效。
地址栏 内的内容是 url （全球资源定位器）。
location对象下的方法 （函数）
location.assign(url) 当前窗口页面跳转，会产生历史记录
location.replace(url) 页面替换，并不会产生历史记录
location.reload() 页面刷新
location.reload(true) 不经过浏览器缓存，直接从服务器上重新加载该也没。强制重载。
自己代码示例：
<title>location对象的方法（函数）</title>
<script>
function reloadFun(){
//相当于浏览器的 刷新 按钮，重新加载的功能（用代码的方式）
location.reload();
}
function assginFun(){
//打开一个网址，并产生历史记录，这种行为的表现就是 浏览器的 后退 按钮
//可以点击，进行后退操作。
location.assign('https://www.baidu.com');
}
function replaceFun(){
//打开一个网址，不产生历史记录，这种行为的表现就是 浏览器的 后退 按钮
//不可以点击，无法进行后退操作。相当与刚刚打开里一个全新的页面。
location.replace('https://www.baidu.com');
}
</script>
</head>
<body>
<button onClick="reloadFun()">reload页面刷新</button>
<button onClick="assginFun()">assgind打开页面并产生记录</button>
<button onClick="replaceFun()">replace打开页面不产生记录</button>
</body>
浏览器效果：
location对象的方法（函数）代码示例：
<script>
/*
下述location指向的是同一个对象。
location 窗口上的地址栏对象。
*/
// alert(window.location === window.document.location);
//
// location
/*
location的函数（方法）
location.assign(url) 当前窗口页面跳转，会产生历史记录
location.replace(url) 页面替换，并不会产生历史记录
location.reload() 页面刷新
location.reload(true) 不经过浏览器缓存，直接从服务器上重新加载该页面。强制重载。
*/
/*
url 全球资源定位器
*/
function btnClick(){
// location.assign("https://www.baidu.com");
// location.replace("https://www.baidu.com");
location.reload();
}
</script>
</head>
<body>
<button onclick = 'btnClick();'>按钮</button>
</body>
location对象的属性（个别属性需要再服务器环境下才能测试）
代码示例1：
<script>
/*
下述location指向的是同一个对象。
location 窗口上的地址栏对象。
*/
/*
url 全球资源定位器
协议://主机名:端口号/路径/?查询字符串#锚点
protocol://host:port/pathname/?search#hash
*/
/*
location下的属性
协议 protocol
hostname 主机名 域名/IP www.baidu.com/61.135.169.121
IP：上网设备所在网络的地址。唯一的。
pathname 路径
search 查询字符串(了解)
整个url后面，通过?拼接的部分
hash 锚点
port 端口号
在本地电脑上，给每一个正在使用网络的软件，分配一个编号，叫做端口号。
host IP:端口号
(浏览器 8080 FTP 20，22)
*/
// alert(location.protocol)
// alert(location.hostname);
// alert(location.pathname);
// alert(location.search);
// alert(location.hash);
alert(location.port);
</script>
</head>
<body>
</body>
完整的url
未完结（内容过长_超限）---请查看 BOM下的属性和方法---下
浙公网安备 33010602011771号