第二十八章在浏览器中使用 JavaScript基础

JavaScript 是一种编程语言，主要用于在浏览器中显示的网页。您还可以显示一个对话框以向用户显示一些消息或要求输入。您还可以从 JavaScript 操作网页上显示的表单。在这里，我将解释在浏览器中使用 JavaScript 时需要了解的有用知识。

28-1 显示对话框（window.alert、window.prompt、window.confirm）
28-2 打开新标签页或窗口 (window.open)
28-3 关闭选项卡和窗口 (window.close)
28-4 指定时间后执行一次（window.setTimeout）
28-5 每隔指定时间重复一次（window.setInterval）
28-6 获取窗口宽高（window.innerWidth、window.outerWidth等）
28-7 更改窗口宽度和高度 (window.resizeTo,window.resizeBy)
28-8 获取显示器的设备像素比（window.devicePixelRatio）
28-9 显示打印对话框 (window.print)

28-1 显示对话框（window.alert、window.prompt、window.confirm）

使用 window 对象提供的 alert 、 prompt 和 confirm 方法可以在浏览器中显示对话框。alert 方法显示一个警告对话框，prompt 方法显示一个输入对话框，confirm 方法显示一个确认对话框。在这里，我将解释如何使用窗口对象提供的方法在浏览器中显示对话框。

显示警告对话框（window.alert 方法）

您可以通过执行窗口对象的警报方法来显示警报对话框。警告对话框用于向用户显示某种消息。格式如下。

window.alert(msg);

需要将要在对话框中显示的文本指定为参数中的字符串。

警报对话框是一个带有关闭对话框的单个按钮的对话框。模态对话框会阻止浏览器执行任何其他操作，直到对话框被关闭。

执行窗口对象的方法时可以省略 window. 部分，因此使用以下方法之一。

window.alert('保存失败');
alert('保存失败');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>[window.alert]Sample</p>

<input type="button" value="button" id="mybtn">

<script>
function butotnClick(){
    alert('保存失败');
}

let button = document.getElementById('mybtn');
button.addEventListener('click', butotnClick);
</script>

</body>
</html>

画面に表示されているボタンをクリックすると警告ダイアログが表示されます。

单击对话框中显示的“确定”按钮关闭对话框。

显示输入对话框（window.promt 方法）

可以通过执行 window 对象的 promt 方法来显示输入对话框。输入对话框显示一个文本框，用于提示用户进行一些输入。格式如下。

value = window.prompt(msg[, default]);

在第一个参数中指定要在对话框中显示的文本作为字符串。为可选的第二个参数输入文本框中显示的默认值。返回值将包含用户输入的值。

输入对话框是一个包含用于用户输入的单个文本框以及“确定”和“取消”按钮的对话框。模态对话框会阻止浏览器执行任何其他操作，直到对话框被关闭。

执行窗口对象的方法时可以省略 window. 部分，因此使用以下方法之一。

let address = window.prompt('请提供您的地址');
let address = alert('请提供您的地址');

如果要在显示的文本框中输入初始值，请在第二个参数中指定。

let address = alert('请提供您的地址', '青岛市');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>[window.promt]的测试页面</p>

<input type="button" value="button" id="mybtn">

<script>
function butotnClick(){
    let name = prompt('请输入您的姓名');
    console.log(name);
}

let button = document.getElementById('mybtn');
button.addEventListener('click', butotnClick);
</script>

</body>
</html>

单击屏幕上显示的按钮以显示输入对话框。

在对话框的文本框中输入文本，然后单击“确定”按钮关闭输入对话框。然后它将用户输入的文本打印到控制台。

无论是否在文本框中输入任何内容，单击“取消”按钮都会关闭输入对话框。在这种情况下，promt 方法的返回值将包含 null 。

显示确认对话框（window.confirm 方法）

您可以通过执行 window 对象的 confirm 方法来显示确认对话框。确认对话框显示两个按钮，一个“确定”按钮和一个“取消”按钮，用于让用户选择是否同意。格式如下。

