• 第189天:BOM属性方法


    一、BOM---location

    1、访问页面

    1 location.href = "http://www.baidu.com";
    2 location.assign("http://www.baidu.com");
    3 location.replace("http://www.baidu.com");

    replaceassign的区别
     replace()方法所做的操作与assign()方法一样,
     但它多了一步操作,即从浏览器的历史记录中删除了包含脚本的页面
     这样就不能通过浏览器的后退按钮和前进按钮来访问它了,
    assign()方法却可以通过后退按钮来访问上个页面

    2、刷新页面

    1 //刷新页面
    2         document.getElementsByTagName('button')[1].onclick = function(){
    3         location.reload(true);    //从服务器重载当前页面
    4         location.reload(false);   //从浏览器缓存中重载当前页面
    5         location.reload();        //从浏览器缓存中重载当前页面
    6         }

    3、其他属性

    (1) hash:如果URL中包含有“#”,该方法将返回该符号之后的内容
     (例如:http://www.itcast.cn/index.html#welcome的hash是“#welcome”)。

    (2) host:服务器的名字,例如www.baidu.com。

    (3) hostname:通常等于host,有时会省略前面的www。

    (4) href:当前页面载入的完整URL

    (5) pathname:URL中主机名之后的部分。例如:http://www.leledeng.com/html/js/index.html的pathname是“/html/js/index.html”。

    (6) port:URL中声明的请求端口。默认情况下,大多数URL没有端口信息(默认为80端口),所以该属性通常是空白的。像http://www.leledeng.com:8080/index.html这样的URL的port属性为8080。

    (7) protocol:URL中使用的协议,即双斜杠(//)之前的部分。例如http://www.itcast.cn中的protocol属性是http:
    (8) ftp://www.leledeng.com的protocol属性等于ftp:

    (9)search:执行GET请求的URL中的问号?后的部分,又称查询字符串
    // 例如http://www.leledeng.com/search.html?name=lele中的search属性为?name=lele

    二、BOM---history

     1 <body>
     2 <input type=button value=刷新 onclick="window.location.reload()">
     3 <input type=button value=前进 onclick="window.history.go(1)">
     4 <input type=button value=后退 onclick="window.history.go(-1)">
     5 <input type=button value=前进 onclick="window.history.forward()">
     6 <input type=button value=后退
     7        onclick="window.history.back()">
     8 <input type=button value=后退+刷新
     9        onclick="window.history.go(-1);window.location.reload()">
    10 </body>

    三、BOM---navigator

     1 <script>
     2 //    利用userAgent属性判断是哪个浏览器
     3     function CheckBrowser(){
     4         var u_agent = navigator.userAgent;
     5         var browser_name='未知浏览器';
     6         if(u_agent.indexOf('Firefox')>-1){
     7             browser_name='Firefox';
     8         }else if(u_agent.indexOf('Chrome')>-1){
     9             browser_name='Chrome';
    10         }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
    11             browser_name='IE11';
    12         }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
    13             browser_name='IE(8-10)';
    14         }else if(u_agent.indexOf('MSIE')>-1){
    15             browser_name='IE(6-7)';
    16         }else if(u_agent.indexOf('Opera')>-1){
    17             browser_name='Opera';
    18         }else{
    19             browser_name+=',info:'+u_agent;
    20         }
    21         document.write('浏览器类型为:'+browser_name+'<br>');
    22         document.write('userAgent属性值为:'+u_agent+'<br>');
    23     }
    24 
    25 CheckBrowser();
    26 </script>

    四、BOM---document

    1 <script>
    2     //对象集合属性
    3     document.write("文档包含:"+document.forms.length+"个表单"+"<br />");
    4     //forms[]对象集合统计表单个数
    5     document.write(document.all.length+"<br />");//14
    6     document.write(document.links[0]);//输出:http://www.baidu.com/
    7 </script>
  • 相关阅读:
    JAVA课程设计——飞机大战(团队)
    面向对象设计大作业
    OO之接口-DAO模式代码阅读及应用
    有理数类设计
    图总结
    树、二叉树、查找算法总结
    二叉排序树
    数据结构小结
    C语言文件
    小程序云开发:联表查询去重及排序的不严谨笨办法
  • 原文地址:https://www.cnblogs.com/le220/p/8540877.html
Copyright © 2020-2023  润新知