ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?
JavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?
- 青灯夜游転載
- 2018-11-13 11:10:293340ブラウズ
この記事の内容は、JavaScript における Window オブジェクトと Navigator オブジェクトとは何かを紹介することです。困っている友人は参考にしていただければ幸いです。 [おすすめの関連ビデオ チュートリアル: JavaScript チュートリアル ]
1. ウィンドウ オブジェクト
1 , Window オブジェクトのプロパティ
(1) Closed: ウィンドウが閉じられているかどうかを返します。
nbsp;html>
<meta>
<script>
var myTestWindowdow;
function openTestWindow(){
myTestWindowdow=window.open("","","width=200,height=100");
}
function closeTestWindow(){
if (myTestWindowdow){
myTestWindowdow.close();
}
}
function checkTestWindow(){
if (!myTestWindowdow){
document.getElementById("msg").innerHTML="测试窗口没有被打开!";
}
else{
if (myTestWindowdow.closed){
document.getElementById("msg").innerHTML="测试窗口被关闭!";
}
else{
document.getElementById("msg").innerHTML="测试窗口没有被关闭!";
}
}
}
</script>
<input><br>
<input><br>
<input><br>
<div></div>
(2) defaultStatus: ウィンドウのステータス バーのデフォルトのテキストを設定または返します。
status: ウィンドウのステータス バーのテキストを設定または返します。
nbsp;html>
<meta>
<script>
//设置默认状态栏文本
window.defaultStatus="我会显示在浏览器的状态栏中! !";
//设置状态栏文本
//window.status="我会显示在浏览器的状态栏中! !";
</script>
(3) frames: ウィンドウ内のすべての名前付きフレームを返します。コレクションは Window オブジェクトの配列であり、各オブジェクトにはウィンドウ内のフレームが含まれます。
nbsp;html>
<meta>
<script>
function changeAllframe() {
var frames = window.frames;
var i;
for (i = 0; i < frames.length; i++) {
frames[i].location = "https://www.baidu.com";
}
}
</script>
<button>点我</button><br>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
(4) innerHeight: ウィンドウのドキュメント表示領域の高さを返します。
innerWidth: ウィンドウのドキュメント表示領域の幅を返します。
nbsp;html>
<meta>
<script>
function getWidthAndHeight(){
var w=window.innerWidth;
var h=window.innerHeight;
x=document.getElementById("myInfo");
x.innerHTML="Width: " + w + " Heigth: " + h;
}
</script>
<button>获取innerWidth,innerHeight</button><br>
<div></div>
(5) localStorage: データを長期間保存するために使用されます。保存されたデータには、手動で削除するまで有効期限がありません。
nbsp;html>
<meta>
<script>
function getClickCount() {
if(typeof(Storage) !== "undefined") {
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount)+1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("myInfo").innerHTML = "你已经点击了 " + localStorage.clickcount + " 次。";
} else {
document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
<button>点击</button><br>
<div></div>
ブラウザがサポートしていない場合:
ブラウザがサポートしている場合:
(6 ) length: 現在のウィンドウ内のフレーム数を返します。
nbsp;html>
<meta>
<script>
function getframeCount() {
document.getElementById("myInfo").innerHTML = "有frame " + frames.length + " 个。";
}
</script>
<button>点击</button><br>
<div></div>
<iframe></iframe>
<iframe></iframe>
<iframe></iframe>
(7) name: ウィンドウの名前を設定または返します。
nbsp;html>
<meta>
<script>
var myWindow;
function openWin(){
myWindow=window.open('','myTestWindow','width=200,height=100');
myWindow.document.write("<p>窗口名称为: " + myWindow.name + "");
}
</script>
<button>点击</button><br>
(8) opener: ウィンドウを作成した Window オブジェクトへの参照を返します。 window.open() を使用してウィンドウを開く場合、このプロパティを使用して、ターゲット ウィンドウのソース (親) ウィンドウから詳細を返すことができます。
nbsp;html>
<meta>
<script>
function openNewWindow(){
myNewWindow=window.open('','','width=200,height=100');
myNewWindow.document.write("这是我新打开的窗口");
myNewWindow.focus();
myNewWindow.opener.document.write("这个是源窗口");
}
</script>
<button>点击</button><br>
(9) outerHeight: ツールバーやスクロールバーを含むウィンドウの外側の高さを返します。
externalWidth: ツールバーやスクロールバーを含むウィンドウの外側の幅を返します。
pageXOffset: ウィンドウ表示領域の左上隅を基準とした現在のページの X 位置を設定または返します。
pageYOffset: ウィンドウ表示領域の左上隅を基準とした現在のページの Y 位置を設定または返します。
nbsp;html>
<meta>
<script>
function getWidthAndHeight(){
var ow=window.outerWidth;
var oh=window.outerHeight;
var pX=window.pageXOffset;
var pY=window.pageYOffset;
x=document.getElementById("myInfo");
x.innerHTML+="outerWidth: " + ow + " outerHeigth: " + oh+"<br/>";
x.innerHTML+="pageXOffset: " + pX + " pageYOffset: " + pY+"<br/>";
}
</script>
<button>获取</button><br>
<div></div>
(10) parent: 親ウィンドウに戻ります。
nbsp;html>
<meta>
<script>
function getParentWindow(){
window.open('','','width=200,height=100');
alert(window.parent.location);
}
</script>
<button>获取</button><br>
<div></div>
(11) screenLeft: スクリーン ウィンドウを基準とした x 座標を返します。
screenTop: スクリーン ウィンドウを基準とした y 座標を返します。
screnX: 画面ウィンドウを基準とした x 座標を返します。
screenY: スクリーン ウィンドウを基準とした y 座標を返します。
nbsp;html>
<meta>
<script>
function openNewWindow(){
myNewWindow=window.open('','');
myNewWindow.document.write(" 这是新窗口<br/>");
myNewWindow.document.write(" ScreenLeft: " + myNewWindow.screenLeft +"<br/>");
myNewWindow.document.write(" ScreenTop: " + myNewWindow.screenTop + "<br/>");
myNewWindow.document.write(" ScreenX: " + myNewWindow.screenX + "<br/>");
myNewWindow.document.write(" ScreenY: " + myNewWindow.screenY + "<br/>");
}
</script>
<button>获取</button><br>
(12) sessionStorage: ウィンドウまたはタブを閉じた後、同じウィンドウ (またはタブ) のデータを一時的に保存するために使用されます。このデータは削除されます。
nbsp;html>
<meta>
<script>
function getClickCount() {
if(typeof(Storage) !== "undefined") {
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
} else {
sessionStorage.clickcount = 1;
}
document.getElementById("myInfo").innerHTML = "你已经点击了 " + sessionStorage.clickcount + " 次。";
} else {
document.getElementById("myInfo").innerHTML = "Sorry, your browser does not support web storage...";
}
}
</script>
<button>点击</button><br>
<div></div>
ブラウザがサポートしていない場合:
ブラウザがサポートしている場合:
(13 ) self: 現在のウィンドウ オブジェクトへの参照を返します。この属性を使用すると、複数のウィンドウが開いているときに、現在のウィンドウ内の関数またはプロパティが混乱なく正しく呼び出されることを確認できます。
top: 現在のウィンドウの最上位のブラウザ ウィンドウを返します。
nbsp;html>
<meta>
<script>
function check(){
if (window.top!=window.self) {
document.write("这个窗口不是最顶层窗口!")
}
else{
document.write("这个窗口是最顶层窗口!")
}
}
</script>
<button>点击</button><br>
2 、Window 对象的方法
(1) alert(): 显示带有一段消息和一个确认按钮的警告框。
atob(): 解码一个 base-64 编码的字符串。
btoa(): 创建一个 base-64 编码的字符串。
nbsp;html>
<meta>
<script>
function myFunction(){
alert("你好，我是一个警告框！"); //alert方法
var strA = "Hello world!";
var btoastr = window.btoa(strA); //btoa() 方法用于创建一个 base-64 编码的字符串。
var atobstr = window.atob(btoastr); //atob() 方法用于解码使用 base-64 编码的字符串。
alert("编码字符串为: " + btoastr + " " + "解码后字符串为: " + atobstr);
}
</script>
<button>点击</button><br>
(2) blur(): 把键盘焦点从顶层窗口移开。focus(): 把键盘焦点给予一个窗口。
nbsp;html>
<meta>
<script>
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("The new window");
myWindow.blur();
//myWindow.focus();
}
</script>
<input>
(3) setInterval(): 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval(): 取消由 setInterval() 设置的 timeout。
nbsp;html>
<meta>
<script>
//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
var myVar = setInterval(function(){ myTimer() }, 1000);
function myTimer() {
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("timeInfo").innerHTML = t;
}
function myStopFunction() {
clearInterval(myVar); //取消由 setInterval() 函数设定的定时执行操作。
}
</script>
<button>停止时间</button>
<p></p>
(4) setTimeout(): 在指定的毫秒数后调用函数或计算表达式。
clearTimeout(): 取消由 setTimeout() 方法设置的 timeout。
nbsp;html>
<meta>
<script>
var myVar;
function myFunction() {
//setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
myVar = setTimeout(function(){ alert("Hello") }, 3000);
}
function myStopFunction() {
clearTimeout(myVar); //如果alert弹出方法还未执行，我们可以使用 clearTimeout() 来阻止它。
}
</script>
<button>设置3秒弹出Hello</button>
<button>停止弹出</button>
(5) close(): 关闭浏览器窗口。
open(): 打开一个新的浏览器窗口或查找一个已命名的窗口。
createPopup(): 创建一个 pop-up 窗口。
print(): 打印当前窗口的内容。
nbsp;html>
<meta>
<script>
var myWindow;
function openWin(){
myWindow=window.open('','','width=200,height=100'); //打开新窗口
myWindow.document.write("使用open()方法打开的新窗口");
}
function closeWin(){
myWindow.close(); //关闭新打开的窗口
}
function create_Popup(){
var p=window.createPopup(); //创建一个 pop-up 窗口
var pbody=p.document.body;
pbody.style.backgroundColor="lime";
pbody.style.border="solid black 1px";
pbody.innerHTML="这是createPopup()弹出";
p.show(100,100,200,50,document.body);
}
function my_print(){
window.print(); //调出windows系统的打印机
}
</script>
<input><br>
<input><br>
<input><br>
<input><br>
(6) confirm(): 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt(): 显示可提示用户输入的对话框。
nbsp;html>
<meta>
<script>
function my_prompt(){
var x;
var Name=prompt("请输入你的名字","Harry Potter");
if (Name!=null && Name!=""){
document.getElementById("myInfo").innerHTML="你好 " + Name + "! ";
}
}
function my_confirm(){
var x;
var r=confirm("请点击");
if (r==true){
x="确定";
}
else{
x="取消";
}
document.getElementById("myInfo").innerHTML=x;
}
</script>
<input>
<input><br>
<div></div>
(7) getComputedStyle(): 获取指定元素的 CSS 样式。
nbsp;html>
<meta>
<script>
function my_getComputedStyle(){
var elem = document.getElementById("myInfo");
var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");
document.getElementById("myInfo").innerHTML = theCSSprop;
}
</script>
<input>
<div></div>
(8) moveBy(): 可相对窗口的当前坐标把它移动指定的像素。
moveTo(): 把窗口的左上角移动到一个指定的坐标。
nbsp;html>
<meta>
<script>
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("这是新窗口");
}
function moveByWin(){
myWindow.moveBy(200,200); //相对窗口的当前坐标把它移动指定的像素
myWindow.focus();
}
function moveToWin(){
myWindow.moveTo(0,0);//把窗口的左上角移动到一个指定的坐标
myWindow.focus();
}
</script>
<input>
<input>
<input>
(9) resizeBy(): 按照指定的像素调整窗口的大小。
resizeTo(): 把窗口的大小调整到指定的宽度和高度。
nbsp;html>
<meta>
<script>
var myWindow;
function openWin(){
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("这是新窗口");
}
function resizeByWin(){
myWindow.resizeBy(100,50);
myWindow.focus();
}
function resizeToWin(){
myWindow.resizeTo(50,30);
myWindow.focus();
}
</script>
<input>
<input>
<input>
(10) scrollBy(): 按照指定的像素值来滚动内容。
scrollTo(): 把内容滚动到指定的坐标。
nbsp;html>
<meta>
<script>
var myWindow;
function openWin(){
myWindow=window.open('','','width=50,height=20');
myWindow.document.write("-<br/>");
myWindow.document.write("---<br/>");
myWindow.document.write("-----<br/>");
myWindow.document.write("-------<br/>");
myWindow.document.write("---------<br/>");
myWindow.document.write("-----------<br/>");
myWindow.document.write("-------------<br/>");
myWindow.focus();
}
function scrollByWin(){
myWindow.scrollBy(20,20); //按照指定的像素值来滚动内容
myWindow.focus();
}
function scrollToWin(){
myWindow.scrollTo(50,50); // 把内容滚动到指定的坐标
myWindow.focus();
}
</script>
<input>
<input>
<input>
二、Navigator 对象
1、Navigator 对象的属性
(1) appCodeName: 返回浏览器的代码名
(2) appName: 返回浏览器的名称
(3) appVersion: 返回浏览器的平台和版本信息
(4) cookieEnabled: 返回指明浏览器中是否启用 cookie 的布尔值
(5) platform: 返回运行浏览器的操作系统平台
(6) userAgent: 返回由客户机发送服务器的user-agent 头部的值
nbsp;html>
<meta>
<script>
document.write("浏览器代号: " + navigator.appCodeName);
document.write("<br/><br/>浏览器名称: " + navigator.appName);
document.write("<br/><br/>版本信息: " + navigator.appVersion);
document.write("<br/><br/>是否启用 Cookie: " + navigator.cookieEnabled);
document.write("<br/><br/>硬件平台: " + navigator.platform);
document.write("<br/><br/>用户代理: " + navigator.userAgent);
</script>
2、 Navigator 对象的方法
(1) javaEnabled(): 指定是否在浏览器中启用Java
(2) taintEnabled(): 规定浏览器是否启用数据污点(data tainting)
nbsp;html>
<meta>
<script>
document.write("<br/><br/>启用Java: " + navigator.javaEnabled());
document.write("<br/><br/>启用数据污点: " + navigator.taintEnabled());
</script>
要約: 上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。
以上がJavaScript の Window オブジェクトとは何ですか? Navigator オブジェクトとは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。