我在乐字节学习的第八天（Java)_window.parent.parent.getquerystring-CSDN博客

本文链接：https://blog.csdn.net/weixin_53374029/article/details/111561596

今天是我在乐字节学习的第八天，学了有一个星期之后还是提升了不少，老师讲课也易懂，讲课方式也是很nice的哦，幽默风趣，我也是从小白刚开始接触的，学习一周下来，收获不少呀，下面是我今天学习的内容：

如果在web中使用JavaScript，BOM（浏览器对象模型）便是其核心。BOM提供了很多对象，用于访问浏览器的功能，这些功能与任何网页内容无关 下图为DOM与BOM的关系

1.window对象

8.1.1全局作用域

所有在全局作用域中声明的变量，函数都会变成window对象的属性和方法。例： var age=12; function sayAge(){ alert(this.age); } alert(window.age); //12 sayAge(); //12 window.sayAge(); //12 例子中的age变量和sayAge（）函数，被自动归为window对象。

1.2窗口关系及框架

如果页面中包含框架，则每个框架都拥有自己的 window 对象，并且保存在 frames 集合中。

<html>

<frameset>

<frame src="frame.htm" name="topFrame">

<frameset cols="50%,50%">

    <frame src="a" name="leftFrame">

    <frame src="b" name="rightFrame">

 </frameset>

</frameset>

</html>
复制代码

top

不过最好使用 top 来引用这些框架>（top.frames[0]），因为 top 对象始终指向最高>（最外）层的框架，也就是浏览器窗口。使用它可以确保在一个框架中正确地访问另一个框架。

因为对于在一个框架中编写的任何代码来说，其中的 window 对象指向的都是那个框架的特定实例，而非最高层的框架。

parent

与 top 相对的另一个 window 对象是 parent。顾名思义，parent（父）对象始终指向当前框架的直接上层框架。

在某些情况下，parent 有可能等于 top；但在没有框架的情况下，parent 一定等于 top（此时它们都等于 window）。

self

与框架有关的最后一个对象是 self，它始终指向 window；实际上，self 和 window 对象可以互换使用。引入 self 对象的目的只是为了与 top 和 parent 对象对应起来，因此它不格外包含其他值。

所有这些对象都是 window 对象的属性，可以通过 window.parent、window.top 等形式来访问。同时，这也意味着可以将不同层次的 window 对象连缀起来，例如 window.parent.parent.frames[0]。

1.3窗口位置

IE，Safari，Opera和Chrome都提供了screenLeft属性和screenTop属性，分别用于表示窗口相对于屏幕左边和上边的位置。 Firefox则提供了screenX和screenY的属性，提供相同的窗口信息，Safari和Chrome也同时支持两个属性。例： var left=（typeof window . screenLeft == “number”）? window . screenLeft : window . screenX; var top = (typeof window . screenTop == “number”)? window . screenTop : window . screenY; 例子中利用二元操作符先确定screenLeft和screenTop属性是否存在，若存在，则取得两个属性的值。若没有，则取得 screenX和 screenY的值。

使用moveTo（）和moveBy（）方法也可取得窗口的精确值例： window.moveBy（100,100）; // 将窗口向右下方向各移动100像素 window.moveTo(100,100); //将窗口移动到（100,100）处

1.4窗口大小

窗口大小打开窗口，具有4个属性：

innerWidth、innerHeight、outerWidth 和 outerHeight。另外resizeTo（）和resizeBy（）方法可调整浏览器窗口的大小。不过，resizeBy（）接收的是新窗口与旧窗口的宽度和高度之差。例： window.resizeTo（100,100）; //调整到100100 window.resizeBy（100,50）; //调整到200150

1.5导航与打开窗口

window.open()方法可以导航到一个特定的url，接受四个参数，url、窗口目标、一个特性字符串、一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值。对于传入的第二个参数，它与标签里面的target的值相似，指定在哪打开这个url，可以是已有的窗口名称，也可以是_blank等等

1.6弹出窗口

1:如果第二个参数不是已有的窗口，那么就会根据第三个参数的字符串创建一个新的窗口 2.若第三个参数也没有，那么就会创建一个带有全部默认设置的新窗口 3.在不打开新窗口时，第三个参数被忽略 4.第三个参数是一个以逗号分隔的设置字符串，表示新窗口显示哪些特性，下面是部分设置选项

1.7系统对话框

