WebBOMベース

BOMの深い理解

1.
BOMの概要共通オブジェクトBOMはブラウザーで実行されるため、ブラウザーウィンドウと対話するための一連のオブジェクトを提供します。これらのオブジェクトには、ウィンドウ、ドキュメント、場所、ナビゲーター、および画面が含まれます。

• window（JavaScriptスクリプト全体が実行される最上位オブジェクト）のプロパティは次のとおりです。

属性	意義
資料	ウィンドウにロードされたHTMLドキュメントを返します
ロケーション	このウィンドウにロードされたHTMLドキュメントのURLを返します
ナビゲーター	名前、バージョン番号、プラットフォームなどの一連のブラウザ属性を含め、現在のページを閲覧しているブラウザに戻ります。
画面	現在のビューア画面オブジェクトを返します
歴史	このブラウザウィンドウの履歴を返します

ヒント：これらのプロパティはすべてウィンドウオブジェクトのサブオブジェクトであり、各サブオブジェクトはブラウザを操作するための独自のプロパティとメソッドも提供します。

• ウィンドウオブジェクトの一般的なメソッド：

方法	使用する
alert（）、confirm（）、prompt（）	ポップアップ警告ウィンドウ、確認ダイアログボックス、プロンプト入力ダイアログボックスにそれぞれ使用されます。
閉じる（）	窓を閉めて
moveBy（）、moveTo（）	ウィンドウを移動
resizeBy（）、resizeTo（）	ウィンドウサイズをリセット
scrollBy（）、scrollTo（）	現在のウィンドウのHTMLドキュメントをスクロールします
開いた（）	新しいブラウザウィンドウを開いて、新しいURLが指すアドレスを読み込み、非表示のメニューを含む一連の新しい属性を指定します。
setInterval（）、clearInterel（）	タイマーの設定と削除

例：

• 確認ボックスがポップアップします（confirm（））：

//js代码
<script type="text/javascript">
	function Confirm() {
    
    
		var answer = confirm("是否退出");//带有确定和取消的按钮方法
		if (answer) {
    
    
			close(); //关闭浏览器的方法
		} else {
    
    
			alert(":-)");
		}
	}
</script>
//HTML代码
<input type="button" value="confirm" onclick="Confirm()">//οnclick="Confirm()调用Confirm()方法

• テキスト確認ボックスがポップアップします（prompt（））：
  [OK]をクリックします。値はテキストボックスの値です。[キャンセル]をクリックすると、値はnullになります。

//js代码
function Prompt() {
    
    
	var pro = prompt("请输入文字", "123");
	alert(pro);
}

//HMTL代码
<input type="button" value="prompt" onclick="Prompt()">

• テキストボックスの変更（現在、一部のブラウザはmoveBy（）、moveTo（）、resizeBy（）、resizeTo（）をサポートしていません）：

function MoveBy() {
    
    
	moveBy(50, 50); //每次点击向右向下移动50,第一个值向右，第二个值向下
}
function MoveTo() {
    
    
	moveTo(250, 250); //点击直接移动到那个位置,第一个值向右，第二个值向下
}
function ResizeBy() {
    
    
	resizeBy(50, 50); //每次点击文本框变宽50，变长50,第一个值为宽，第二个值为高
}
function ResizeTo() {
    
    
	resizeTo(250, 250); //点击文本框直接变宽50，变长50,第一个值为宽，第二个值为高
}

• ブラウザのスクロール（scrollBy（）、scrollTo（））：

 //js代码
function ScrollBy() {
    
    
	scrollBy(50, 50); //每次点击第一个向右滚动多少，第二个向下滚动多少.
}
function ScrollTo() {
    
    
	scrollTo(250, 250); //点击直接滚动到这个位置,第一个向右滚动多少，第二个向下滚动多少.
}

• 新しいWebページをポップアップします（open（））

//js代码
        //window.open(URL,name,features,replace)
function Open() {
    
    
	window.open("https://www.csdn.net/", "新的窗口","left=20,top=50");//第一个网址,第二个name一定要下去
}

• タイマーを設定します（setInterval（）、clearInterel（））

