BOM簡介

時間 2019-11-19

標籤 bom 簡介简体版

原文原文鏈接

BOM簡介

BOM Browser Object Model
瀏覽器對象模型

// 經過window對象來訪問瀏覽器
console.log(window.document);
// frames:當前文件的框架集合
console.log(window.frames);
// 瀏覽器環境信息
console.log(window.screen);
console.log(window.history);
// 瀏覽器及其相關功能的信息
console.log(window.navigator);

// 瀏覽器本地信息
console.log(window.location);
// href屬性  reload()  assign() replace() 等方法


window.location.href = 'red.html';
window.location.reload();  //刷新

// 有歷史記錄
window.location.assign('yellow.html');

// 替換頁面   無歷史記錄
window.location.replace('yellow.html')

window.history.forward();
window.history.back();

// go(num)： num大於0 向後跳轉num個界面
window.history.go(2);

onload

onload:是windows的屬性自己是函數類型的屬性，賦值時須要接受一個函數,當頁面加載完畢纔會執行javascript

window.onload = function(){
    alert('頁面加載完畢')
}

onscroll

<body style="height: 2000px;">
    <button onclick="goTop()" style="position: fixed;bottom: 50px; right: 50px;">回到頂部</button>
    <script type="text/javascript">
        window.onscroll = function(){
            // console.log('頁面滾動')
            var height = document.documentElement.scrollTop || document.body.scrollTop;
            console.log(height);
        }
        function goTop(){
            document.documentElement.scrollTop = 0;
            //document.body.scrollTop = 0;
        }
        
    </script>
</body>

onresize

<script type="text/javascript">
    // onresize 瀏覽器更改大小時會執行
    window.onresize = function(){
        console.log('大小更改');
    }
</script>

定時器

<button onclick="clearTime()">清除定時器</button>
<button onclick='create()'>建立定時器</button>
<script type="text/javascript">
    // 建立定時器
    
    function create () {
        timer = window.setInterval(function(){
            console.log("666");
        }, 2000)
    }
    
    //window.setInterval(func, 2000)
    
    function clearTime () {
        window.clearInterval(timer);
    }
</script>

延時器

<button onclick='clearTimer()'>清除定時器</button>
<script type="text/javascript">
    var timer = window.setTimeout(func, 5000);
    function func () {
        console.log('您很好'); 
    }
    
    function clearTimer(){
        window.clearTimeout(timer);
    }
</script>

1. BOM的簡介
2. Javascript BOM簡介
3. Bom簡單介紹
4. BOM的簡單介紹
5. JavaScript學習筆記——BOM簡介
6. BOM介紹
7. 【javascript】BOM介紹
8. 簡單總結-BOM
9. BOM的介紹與應用
10. javascript BOM與DOM介紹
更多相關文章...
• Scala 簡介 - Scala教程
• AJAX 簡介 - PHP教程
• Github 簡明教程
• Java Agent入門實戰（一）-Instrumentation介紹與使用

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。