value = window.confirm(msg);

确认对话框是显示“确定”和“取消”按钮的对话框。模态对话框会阻止浏览器执行任何其他操作，直到对话框被关闭。

执行窗口对象的方法时可以省略 window. 部分，因此使用以下方法之一。

let check = window.confirm('你确定要删除吗？');
let check = alert('你确定要删除吗？');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.confirm ]测试示例页面。</p>

<input type="button" value="button" id="mybtn">

<script>
function butotnClick(){
    let check = confirm('移动到另一个站点。你确定吗？');
    console.log(check);
}

let button = document.getElementById('mybtn');
button.addEventListener('click', butotnClick);
</script>

</body>
</html>

单击屏幕上显示的按钮以显示确认对话框。

单击“确定”按钮关闭确认对话框。将 true 打印到控制台以获取 OK 按钮。

单击“取消”按钮关闭确认对话框。为取消按钮向控制台打印 false。

28-2 打开新标签页或窗口 (window.open)

通过执行window对象的open方法，可以打开一个新标签页或新窗口，并显示指定URL的网页。您还可以通过将其指定为参数来设置新窗口的宽度和高度。在这里，我将解释如何使用 window.open 方法打开一个新的选项卡或窗口。

打开新标签页或窗口

当执行窗口对象的打开方法时，您可以打开一个新的选项卡或窗口，并打开指定为参数的 URL 的网页。格式如下。

let newwin = window.open(url, [name, [options]]);

第一个参数是要在新选项卡或窗口中打开的网页的 URL。可选的第二个参数指定新窗口的名称。它将被设置为新窗口的 window.name 属性。可选的第三个参数提供附加信息，例如窗口的宽度和工具栏的存在与否。返回表示新窗口的 winodw 对象。

URL 可以指定为以 http:// 开头的格式，或者如果页面位于同一站点内，则可以指定相对路径。

let newwin = window.open('https://www.flashyonder.com/');
let newwin = window.open('subdir/sample.html');

在执行window对象的方法时可以省略window.部分，这样也可以像下面这样执行。

let newwin = open('https://www.flashyonder.com/');
let newwin = open('subdir/sample.html');

如果您将空字符串指定为 URL，将在新窗口中显示空白页面。

let newwin = open('');

没有选项可以指定是在新选项卡还是在新窗口中打开。当我实际尝试时，如果我指定了窗口的宽度或高度，它会在一个新窗口中打开，否则它会作为一个新选项卡打开。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.open]的示例页面。</p>

<input type="button" value="button1" id="mybtn1">
<input type="button" value="button2" id="mybtn2">
<input type="button" value="button3" id="mybtn3">

<script>
let button1 = document.getElementById('mybtn1');
button1.addEventListener('click', () => {
    open('https://www.flashyonder.com/');
});

let button2 = document.getElementById('mybtn2');
button2.addEventListener('click', () => {
    open('28-2test.html');
});

let button3 = document.getElementById('mybtn3');
button3.addEventListener('click', () => {
    open('');
});
</script>

</body>
</html>

屏幕上显示三个按钮。单击每个按钮都会打开一个新选项卡，并在 open 方法的第一个参数中指定的 URL 处显示页面。

当您按下第一个按钮时，将打开一个新选项卡并显示以 https://… 格式指定的外部站点。

按第二个按钮将打开一个新选项卡并显示同一站点内由相对路径指定的网页。

打开新选项卡后，按第三个按钮会显示空白页。

按名称打开窗口

window.open 方法的第二个参数允许您设置新打开窗口的名称。

let newwin = open('sample.html', 'mywindow');

如果指定窗口名称并执行 window.open 方法，如果指定名称的窗口已经打开，则指定的 URL 将在现有窗口中打开，而不是打开新窗口。如果调用 window.open 方法时指定名称的窗口没有打开，或者第二个参数被省略，则将打开一个新窗口。

