BOM操作

Posted 2020-09-02 菜鸟婷婷

BOM操作可以获得游览器的页面大小(viewport 视口：不包括工具栏和滚动条)

       （1）Chrome\firefox\safari\IE

        var h =window.innerHeight;

        var w = window.innerWidth;

        console.log(h);

        console.log(w);

        （2）IE 8.7.6.5

        document.documentElement.clientHeight;

         document.documentElement.clientWidth;

         或

         document.body.clientWidth;

         document.body.clientHeight;

 

        适配所有的游览器写法

        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

 

 

         -------------window的一些方法-----------

        开启一个新的窗口

        var newwindow = window.open();

        console.log(newwindow);

        newwindow.document.write("hahha");

 

        关闭窗口

         window.close();

 

       设备的 分辨率

        document.write("宽度"+window.screen.availWidth);

        document.write("高度"+window.screen.availHeight);

 

 

     web 主机域名   

      document.write(location.hostname);

      当前网页的存放路径

      document.write(location.pathname);

      使用的协议  file/http: https/

      document.write(location.protocol);

 

        function jiazai() {

        var newWindow = window.open();

        加载一个新的页面  assign 分配

        newWindow.location.assign("http://www.baidu.com");

    }

 

 

        获得 游览器的属性 

        document.write("游览器的名称："+navigator.appName+"<br>");

        document.write("浏览器版本："+navigator.appVersion+"<br>");

        document.write("硬件平台："+navigator.platform+"<br>");

        document.write("用户代理语言："+navigator.systemLanguage+"<br>");

-------------HISTORY-----------

input type="button" value ="back" onclick="goBack()">

    <input type="button" value ="forward" onclick="goForward()">

    <a href="http://www.baidu.com">aaa</a>

    <script>

        function goBack() {

            //前一个

            window.history.back();

        }

 

        function goForward() {

            //下一个

            window.history.forward();

        }