1. 案例:按钮开窗口
概念:
window.open(url, target)
方法可以开启一个新的窗口。- p1:开启的新的窗口的url地址,开启空白页面使用
about:blank
。 - p2:新窗口的开启方式
- 返回值:新窗口对象
- p1:开启的新的窗口的url地址,开启空白页面使用
document.oquerySelector()
方法可以从页面端抓取元素- p1:CSS3风格的选择器,这里使用字符串格式。
- 返回值:从页面端抓取到的元素,如果抓取失败,返回
null
。
元素.onclick = () => {}
为元素挂载点击事件,值是一个函数。document.write()
在页面上生成HTML代码- p1:在页面端生成的HTML代码内容,当然也可以是纯文本。
需求: 通过点击一个按钮,开启一个新的空白窗口,并且在新窗口的页面中写上"abc"
布局:
<button id="openWindowBtn" type="button">开窗</button>
复制代码
脚本:
onload = () => {
/*先从HTML页面上抓到这个按钮*/
let openWindowBtn = document.querySelector("#openWindowBtn");
/*给按钮挂载点击事件*/
openWindowBtn.onclick = () => {
/*使用open方法在新窗口开启一个空白页面*/
let newPage = open("about:blank", "_blank");
/*在新页面上写上abc*/
newPage.document.write("abc");
}
};
复制代码
2. 案例:按钮关窗口
概念:
- 关窗口用的方法就是
window.close()
,关窗关的是网页,一个浏览器可以同时开多个网页,如果浏览器当前只剩下一个网页,则浏览器也将退出。 - 如果关闭按钮设置在父子窗口关系下的子窗口中,则需要使用
window.top.close()
来关闭顶层窗口。
需求: 通过点击一个按钮,关闭当前窗口。
布局:
<button id="closeWindowBtn" type="button">关窗</button>
复制代码
脚本:
onload = () => {
let closeWindowBtn = document.querySelector("#closeWindowBtn");
/*箭头函数的函数体中,如果只有一行代码,可以省略大括号。*/
closeWindowBtn.onclick = () => close();
}
复制代码
火狐浏览器会提示"脚本不得关闭非脚本打开的窗口",则需要调整火狐浏览器的配置:在火狐地址栏输入 `about:config` 找到 `dom.allow_scripts_to_close_windows` 并改为 `true` 。
3. 案例:按钮转窗口
概念: 我们可以使用js来达到超级链接的效果,使用 window.location.href
属性来完成页面的跳转。
需求: 点击按钮跳入百度页面
布局:
<button id="gotoBaiduBtn" type="button">跳入百度</button>
复制代码
脚本:
onload = () => {
let gotoBaiduBtn = document.querySelector("#gotoBaiduBtn");
/*location=""也可以跳页,但是没有location.href=""专业。*/
gotoBaiduBtn.onclick = () => location.href = "http://www.baidu.com";
}
复制代码
4. 案例:按钮弹小窗
这次我们使用html内嵌
onclick
的方式来做,只是体验一下,实际开发中,不建议这样使用,html和js的耦合度越低越好。
概念:
window.alert()
:普通弹窗- p1:弹窗的提示字符串。
window.confrim()
:带取消按钮的弹窗- p1:弹窗的提示字符串。
- 返回值:当用户点击确定,返回
true
,点击取消,返回false
。
window.prompt()
:带输入框的弹窗- p1:弹窗的提示字符串。
- p2:弹窗中输入框的默认值。
- 返回值:当用户点击确定,返回用户在输入框中输入的值,点击取消,返回
null
。
布局:
<button type="button" onclick="fnAlert();">alert</button>
<button type="button" onclick="fnConfirm();">confirm</button>
<button type="button" onclick="fnPrompt();">prompt</button>
复制代码
脚本:
function fnAlert(){
alert("你好");
}
function fnConfirm(){
let result = confirm("你好");
console.log(result);
}
function fnPrompt(){
let result = prompt("请输入阅读密码", "123");
console.log(result);
}
复制代码