此外，有时希望始终在新窗口中打开，但您需要为第二个参数指定一个名称以便指定第三个参数。在这种情况下，指定“_blank”作为窗口的名称。始终打开一个新窗口。

let newwin = open('sample.html', '_blank');

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[按名称打开窗口]示例页面。</p>

<input type="button" value="button1" id="mybtn1">
<input type="button" value="button2" id="mybtn2">
<input type="button" value="button3" id="mybtn3">
<input type="button" value="button4" id="mybtn4">

<script>
let button1 = document.getElementById('mybtn1');
button1.addEventListener('click', () => {
    open('test.html');
});

let button2 = document.getElementById('mybtn2');
button2.addEventListener('click', () => {
    open('test.html', 'workwindow');
});

let button3 = document.getElementById('mybtn3');
button3.addEventListener('click', () => {
    open('test2.html', 'workwindow');
});

let button4 = document.getElementById('mybtn4');
button4.addEventListener('click', () => {
    open('test.html', '_blank');
});
</script>

</body>
</html>

屏幕上显示四个按钮。单击相应的按钮将执行打开方法。

第一个按钮省略了 open 方法的第二个参数，因此每次单击按钮都会打开一个新选项卡。

第二个和第三个按钮具有不同的 URL，这是 open 方法的第一个参数，但指定与第二个参数相同的选项卡名称。如果尚未打开任何选项卡，则第一次单击第二个按钮将打开一个新选项卡。

当第二个按钮打开的选项卡仍然打开时，再次单击第二个按钮会激活已经打开的同名选项卡，而不是打开新选项卡，因为同名选项卡已打开。

如果在第二个按钮打开的选项卡仍处于打开状态时单击第三个按钮，则在 open 方法的第二个参数中指定名称的选项卡已经打开，因此不是打开新选项卡而是激活具有相同名称的打开选项卡姓名。然后在激活的选项卡中打开在 open 方法的第一个参数中指定的 URL。

第四个按钮具有特殊名称“_blank”作为选项卡的名称。每次单击该按钮时都会打开一个新选项卡。

指定窗口的大小、工具栏是否存在等。

您可以使用 window.open 方法的第三个参数来指定要打开的窗口的大小、是否有工具栏等。为多个项目指定一个字符串，如“name1=value1,name2=value2,…”。

let newwin = open('a.html', 'my', 'name1=val1,name2=val2');

可以设置的项目如下。

left         屏幕左边缘到窗口左边缘的距离
top          屏幕顶部到窗口顶部的距离
width        窗口宽度
innerWidth   同上
height       窗口高度
innerHeight  同上
menubar      是否存在菜单栏(yes | no)  ※
toolbar      工具栏是否存在(yes | no)  ※
status       状态栏存在/不存在(yes | no)  ※
location     地址栏存在(yes | no)  ※
scrollbars   是否有滚动条（(yes | no)  ※
resizable    是否允许更改窗口大小(yes | no)  ※
noopener     是否允许从新窗口禁用原始窗口的操作(yes | no)
noreferrer   是否允许向 referrer 提供链接来源信息(yes | no)

设置项目很多，但即使更改当前设置，也不会反映 left、top、width(innerWidth)、height(innerHeight) 以外的与浏览器显示相关的设置项目。但是，只有在设置了宽度和高度时，left 和 top 才有效。与安全相关的 noopener 和 noreferrer 适用于 Chrome 和 Firefox。

如果要设置宽度和高度，请执行以下操作：

let option = 'width=200,height=200';
let newwin = open('a.html', 'my', option);

如果除了 width 和 height 之外还想设置 left 和 top ，请执行以下操作：

let option = 'width=200,height=200,left=300,top=100';
let newwin = open('a.html', 'my', option);

窗口中反映各个设置项的部分请参考下图。

为 noopener 和 noreferrer 设置 yes 或 no。

let newwin = open('a.html', 'my', 'noopener=yes');
let newwin = open('a.html', 'my', 'noreferrer=yes');