//js代码
var count = 0;
function Time() {
    
    
	var d = new Date();
	var hour = d.getHours();
	if (hour < 10) {
    
    
		hour = "0" + hour;
	}
	var minute = d.getMinutes();
	if (minute < 10) {
    
    
		minute = "0" + minute;
	}
	var second = d.getSeconds();
	if (second < 10) {
    
    
		second = "0" + second;
	}
	count++;
	if (count == 10) {
    
    
		window.clearInterval(t); //删除定时器
	}
	document.getElementById("display").innerHTML = hour + ":" + minute + ":" + second; //在HTML里面添加数据
}
var t = window.setInterval("Time()", 1000); //设置定时器，第一个为方法,第二个为定时时间。1000为每1秒调用一次

//HTML
<div id="display">
</div>

履歴オブジェクトの一般的なメソッド：
Historyオブジェクトには、ユーザーが（ブラウザーウィンドウで）アクセスしたURLが含まれています。

方法	使用する
バック（）	前のブラウザのページに戻ります。最初にページを開いても効果はありません。
フォワード	次の閲覧ページに進みます。最初にページを開いた場合、効果はありません。
go（intValue）	このメソッドは、順方向または逆方向、正の順方向および負の逆方向のページ数を指定できます。

//直接用history去调用就可以了
history.back();
history.forward();

ロケーションオブジェクトの一般的な属性：
ロケーションオブジェクトには、現在のURLに関する情報が含まれています。

方法	使用する
ホスト名	ドキュメントが配置されているアドレスのホスト名
href	ドキュメントが配置されているURLアドレス
ホスト	ドキュメントが配置されているアドレスのホストアドレス
港	ドキュメントが配置されているアドレスのサービスポート
パス名	ドキュメントが配置されているアドレスのファイルアドレス
プロトコル	HTTPなど、ドキュメントのロードに使用されるプロトコル。

画面オブジェクトの一般的な属性：

方法	使用する
avaiHeight	ウィンドウが使用できる画面の高さ（ピクセル単位）
avaiWidth	ウィンドウが使用できる画面の幅（ピクセル単位）
色深度	ユーザーのブラウザによって表されるカラービットの数。通常は32ビット（ピクセルあたりのビット数）

ナビゲーターオブジェクトの一般的な属性：

方法	使用する
appCodeName	ブラウザのコード名の文字列表現
appName	公式ブラウザ名の文字列表現
appVersion	ブラウザのバージョン情報の文字列表現
プラットホーム	ブラウザが配置されているコンピュータプラットフォームの文字列表現
ユーザーエージェント	ユーザーエージェントヘッダーの文字列表現
cookieEnabled	Cookieが有効になっている場合はtrueを返し、そうでない場合はfalseを返します

例：

//js代码
document.write("host name:" + location.hostname + "<br/>"); //文档所在地址的主机名
document.write("href:" + location.href + "<br/>"); //文档所在地址的URL地址
document.write("host address:" + location.host + "<br/>"); //文档所在地址的主机地址
document.write("port:" + location.port + "<br/>"); //文档所在地址的服务端口
document.write("protocol:" + location.protocol + "<br/>"); //装载该文档所使用的协议,例如HTTP;等
document.write("avaiHeight:" + screen.availHeight + "<br/>"); //窗口可以使用的屏幕高度，单位像素
document.write("avaiWidth:" + screen.availWidth + "<br/>"); //窗口可以使用的屏幕宽度，单位像素
document.write("colorDepth:" + screen.colorDepth + "<br/>"); //用户浏览器表示的颜色位数，通常为32位(每像素的位数)
document.write("appCodeName:" + navigator.appCodeName + "<br/>"); //浏览器代码名的字符串表示
document.write("appName:" + navigator.appName + "<br/>"); //官方浏览器名的字符串表示
document.write("appVersion:" + navigator.appVersion + "<br/>"); //浏览器版本信息的字符串表示
document.write("platform:" + navigator.platform + "<br/>"); //浏览器所在计算机平台的字符串表示
document.write("userAgent:" + navigator.userAgent + "<br/>"); //用户代理头的字符串表示
document.write("cookieEnabled:" + navigator.cookieEnabled + "<br/>"); //如果启用cookie返回true，否则返回false

効果は次のとおりです。