Heim > Artikel > Web-Frontend > JavaScript-Webprogrammierung ------ Browser Object Model (BOM)

JavaScript-Webprogrammierung ------ Browser Object Model (BOM)

黄舟Original: 2016-12-30 16:33:591132Durchsuche

Browserobjekt
Modell: BOM)

Betrifft hauptsächlich Fensterobjekt: Stellt ein geöffnetes Fenster im Browser dar

1. BOM-Funktion

Bietet Bedienmethoden für den Zugriff auf verschiedene Funktionskomponenten des Browsers, wie das Browserfenster selbst, den Browserverlauf usw.

2 Ereignisse im Fenster

3 laden Ereignisse (Browser-Lebenszyklus): onload, onunload, onbeforeunload (aber Sie können die Bedeutung anhand der Wörter erkennen, es gibt andere Ereignisse, Sie können das Hilfedokument überprüfen)

<!DOCTYPE html> 

<html> 

<head> 

<title>bom_window_event.html</title> 

</head> 



<body> 



<script type="text/javascript"> 

//事件注册 

onload=function(){ 

//alert("onload..."); 

window.open("ad.html","_blank","height=300,width=300,status=no,toolbar=no,menubar=no,location=no"); 

} 

/* 

onunload=function(){ 

alert("onunload..."); 

} 

onbeforeunload=function(){ 

alert("onbeforeunload..."); 

} 

*/ 

</script> 



</body> 

</html>

Drei, Methoden im Fenster

<!DOCTYPE html> 

<html> 

<head> 

<title>bom_window_method.html</title> 

</head> 



<body> 



<script type="text/javascript" src="print.js"> 

</script> 



<script type="text/javascript"> 

//window中的方法 

function f1(){ 

var b = confirm("你确定要执行吗？"); 

alert("b="+b); 

} 



var id1,id2; 

function f2(){ 

// id1 = setTimeout("alert(&#39;time out...&#39;)" , 3000);//经过指定毫秒值后计算一个表达式----定时器 

id2 = setInterval("alert(&#39;time out...&#39;)" , 3000);//每经过指定毫秒值后计算一个表达式----定时器 

} 



function f3(){ 

//clearTimeout(id1); 

clearInterval(id2);//清除定时器 

} 



function f4(){ 

//moveBy(10,10);//浏览器窗口----相对移动，向右下角移动(水平与垂直方向分别移动10像素) 

//moveTo(40,40); 

//窗口抖动 

for(var x=0;x<10;x++){ 

moveBy(20,0); 

moveBy(0,20); 

moveBy(-20,0); 

moveBy(0,-20); 

} 

} 



</script> 



<input type="button" value="演示window中的方法1--确认提示窗口" onclick="f1()" /><br/> 

<input type="button" value="演示window中的方法2--定时器1" onclick="f2()" /><br/> 

<input type="button" value="演示window中的方法2--定时器2" onclick="f3()" /><br/> 

<input type="button" value="演示window中的方法3--move" onclick="f4()" /><br/> 





</body> 

</html>

4. Objekte im Fenster

1. Navigatorobjekt im Fenster ---- Browserinformationen

function windowNavigatorShow(){ 

var name = window.navigator.appName; 

//var version = window.navigator.appVersion; 

var version = navigator.appVersion;//window对象是默认的，可以省略不写 

println("name:"+name+",version:"+version); 

}

2, Standortobjekt im Fenster---- Browser-Adressleiste

<span style="font-weight: normal;">function windowObj4(){  
            //获取属性  
            var pro = window.location.protocol; //window可省略  
            //alert(pro);  
            var text = location.href;  
            alert(text);  
              
            location.href="http://www.baidu.com.cn";//1
	    location.href ="5a.html";//2
	    //上两句1和2处可以对目前所处的地址进行更改，这就是在浏览器中浏览到某些东西时突然会跳到其他页面去的原理，如1会自动跳转到百度
}</span>

5a.html

<html>
  <head>
    <title>aa</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
  
  <body>
  	<script type="text/javascript">
  		function windowObjDemo(){
			history.back();
		}  	
  	</script>
    <input type="button" value="演示window中的对象" onclick="windowObjDemo()" />
  </body>
</html>

3. Browser hat URL-Informationen durchsucht

Die Methode:

zurück Laden Sie die vorherige URL aus der Verlaufsliste.

weiterleiten Laden Sie die nächste URL aus der Verlaufsliste.

Los: URL aus der Verlaufsliste laden.

<input type="button" value="演示window中的对象3--history,后退" onclick="history.back()" />

Das Obige ist der Inhalt der JavaScript-Webprogrammierung ------ Für weitere verwandte Inhalte zahlen Sie bitte Achtung auf die chinesische PHP-Website (www.php.cn)!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Front-End-Praxis – JavaScript – Animation (3)Nächster Artikel：Front-End-Praxis – JavaScript – Animation (3)

In Verbindung stehende Artikel

Mehr sehen