为 noopener 或 noreferrer 设置 yes 会导致 window.open 方法的返回值为 null 。因此，窗口或选项卡将打开，但原始窗口将无法与新窗口进行交互。另外，如果在新窗口端引用window.opener，则为null，因此无法从新窗口对原窗口进行操作。（如果你设置noreferrer为yes，noopener也是yes）。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[指定窗口的大小、工具栏是否存在等]示例页面。</p>

<input type="button" value="button1" id="mybtn1">

<script>
let button1 = document.getElementById('mybtn1');
button1.addEventListener('click', () => {
	let option = 'width=300,height=300,left=200,top=200'
    let newwin = open('test.html','mywindow', option);
});
</script>

</body>
</html>

单击屏幕上显示的按钮时，将打开一个具有指定宽度和高度以及指定位置的新窗口。

28-3 关闭选项卡和窗口 (window.close)

可以通过执行 window 对象的 close 方法来关闭使用 window.open 方法打开的选项卡或窗口。只能关闭由 JavaScript 代码打开的窗口。在这里，我将解释如何使用 window.close 方法关闭选项卡和窗口。

关闭选项卡或窗口

您可以通过调用窗口对象的关闭方法来关闭选项卡或窗口。格式如下。

window.close()

只有使用 window.open 方法打开的选项卡或窗口才能使用 window.close 方法关闭。

如果要关闭打开新窗口的原窗口，请在执行open方法时对返回值执行close方法。

let newwin = open('https://www.flashyonder.com/');
newwin.close();

要从 open 方法打开的窗口中关闭自身，请按如下方式执行 close 方法。

window.close();

如果 window.close 方法用于通过 window.open 方法以外的方法打开的窗口，则不执行任何处理，并向控制台输出警告消息，如下所示。

Chrome:
Scripts may close only the windows that were opened by them.

例如，即使在用户操作打开的窗口中执行window.close方法，或者从open方法打开的窗口中执行window.opener.close()关闭原来的窗口，窗口也不会打开。在不关闭的情况下，控制台中会显示上述消息。

示例代码

请看下面的示例。

sample.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.close]示例页面</p>

<input type="button" value="open" id="openbtn">
<input type="button" value="close" id="closebtn">

<script>
let newwin;

let openbutton = document.getElementById('openbtn');
openbutton.addEventListener('click', () => {
    newwin = open('test.html');
});

let closebutton = document.getElementById('closebtn');
closebutton.addEventListener('click', () => {
    newwin.close();
});
</script>

</body>
</html>

test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>

<h1>测试页面</h1>

<p>测试页面</p>

<input type="button" value="close" id="closebtn">

<script>
let closebutton = document.getElementById('closebtn');
closebutton.addEventListener('click', () => {
    close();
});
</script>

</body>
</html>

如果显示 sample.html 页面并单击屏幕上显示的打开按钮，将打开一个新选项卡并显示 test.html 页面。

在新标签页打开的情况下，单击原始标签页上显示的关闭按钮以关闭新标签页。

从 sample.html 页面打开一个新选项卡后，单击新选项卡中显示的 test.html 页面上的关闭按钮将关闭新选项卡本身。

28-4 指定时间后执行一次（window.setTimeout）

通过执行窗口对象的 setTimeout 方法，您可以在参数指定的时间过去后仅调用一次指定的函数。在这里，我们将解释如何使用 window.setTimeout 方法在指定时间过去后仅调用一次函数。

经过指定时间后执行一次

通过执行窗口对象的 setTimeout 方法，您可以在指定的时间过去后仅调用一次指定的函数。格式如下。

window.setTimeout(function[, delaytime])

第一个参数指定要调用的函数的名称。可选的第二个参数指定调用函数之前经过的时间（以毫秒为单位）。如果省略参数，则使用 0 并尽快调用该函数。

返回值将是这个定时器的标识 ID。setTimeout 的执行可以通过指定在返回值中获得的ID 执行window.clearTimeout 来取消，在此setTimeout 中指定的经过秒数已过之前。

