Maison > Article > interface Web > Route de développement mobile HTML5 de Xiaoqiang (32) - Revue JavaScript 7
Route de développement mobile HTML5 de Xiaoqiang (32) - Revue JavaScript 7
- 黄舟original
- 2017-02-04 14:35:311157parcourir
Modèle objet de navigateur de modèle BOM (modèle d'objet de navigateur), le navigateur lui-même peut être exploité via certains objets intégrés au navigateur.
DOM est utilisé pour faire fonctionner la page et BOM est utilisé pour faire fonctionner le navigateur lui-même.
BOM n'est pas standardisé, mais la plupart des navigateurs prennent en charge les objets suivants
1 Objet Window : représente la fenêtre entière
(1) méthode open : (nom. , caractéristiques, hauteur et largeur, barre d'outils, barre de défilement)
(2) méthode setTimeout : setTimeout(fn, milliseconds); //Le premier paramètre doit être un nom de fonction (aucun crochet autorisé) )
<html>
<head>
<script>
function f1(){
//win指向了新打开的窗口
var win = window.open('day05_03','wi_1',
'width=400,height=400');
setTimeout(function(){
win.close();
}, 5000);
}
</script>
</head>
<body>
<input type="button" value="click me" onclick="f1();"/>
</body>
</html>(3) méthode setInterval
var taskId = setInterval(fn, milliseconds); //Exécuter quelque chose après la fonction d'intervalle de temps spécifié
(4) méthode clearInterval
clearInterval(taskId); // Annule la tâche setInterval
<html>
<head>
<style>
#d1{
width:80px;
height:80px;
background-color:blue;
position:relative;
}
</style>
<script src="myjs.js"></script>
<script>
function f2(){
var v1 = parseInt($('d1').style.left);
$('d1').style.left = v1 + 50 + 'px';
}
function f1(){
var taskId = setInterval(f2, 500);
setTimeout(function(){
clearInterval(taskId);
},5000)
}
</script>
</head>
<body>
<div id="d1" style="left:10px;"></div>
<input type="button" value="click me"
onclick="f1();"/>
</body>
</html>(5) méthode alert() Affiche une boîte de dialogue d'avertissement
(6) méthode confirm()
var flag = confirm(string); //string est le message d'invite, flag renvoie true ou false
(7) méthode d'invite
var info = prompt(string)
<html>
<head>
<script>
function f3(){
var flag = confirm('你喜欢钱吗？');
alert(flag);
}
function f4(){
var info = prompt('请输入手机号');
alert('你输入的手机号是：' + info);
}
</script>
</head>
<body>
<input type="button" value="click me"
onclick="f4();"/>
</body>
</html>2 Objet document : représente la racine de l'ensemble du document
<.>
createElement(tagName);
<html>
<!-- document对象 -->
<head></head>
<body style="font-size:30px;">
开始输出helloword<br/>
<script>
for(i=0; i<100; i++){
document.write('hello world<br/>');
}
</script>
</body>
</html>3. Objet Location : encapsule les informations pertinentes de la barre d'adresse du navigateur attribut href : spécifie la page à charger
méthode de rechargement : recharge la page actuelle, ce qui équivaut à actualiser
<html>
<!-- location对象 -->
<head></head>
<body>
<input type="button"
value="跳转到另外一个页面" onclick="location.href = 'day05_04.html';"/><br/>
<input type="button"
value="刷新当前页面" onclick="location.reload();"/>
</body>
</html>4 , Objet History : encapsule les informations pertinentes sur les pages que le navigateur a visitées back() : revenir en arrière
forward() : avancer
go (paramètre) : avancer avec un nombre positif, revenir en arrière avec un nombre négatif numéro
<html>
<!-- history对象 -->
<head></head>
<body>
<input type="button"
value="点这里后退" onclick="history.back();"/>
<input type="button"
value="点这里前进" onclick="history.forward();"/>
<input type="button"
value="点这儿后退" onclick="history.go(-1);"/>
</body>
</html>5, Objet Navigateur : encapsule les informations relatives au navigateur, (telles que : type, version) <html>
<!--navigator对象-->
<head></head>
<body>
现在访问的浏览器的相关信息如下：<br/>
<script>
var info;
//for in循环：主要用于遍历对象
for(propName in navigator){ //propName是任意变量
// 将navigator对象的属性名保存到propName变量里
info += propName + ';' +navigator[propName] + '<br/>';
}
document.write(info); //在当前页面输出
</script>
</body>
</html><html>
<!--检测浏览器类型-->
<head>
<script>
function f1(){
if((navigator.userAgent).indexOf('Firefox')>0){
alert("当前浏览器是Firefox");
}else if(navigator.userAgent.indexOf('MSIE')>0){
alert("当前浏览器是IE");
}else{
alert("其他浏览器");
}
}
</script>
</head>
<body>
<input type="button"
value="获得当前浏览器的类型" onclick="f1();"/>
</body>
</html>6, Objet Écran : le écran où se trouve le navigateur Informations connexes <html>
<head>
<script>
function f2(){
alert(screen.width + ' ' +
screen.height);
}
</script>
</head>
<body>
<input type="button"
value="获得screen相关信息" onclick="f2();"/>
</body>
</html>