BOM的相关内容整理

╰半夏微凉° 2022-06-12 01:58 173阅读 0赞

// 利用userAgent属性判断是哪个浏览器
 function CheckBrowser(){ 
 var u_agent = navigator.userAgent;
 var browser_name='未知浏览器';
 if(u_agent.indexOf('Firefox')>-1){
 browser_name='Firefox';
 }else if(u_agent.indexOf('Chrome')>-1){
 browser_name='Chrome';
 }else if(u_agent.indexOf('Trident')>-1&&u_agent.indexOf('rv:11')>-1){
 browser_name='IE11';
 }else if(u_agent.indexOf('MSIE')>-1&&u_agent.indexOf('Trident')>-1){
 browser_name='IE(8-10)';
 }else if(u_agent.indexOf('MSIE')>-1){
 browser_name='IE(6-7)';
 }else if(u_agent.indexOf('Opera')>-1){
 browser_name='Opera';
 }else{
 browser_name+=',info:'+u_agent;
 }
 document.write('浏览器类型为:'+browser_name+' ');
 document.write('userAgent属性值为:'+u_agent+' ');
 }
 
 CheckBrowser()

document.getElementById('btn').onclick=function() { 
            window.open('http://www.baidu.com')
        }
    
        document.getElementById('btn2').onclick=function() { 
            window.open ('http://www.baidu.com','newwindow','height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no')
        }
    
        // 我们可以控制窗口的各种属性：
        // 宽为100，高为400，距屏顶0象素，屏左0象素，无工具条，无菜单条，无滚动条，
        // 不可调整大小，无地址栏，无状态
    
    
        document.getElementById('btn3').onclick=function() { 
            /*改变当前窗口的地址，则会打开新的网页*/
            window.location ='test.html'
            console.log(location.href)
            console.log(location.port)
            console.log(location.protocol)
        }
        document.getElementById('btn4').onclick=function() { 
            /*改变当前窗口的地址，则会打开新的网页*/
           location.reload()
        }

//query探索：
 //document.location.href 返回完整的 URL。
 // 如：http://www.cftea.com/foo.asp?p=1
 // location.search是从当前URL的?号开始的字符串
 // 如:http://www.51js.com/viewthread.php?tid=22720
 // 它的search就是?tid=22720
 
 document.getElementById('btn1').onclick=function() { 
 window.location = '03test1.html?shukui,9527'
 }
 
 document.getElementById('btn2').onclick=function() { 
 window.location = '03test2.html?1,2'
 }
 
 document.getElementById('btn3').onclick=function() { 
 window.location = '03test3.html?1,2'
 }
 function simpleQuery(){ 
 var params= window.location.search;//params:?id,date
 var arr = params.substring(1).split(",");
 return arr;
 }
 
 console.log(simpleQuery())
 //query使用
 //document.location.href 返回完整的 URL。
 // 如：http://www.cftea.com/foo.asp?p=1
 // location.search是从当前URL的?号开始的字符串
 // 如:http://www.51js.com/viewthread.php?tid=22720
 // 它的search就是?tid=22720
 
 document.getElementById('btn1').onclick=function() { 
 window.location = '04test1.html?num=1&id=1'
 }
 
 document.getElementById('btn2').onclick=function() { 
 window.location = '04test2.html?num=1&id=1'
 }
 
 document.getElementById('btn3').onclick=function() { 
 window.location = '04test3.html?num=1&id=1'
 }
 
 /*var json={num:1,id:1}*/
 var querystring = function() { //获取URL查询字符串参数值的通用函数
 var str = window.location.search.substring(1);//获取查询字符串，即"id=1&name=location"的部分
 var arr = str.split("&");//以&符号为界把查询字符串分割成数组
 var json = {};//定义一个临时对象
 //遍历数组
 for(var i=0;i<arr.length;i++) {
 var c = arr[i].indexOf("=");//获取每个参数中的等号小标的位置
 if(c==-1) continue;//如果没有发现测跳到下一次循环继续操作
 
 
 var d = arr[i].substring(0,c); //截取等号前的参数名称，这里分别是id和name
 var e = arr[i].substring(c+1); //截取等号后的参数值
 json[d] = e;//以名/值对的形式存储在对象中
 }
 return json;//返回对象
 }
 
 var f = querystring();//调用查询字符串函数
 for(var i in f) {
 alert(i+"="+f[i]);
 }
 
 var query = querystring();//调用查询字符串函数
 console.log(query.num)
 
 
 for(var i in query){
 console.log(i+"="+query[i]);
 }

//location
 
 window.onload=function(){ 
 //打开链接
 document.getElementsByTagName('button')[0].onclick = function(){ 
 // window.location = "http://www.baidu.com";
 // location.href = "http://www.baidu.com";
 // location.assign("http://www.baidu.com");
 location.replace("http://www.baidu.com");
 // replace和assign的区别
 // replace()方法所做的操作与assign()方法一样，
 // 但它多了一步操作，即从浏览器的历史记录中删除了包含脚本的页面，
 // 这样就不能通过浏览器的后退按钮和前进按钮来访问它了，
 // assign()方法却可以通过后退按钮来访问上个页面。
 }
 //刷新页面
 document.getElementsByTagName('button')[1].onclick = function(){ 
 location.reload(true); //从服务器重载当前页面
 // location.reload(false); //从浏览器缓存中重载当前页面
 // location.reload(); //从浏览器缓存中重载当前页面
 }
 
 // hash：如果URL中包含有“#”，该方法将返回该符号之后的内容
 // （例如：http://www.itcast.cn/index.html#welcome的hash是“#welcome”）。
 
 // host：服务器的名字，例如www.itcast.cn。
 
 // hostname：通常等于host，有时会省略前面的www。
 
 // href：当前页面载入的完整URL。
 
 // pathname：URL中主机名之后的部分。例如：http://www.itcast.cn/html/js/index.html的pathname是“/html/js/index.html”。
 
 // port：URL中声明的请求端口。默认情况下，大多数URL没有端口信息（默认为80端口），所以该属性通常是空白的。像http://www.itcast.cn:8080/index.html这样的URL的port属性为8080。
 
 // protocol：URL中使用的协议，即双斜杠（//）之前的部分。例如http://www.itcast.cn中的protocol属性是http：
 // ftp://www.itcast.cn的protocol属性等于ftp:。
 
 //search：执行GET请求的URL中的问号?后的部分，又称查询字符串。
 // 例如http://www.itcast.cn/search.html?name=shukui中的search属性为?name=shukui。
 
 document.write(
 "hash:"+location.hash+" "+
 "host:"+location.host+" "+
 "hostname:"+location.hostname+" "+
 "href:"+location.href+" "+
 "pathname:"+location.pathname+" "+
 "port:"+location.port+" "+
 "protocol:"+location.protocol+" "+
 "search:"+location.search
 );
 }