setTimeout 方法启动计时器。该函数在经过的时间后调用一次。例如：

window.setTimeout(dispMsg, 5000);

function dispMsg(){
    alert('超时');
}

您还可以使用匿名函数来编写：

window.setTimeout(function(){
    alert('超时');
}, 5000);

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.setTimeout]示例页面。</p>

<input type="button" value="click" id="btn">

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    window.setTimeout(function(){
        alert('超时');
    }, 5000);
});
</script>

</body>
</html>

单击屏幕上显示的按钮将启动计时器，并在 5000 毫秒（5 秒）后显示一个警告对话框。

通过setTimeout方法取消函数调用

可以通过执行window对象的clearTimeout方法来取消setTimeout方法启动的定时器。格式如下。

window.clearTimeout(id)

第一个参数是要取消的计时器的 ID。这个id就是执行setTimeout方法时作为返回值得到的id。

例如：

let id = window.setTimeout(function(){
    alert('超时');
}, 5000);

window.clearTimeout(id);

如果 clearTimeouot 方法在 setTimeout 方法的自变量中指定的经过秒数过去之前执行并调用函数，则 setTimeout 方法启动的计时器将被取消。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[clearTimeout]示例页面。</p>

<input type="button" value="click" id="btnTimer">
<input type="button" value="cancel" id="btnCancel">

<script>
let timerid;

let btnTimer = document.getElementById('btnTimer');
btnTimer.addEventListener('click', function(){
    timerid = window.setTimeout(function(){
        alert('超时');
    }, 5000);
});

let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
    window.clearTimeout(timerid);
    console.log('取消')
});
</script>

</body>
</html>

当您点击屏幕上显示的点击按钮时，将在 5000 毫秒（5 秒）后显示一个警告对话框。

如果您在定时器中设置的 5000 毫秒还没有过去之前单击取消按钮，则具有指定 id 的定时器将被取消。

28-5 每隔指定时间重复一次（window.setInterval）

通过执行窗口对象的 setInterval 方法，您可以在每次经过一定时间后调用一个函数。当您希望定期执行某个流程时，此方法很方便。在这里，我们将解释如何使用 window.setInterval 方法以指定的时间间隔重复调用函数。

每隔指定时间重复执行

通过执行window对象的setInterval方法，可以按指定的时间间隔重复调用指定的函数。格式如下。

window.setInterval(function, delaytime);

第一个参数指定要调用的函数的名称。第二个参数指定调用函数之前经过的时间（以毫秒为单位）。

返回值将是这个定时器的标识 ID。您可以通过指定此 ID 并执行 window.clearInterval 来取消执行 setInterval。

执行 setInterval 方法启动定时器。每次经过的时间过去时都会调用一次该函数。例如：

window.setInterval(dispMsg, 5000);

function dispMsg(){
    console.log('5 seconds!');
}

还可以使用匿名函数来编写：

window.setInterval(function(){
    console.log('5 seconds!');
}, 5000);

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.setInterval]示例页面。</p>

<input type="button" value="click" id="btn">

<script>
let count = 5;
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    window.setInterval(function(){
        console.log('经过了'+count + '秒');
        count += 5;
    }, 5000);
});
</script>

</body>
</html>

单击屏幕上显示的按钮启动计时器并每 5000 毫秒（5 秒）向控制台输出一条消息。

通过setInterval方法取消函数调用

可以通过执行window对象的clearInterval方法来取消setInterval方法启动的定时器。格式如下。

window.clearInterval(id)

第一个参数是要取消的计时器的 ID。这个id就是执行setInterval方法时作为返回值得到的id。

例如：

let id = window.setInterval(function(){
    console.log('5 seconds!');
}, 5000);

window.clearInterval(id);

如果执行 setInterval 方法然后执行 clearInterval 方法，则 setInterval 将不会进行进一步的函数调用。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<p>这是一个[window.setInterval]示例页面。</p>