浏览器通过 alert()、confirm()和 prompt()方法可以调用系统对话框向用户显示消息

alert()方法:接受一个字符串并将其显示给用户

显示一个系统对话框，其中包含指定的文本和一个 OK（“确定”）按钮

第二种对话框是调用 confirm()方法生成

注：二者的主要区别在于“确认”对话框除了显示 OK按钮外，还会显示一个 Cancel（“取消”）按钮，两个按钮可以让用户决定是否执行给定的操作

2.location对象

location对象提供了与当前窗口加载的文档有关的信息它是window对象和document对象的属性

下面是location的所有属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rnzA5fyd-1608626895361)(https://user-gold-cdn.xitu.io/2019/9/2/16cedc3018a6378a?imageView2/0/w/1280/h/960/format/webp/ignore-error/1)]

2.1查询字符串参数

解析查询字符串，然后返回包含所有参数的一个对象

function getQueryStringArgs(){ //取得查询字符串并去掉开头的问号
var qs = (location.search.length > 0 ? >location.search.substring(1) : “”), //保存数据的对象
args = {},
//取得每一项
items = qs.length ? qs.split("&") : [],
item = null,
name = null, value = null, //在 for 循环中使用
i = 0,
len = items.length; //逐个将每一项添加到 args 对象中
for (i=0; i < len; i++){
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(item[1]); if (name.length) {
args[name] = value;
}
}
return args; }

2.2位置操作

使用 location 对象可以通过很多方式来改变浏览器的位置

最常用：使用 assign()方法并为其传递一个 URL

修改location对象的其他属性也可以改变当前加载的页面

下面是一些修改url的方法

  //假设初始 URL 为 http://www.wrox.com/WileyCDA/ 
 //将 URL修改为"http://www.wrox.com/WileyCDA/#section1" 
  location.hash = "#section1";
 //将 URL修改为"http://www.wrox.com/WileyCDA/?q=javascript"       
  location.search = "?q=javascript"; 
  //将 URL 修改为"http://www.yahoo.com/WileyCDA/" 
  location.hostname = "www.yahoo.com"; 
  //将 URL 修改为"http://www.yahoo.com/mydir/" 
  location.pathname = "mydir"; 
  //将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/" 
  location.port = 8080;
复制代码

三、navigator 对象

Navigator常见的对象属性如下：

appCodeName : 返回浏览器的代码名。

appMinorVersion : 返回浏览器的次级版本。

appName : 返回浏览器的名称。

appVersion : 返回浏览器的平台和版本信息。

browserLanguage : 返回当前浏览器的语言。

cookieEnabled : 返回指明浏览器中是否启用 cookie 的布尔值。

cpuClass : 返回浏览器系统的 CPU 等级。

onLine | 返回指明系统是否处于脱机模式的布尔值。

platform : 返回运行浏览器的操作系统平台。

systemLanguage : 返回 OS 使用的默认语言。

userAgent : 返回由客户机发送服务器的 user-agent 头部的值。

userLanguage ：返回 OS 的自然语言设置。

每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法，以及支持它们的浏览器版本。

3.1 检测插件

用plugins数组来检测浏览器是否安装了特定插件数组每一项包含下列属性

name：插件名字 description：插件描述 filename：插件的文件名 length：插件所处理的MIME类型的数量

在Firefox、Safari、Opera、Chrome中用下面方法检测插件

   //检测插件（在 IE中无效） 
    function hasPlugin(name){     
    name = name.toLowerCase();     
    for (var i=0; i < navigator.plugins.length; i++){    
         if (navigator. plugins [i].name.toLowerCase().indexOf(name) > -1){       
               return true;      
                  }     } 
    return false; 
    } 
	//检测 Flash 
	alert(hasPlugin("Flash")); 
	//检测 QuickTime 
	alert(hasPlugin("QuickTime")); 
复制代码

用下面方法检测所有浏览器的插件

//检测所有浏览器中的Flash 
function hasFlash(){     
var result = hasPlugin("Flash");     
if (!result){        
 result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");     
 }
 return result; 
 } 
//检测所有浏览器中的QuickTime 
function hasQuickTime(){     
var result = hasPlugin("QuickTime");     
if (!result){         
result = hasIEPlugin("QuickTime.QuickTime");     
}     
return result; 
} 
//检测 Flash 
alert(hasFlash()); 
//检测 QuickTime 
alert(hasQuickTime()); 
复制代码