<input type="button" value="click" id="btnTimer">
<input type="button" value="cancel" id="btnCancel">

<script>
let count = 5;
let timerid;

let btnTimer = document.getElementById('btnTimer');
btnTimer.addEventListener('click', function(){
    timerid = window.setInterval(function(){
        console.log('经过了'+count + '秒');
        count += 5;
    }, 5000);
});

let btnCancel = document.getElementById('btnCancel');
btnCancel.addEventListener('click', function(){
    window.clearInterval(timerid);
    console.log('setInterval被取消了');
});
</script>

</body>
</html>

当您单击屏幕上显示的单击按钮时，控制台将每隔 5000 毫秒（5 秒）显示一条消息。

如果点击取消按钮，指定id的定时器将被取消，setInterval将不再调用该函数。

28-6 获取窗口宽高（window.innerWidth、window.outerWidth等）

我将解释如何使用 JavaScript 获取窗口的宽度和高度。通过引用window.outerWidth和window.outerHeight属性可以获取浏览器的宽高，通过window.innerWidth和window.innerHeight属性可以获取浏览器所在区域的宽高显示的内容增加。

获取窗口的宽度和高度

获取窗口宽高的属性有四个：

window.outerWidth   浏览器宽度
window.outerHeight  浏览器高度
window.innerWidth   内容显示区域的宽度
window.innerHeight  内容显示区域的高度

每个属性可以获得的宽度和高度请参考下图。

※但是我们在PC环境下实际测量的时候，测量出来的outerWidth和outerHeight比浏览器实际尺寸大了一个固定的尺寸。

如果显示滚动条，则 window.innerWidth 和 window.innerHeight 将是包含滚动条的大小。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>窗口宽度和高度</h1>

<p>点击按钮获取宽高</p>

<input type="button" value="Get size" id="btn">

<p>宽高参考以下属性</p>

<ul>
<li>window.outerWidth   浏览器宽度</li>
<li>window.outerHeight  浏览器高度</li>
<li>window.innerWidth   内容显示区域的宽度</li>
<li>window.innerHeight  内容显示区域高度<</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('outerWitdh :' + window.outerWidth);
    console.log('outerHeight:' + window.outerHeight);
    console.log('innerWidth: ' + window.innerWidth);
    console.log('innerHeight:' + window.innerHeight);
});
</script>

</body>
</html>

当你点击屏幕上显示的按钮时，会获取浏览器外观的宽高和内容显示区域的宽高，并输出到控制台。

获取没有滚动条的宽度和高度

window.innerWidth 和 window.innerHeight 属性返回宽度和高度，包括滚动条（如果它们可见）。如果您想要没有滚动条的宽度和高度，请参阅 document.documentElement.clientWidth 和 document.documentElement.clientHeight 属性。

document.documentElement.clientWidth
document.documentElement.clientHeight

clientWidth 和 clientHeight 属性返回目标元素的内部尺寸。此大小不包括滚动条。要获取内容显示区域的大小，请参考 html 元素的 clientWidth 和 clientHeight 属性。

※ document.documentElement 返回文档的根元素（HTML 页面的 html 元素）。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>窗口宽度和高度</h1>

<p>点击按钮获取宽高</p>

<input type="button" value="Get size" id="btn">

<p>宽高参考以下属性</p>

<ul>
<li>window.outerWidth   浏览器宽度</li>
<li>window.outerHeight  浏览器高度</li>
<li>window.innerWidth   内容显示区域的宽度</li>
<li>window.innerHeight  内容显示区域高度</li>
</ul>

<script>
let btn = document.getElementById('btn');
btn.addEventListener('click', function(){
    console.log('innerWidth  :' + window.innerWidth);
    console.log('innerHeight :' + window.innerHeight);

    const htmlelement = document.documentElement
    console.log('clientWidth :' + htmlelement.clientWidth);
    console.log('clientHeight:' + htmlelement.clientHeight);
});
</script>

</body>
</html>

当你点击屏幕上显示的按钮时，获取内容显示区域的宽高和不包括滚动条的宽高，并输出到控制台。

由于当前仅显示垂直滚动条，因此 document.documentElement.clientWidth 属性的值比 window.innerWidth 属性小 17px 以显示垂直滚动条。

28-7 更改窗口宽度和高度 (window.resizeTo,window.resizeBy)

了解如何使用 JavaScript 更改窗口的宽度和高度。window.resizeTo 方法通过指定新的宽度和高度来修改它，而 window.resizeBy 方法通过指定从当前大小增加或减少的量来修改它。

如何使用 window.resizeTo 方法

您可以使用窗口对象的 resizeTo 方法设置窗口的宽度和高度。格式如下。

window.resizeTo(width, height)

将新的宽度大小指定为第一个参数，将新的高度大小指定为第二个参数。单位是像素。

但是 resizeTo 方法只适用于用 window.open 方法打开的窗口。你实际上是这样做的：

let newwindow = open('test.html', 'mywindow', 'width=600,height=400');

newwindow.resizeTo(300, 300);

示例代码

请看下面的示例。

sample.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>窗口宽度和高度[window.resizeTo]</h1>

<p>点击按钮改变宽度和高度</p>

<input type="button" value="open" id="btnOpen">
<input type="button" value="change" id="btnChange">

<script>
let newwindow;
let btnOpen = document.getElementById('btnOpen');
let btnChange = document.getElementById('btnChange');

btnOpen.addEventListener('click', function(){
    newwindow = open('test.html', 'mywindow', 'width=600,height=400');
});

btnChange.addEventListener('click', function(){
    newwindow.resizeTo(300, 300);
});
</script>

</body>
</html>

test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>

<h1>这是一个测试页[window.resizeTo]</h1>

<p>测试页面</p>

<input type="button" value="change" id="btnChange">

<script>
let btnChange = document.getElementById('btnChange');
btnChange.addEventListener('click', function(){
   window.resizeTo(500, 250);
});
</script>

</body>
</html>

如果显示 sample.html 页面并单击屏幕上显示的打开按钮，将打开一个新窗口并显示 test.html 页面。

如果单击原始窗口中显示的更改按钮，则刚刚打开的窗口的大小将更改为指定的大小。

单击打开的窗口中显示的更改按钮，可以将打开的窗口的大小更改为指定的大小。

如何使用 window.resizeBy 方法

您可以使用窗口对象的 resizeBy 方法通过增加或减少窗口的宽度和高度来调整当前窗口的大小。格式如下。

window.resizeBy(width, height)

第一个参数指定要增加或减少到当前宽度的宽度大小，第二个参数指定要增加或减少到当前高度的高度大小。单位是像素。正数增加它，负数减少它。

与 resizeTo 方法一样，resizeBy 方法仅对使用 window.open 方法打开的窗口有效。你实际上是这样做的：

let newwindow = open('test.html', 'mywindow', 'width=600,height=400');

newwindow.resizeBy(100, -50);

示例代码

请看下面的示例。

sample.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>窗口宽度和高度[window.resizeBy ]</h1>

<p>点击按钮改变宽度和高度</p>

<input type="button" value="open" id="btnOpen">
<input type="button" value="change" id="btnChange">

<script>
let newwindow;
let btnOpen = document.getElementById('btnOpen');
let btnChange = document.getElementById('btnChange');

btnOpen.addEventListener('click', function(){
    newwindow = open('test.html', 'mywindow', 'width=400,height=400');
});

btnChange.addEventListener('click', function(){
    newwindow.resizeBy(50, -50);
});
</script>

</body>
</html>

test.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
</head>
<body>

<h1>测试页面[window.resizeBy]</h1>

<p>这是一个测试页。</p>

<input type="button" value="change" id="btnChange">

<script>
let btnChange = document.getElementById('btnChange');
btnChange.addEventListener('click', function(){
   window.resizeBy(-100, 100);
});
</script>

</body>
</html>

如果显示 sample.html 页面并单击屏幕上显示的打开按钮，将打开一个新窗口并显示 test.html 页面。

如果点击原窗口中显示的更改按钮，先前打开的窗口的大小将更改为宽度+50px，高度-50px。

如果单击打开窗口中显示的更改按钮，打开窗口的大小将更改为 -100px 宽度和 +100px 高度。

28-8 获取显示器的设备像素比（window.devicePixelRatio）

可以通过参考 windows.devicePixelRatio 属性来参考正在显示网页的显示器的设备像素比率。在这里，我将解释如何使用 JavaScript 获取显示器的设备像素比。

如何使用 window.devicePixelRatio 属性

您可以通过引用 window 对象的 devicePixelRatio 属性来获取显示器的设备像素比。格式如下。

window.devicePixelRatio

在使用 Windows 的 PC 环境中，设备像素比为 1，但截至 2021 年，部分 iPhone 和 Android 智能手机的设备像素比为 2 或 3。

实际使用见下面的示例代码。

什么是设备像素比

简单的说，设备像素比就是在实际设备上用CSS表达的1个像素用多少个像素来表示的比例。

例如，在设备像素比为 2 的显示器上，如果您尝试在网页上显示 100 像素宽和 100 像素高的 CSS 单元的图像，它在实际设备上将使用 200 x 200 像素. 因此，如果您使用大小为 100 像素 x 100 像素的图像，它会被放大到 200 像素 x 200 像素并粘贴，因此显示会有点模糊。

要在网页上以 CSS 单位显示 100 像素宽 x 100 像素高的图像，在设备像素比为 2 的显示器上，您需要准备大小为 200 像素 x 200 像素的图像。

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Sample</h1>

<p>显示设备像素比[window.devicePixelRatio]</p>

<input type="button" value="check" id="btnCheck">

<script>
let btnCheck = document.getElementById('btnCheck');

btnCheck.addEventListener('click', function(){
    console.log(window.devicePixelRatio);
});
</script>

</body>
</html>

单击屏幕上显示的按钮会将像素设备比率输出到控制台。第一个来自 Windows 10 环境。像素设备比率为 1.25。

接下来，使用 Google Chrome 开发人员工具模拟一个终端，将其显示在同一页面上，然后单击按钮。首先设置为iPhone6/7/8 然后点击按钮。

像素设备比率为 2.0000000298023224.

28-9 显示打印对话框 (window.print)

可以使用 windows.print 方法显示当前显示页面的打印对话框。在这里，我将解释如何使用 JavaScript 显示打印对话框。

如何使用 window.print 方法

您可以使用窗口对象的打印方法显示打印对话框。格式如下。

window.print()

您可以省略 window. 部分，因此使用以下方法之一。

window.print();
print();

示例代码

请看下面的示例。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Sample</title>
</head>
<body>

<h1>Sample/h1>

<p>点击按钮显示打印对话框[window.print ]</p>

<input type="button" value="print" id="btnPrint">

<script>
let btnPrint = document.getElementById('btnPrint');

btnPrint.addEventListener('click', function(){
    window.print();
});
</script>

</body>
</html>

单击屏幕上显示的按钮以显示打印对话框。

显示警告对话框（window.alert 方法）

显示输入对话框（window.promt 方法）

显示确认对话框（window.confirm 方法）

打开新标签页或窗口

按名称打开窗口

指定窗口的大小、工具栏是否存在等。

关闭选项卡或窗口

经过指定时间后执行一次

通过setTimeout方法取消函数调用

每隔指定时间重复执行

通过setInterval方法取消函数调用

获取窗口的宽度和高度

获取没有滚动条的宽度和高度

如何使用 window.resizeTo 方法

如何使用 window.resizeBy 方法

如何使用 window.devicePixelRatio 属性

什么是设备像素比

如何使用 window.print 方法

关联内容