지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트에서 창은 무엇을 의미하나요?

자바스크립트에서 창은 무엇을 의미하나요?

青灯夜游
풀어 주다： 2022-02-15 18:06:17
원래의
6028명이 탐색했습니다.

JavaScript에서 window는 "창"을 의미하며 브라우저 창을 나타내는 내장 호스트 개체입니다. 모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.

자바스크립트에서 창은 무엇을 의미하나요?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

JavaScript에서 window는 "창"을 의미하며 내장된 호스트 개체입니다.

창 개체는 BOM에 있는 모든 개체의 핵심일 뿐만 아니라 일부 창 제어 기능도 포함합니다.

호스트 객체는 JS 스크립트를 실행하는 환경에서 제공하는 객체이며, 브라우저에서 제공하는 객체입니다. 모든 BOM 및 DOM은 호스트 개체입니다.

Window 객체

모든 브라우저는 window 객체를 지원합니다. 브라우저 창을 나타냅니다.

모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.

  • 전역 변수는 창 개체의 속성입니다.

  • 전역 함수는 창 개체의 메서드입니다.

HTML DOM의 문서도 창 개체의 속성 중 하나입니다. 

window.document.getElementById("header");
로그인 후 복사

다음과 같습니다. 

document.getElementById("header");
로그인 후 복사

1. 전역 창 개체

JavaScript의 모든 전역 함수나 변수는 창의 속성입니다. . 

<script type="text/javascript">
    var name="撼地神牛";
    document.write(window.name);
</script>
로그인 후 복사

2. Window 및 self 개체

self 개체는 일반적으로 현재 형식 내에 있는지 확인하는 데 사용됩니다. 

<script type="text/javascript">
    document.write(window == self);　　　　　　//必须相等，永远都相等
　　document.write(window.Top == window.self);　　//判断当前框架是否是主框架
</script>
로그인 후 복사

　Window, self, window.self는 동일합니다.

3. 창의 하위 개체

　창의 주요 개체에는 주로 다음이 포함됩니다.

  • JavaScript 문서 개체

  • JavaScript 프레임 개체

  • JavaScript 기록 개체

  • Java 스크립트 위치 객체

  • JavaScript 탐색기 개체

  • JavaScript 화면 개체

4. 창 함수 색인(IE에서만 유효)

　 창 제어 함수:

  • JavaScript moveBy() 함수: 창을 수평으로 이동합니다. 현재 위치 몸체는 x 픽셀을 이동하고 창을 수직으로 y 픽셀 이동합니다. x가 음수이면 창을 왼쪽으로 이동합니다. y가 음수이면 창을 위쪽으로 이동합니다.

  • JavaScript moveTo() 함수: 양식의 왼쪽 상단을 화면의 왼쪽 상단을 기준으로 (x, y) 지점으로 이동합니다. 음수를 매개변수로 사용하면 양식이 됩니다. 화면의 보이는 영역 밖으로 이동했습니다.

  • JavaScript resizeBy() 함수: 양식의 현재 크기를 기준으로 너비를 w 픽셀로, 높이를 h 픽셀로 조정합니다. 매개변수가 음수이면 양식이 축소되고, 그렇지 않으면 확대됩니다.

  • JavaScript resizeTo() 함수: 양식의 너비를 w 픽셀로, 높이를 h 픽셀로 조정합니다. 

<body>
    <input type="button" id="btn1" value="先设置窗体固定大小！" onclick="window.resizeTo(500,500);" />
    <input type="button" id="btn2" value="再缩小10像素！" onclick="window.resizeBy(-10,-10);" />
    <input type="button" id="btn2" value="上！" onclick="window.moveBy(0,-5);" />
    <input type="button" id="btn2" value="下！" onclick="window.moveBy(0, 5);" />
    <input type="button" id="btn2" value="左！" onclick="window.moveBy(-5, 0);" />
    <input type="button" id="btn2" value="右！" onclick="window.moveBy(5, 0);" />
    <input type="button" id="btn2" value="距离左上角左边100像素，顶部200像素" onclick="window.moveTo(100, 200);" />
</body>
로그인 후 복사

　 양식 스크롤 축 제어 기능:

  • JavaScript scrollTo() 함수: 양식에 스크롤 막대가 있는 경우 가로 스크롤 막대를 양식 너비를 기준으로 x픽셀 위치로 이동합니다. 수직 스크롤 막대는 양식 높이를 기준으로 y 픽셀 위치로 이동합니다.

  • JavaScript scrollBy() 함수: 스크롤 막대가 있는 경우 현재 가로 스크롤 막대를 기준으로 x픽셀 위치로 가로 스크롤 막대를 이동(즉, 왼쪽으로 x픽셀 이동)하고 세로 스크롤 막대를 기준 위치로 이동합니다. 세로 스크롤 막대의 현재 높이는 y픽셀입니다(즉, y픽셀을 아래로 이동).

차이점에 유의하세요. 하나는 현재 창을 기준으로 하고 다른 하나는 스크롤 막대의 현재 위치를 기준으로 합니다. 

<div style="height:150%; width:150%; background-color:#ddd">
    <input type="button" id="btn1" value="移动滚动条！" onclick="window.scrollTo(100,100);" />　　//相当于设置绝对位置
    <input type="button" id="btn1" value="移动滚动条！" onclick="window.scrollBy(100,100);" />　　//相当于累加
</div>
로그인 후 복사

　폼 포커스 제어 함수:

  • JavaScript focus() 함수: 폼이나 공간에 포커스를 줍니다

  • JavaScript Blur() 함수: 폼이나 컨트롤이 포커스를 잃게 만듭니다

<div>
    <input type="button" value="获得焦点" onclick="document.getElementById(&#39;testInput&#39;).focus()" />
    <input type="button" value="失去焦点" onclick="document.getElementById(&#39;testInput&#39;).blur()" />
    <input type="text" value="text" id="testInput" onblur="alert(&#39;我已失去焦点&#39;)" />
</div>
로그인 후 복사

　새 창 본문 함수:

  • JavaScript open() 함수: 새 양식 열기(팝업)
  • JavaScript close() 함수: 양식 닫기
  • JavaScript opener 속성: 크로스 폼 간의 통신은 오프너를 통해 이루어질 수 있습니다. 그들은 동일한 도메인 이름 아래에 있으며 한 양식에는 다른 양식의 오프너가 포함되어야 합니다.

　 window.open(url, name, feature, replacement);

　 Open 함수 매개변수 설명:

  • url - 양식을 로드할 URL
  • name - 새 양식의 이름(다음과 같이 할 수 있음) 또한 HTML 대상 속성의 값인 target)
  • features - 양식 기능을 나타내는 문자열로, 문자열의 각 기능은 쉼표로 구분됩니다.
  • replace - 새로 로드된 페이지가 현재 페이지를 대체하는지 여부를 나타내는 부울 값입니다. 로드된 페이지입니다. 이 매개변수는 일반적으로 지정되지 않습니다.

　 열기 방법 예: 

  <a href="2.html" target="2">在新窗口打开连接</a>
  <a href="#" onclick="window.open(&#39;http://www.google.com&#39;,&#39;2&#39;);">在已建立连接的页面打开新地址</a>
로그인 후 복사

　 먼저 일반 HTML 링크를 사용하여 페이지(대상 이름은 dreamdu)를 연 다음 열기 기능을 사용하여 다른 페이지를 엽니다. 브라우저는 먼저 이름이 지정된 양식이 있는지 찾아야 합니다. dreamdu.가 있는 경우 이 형식으로 공개 주소를 로드합니다.

　 open 설정

window.open (&#39;page.html&#39;, &#39;newwindow&#39;, &#39;height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no&#39;)
로그인 후 복사

 팝업창 방식 : 

方法一：<body onload="openwin()"> 浏览器读页面时弹出窗口；  
方法二：<body onunload="openwin()"> 浏览器离开页面时弹出窗口；
로그인 후 복사

　 open 함수의 세 번째 인자 특징 설명 :

입니다.
매개변수 이름TypeDescription
heightNumber폼의 높이를 100 이상으로 설정합니다. 100
leftNumber 설명 창 만들기 신체의 왼쪽 좌표는 음수 값입니다
locationBoolean폼에 주소 표시줄이 표시되는지 여부, 기본값은 no입니다
ressibleBoolean폼에서 드래그로 크기 조정이 가능한지 여부 가장자리, 기본값은 no
scrollableBoolean양식 내부가 창의 가시 범위를 초과할 때 드래그를 허용할지 여부, 기본값은 no
toolbarBoolean폼에 툴바 표시 ​​여부, 기본값은 no
topNumber생성된 폼의 상위 좌표를 기술하며 음수가 될 수 없음
statusBoolean폼 표시 여부 상태 표시줄의 기본값은 no
widthNumber 생성된 Form의 너비는 100
보다 작을 수 없습니다.

　　特性字符串中的每个特性使用逗号分隔，每个特性之间不允许有空格。

　　window.open函数新建立窗体后会返回新建窗体的window对象，通过此对象可以控制窗体（移动，改变大小，关闭）。

　　close函数：

<input type="button" value="关闭已经打开的窗体！" onclick="window.close();" />
로그인 후 복사

　　self.close();配合上setTimeout()可以实现，打开的窗口定时关闭的效果。

　　对话框函数：

  • JavaScript alert() 函数：弹出消息对话框（对话框中有一个OK按钮）

  • JavaScript confirm() 函数：弹出消息对话框（对话框中包含一个OK按钮与Cancel按钮）

  • JavaScript prompt() 函数：弹出消息对话框（对话框中包含一个OK按钮、Cancel按钮与一个文本输入框）

　　alert();

　　不说。

　　confirm(str);

　　confirm()消息对话框是排它的，也就是在用户点击对话框的按钮前，不能进行任何其它操作。

if(confirm("确定跳大？"))
{
    alert("果断跳大");
}else{
    alert("猥琐打钱");
}
로그인 후 복사

　　显示如下：

　　　　

　prompt(str1, str2);

　　函数有两个参数

  • str1 -- 要显示在消息对话框中的文本，不可修改
  • str2 -- 文本框中的内容，可以修改
var sResult=prompt("请在下面输入你的姓名", "撼地神牛");if(sResult!=null)
{
    alert(sResult + "已经超越神的杀戮");
}else{
    alert("无名氏已经超越神的杀戮");
}
로그인 후 복사

　　显示如下：

　　

　　时间等待与间隔函数：

  • JavaScript setTimeout() 函数
  • JavaScript clearTimeout() 函数
  • JavaScript setInterval() 函数
  • JavaScript clearInterval() 函数

　　1、setTimeout()、clearTimeout()　　在指定的时间后调用函数

　　语法：

  • setTimeout(fun,time);　　fun：函数体或函数名，time指定时间，单位为毫秒。
  • clearTimeout(id);　　取消指定的setTimeout函数将要执行的代码
    setTimeout(function () {
        document.write("隔3秒后触发");   
    }, 3000)    //在3秒后输出
    setTimeout(fun1, 5000);     //在5秒后输出
    function fun1() {
        document.write("函数名的方式5秒后触发");
    }
로그인 후 복사

　　2、setInterval()、clearInterval(value)　　在间隔指定的事件后重复调用函数

　　语法：

  • setInterval(fun1,time)　　fun：函数体或函数名，time指定的时间，单位为毫秒。会返回一个值,这个值是统计该函数的个数用的，第一个是1，第二个就是2，指明是第几个setInterval函数。
  • clearInterval(value)　　　 value:setInterval()函数返回的值，根据这个值可以停止setInterval()的重复。　
var i = 0;var h = setInterval(function () {
    document.write("3秒输出一次<br/>");
    i++;    if (i >= 3) {
       clearInterval(h);
        document.write("停止输出");
    }
}, 3000);
로그인 후 복사

　　注意，javascript是单线程的，因此，这个定时函数实际上是通过插入执行队列的方式来实现。

　　如下面的代码：

function fn() { 
　　setTimeout(function(){alert(&#39;can you see me?&#39;);},1000); 
　　while(true) {} 
}
로그인 후 복사

　　alert();永远都不会执行，因为线程一直被死循环占用了。

window.location子对象

　　解析URL对象location

　　location对象的属性有：href,protocal,host,hostname,port,pathname,search,hash

        document.write(location.href + "<br/>");        // http://localhost:4889/javascriptTest.html
        document.write(location.protocol + "<br/>");    // http:
        document.write(location.host + "<br/>");        // localhost:4889
        document.write(location.hostname + "<br/>");    // localhost
        document.write(location.port + "<br/>");        // 4889
        document.write(location.pathname + "<br/>");    // /javascriptTest.html
        document.write(location.search + "换行<br/>");  //http://localhost:4889/javascriptTest.html?id=1&name=张三 如果路径是这样，则输出  ?id=1&name=%E5%BC%A0%E4%B8%89
        document.write(location.hash);                  //http: //localhost:4889/javascriptTest.html#kk=你好?id=1&name=张三 如果路径是这样，则输出  #kk=你好?id=1&name=张三
로그인 후 복사

　　载入新文档

　　　　location.reload()　　重新加载页面

　　　　location.replace()　 本窗口载入新文档

　　　　location.assign()　 本窗口载入新文档

　　　　location = "http://www.baidu.com"　　//跳转到指定网址

　　　　location = "search.html"　　　　　　　 //相对路径跳转

　　　　location = "#top"　　　　　　//跳转到页面顶部

　　浏览历史

　　　　History()对象的back()与forward()　　与浏览器的“后退”，"前进"功能一样。

　　　　history.go(-2);　　后退两个历史记录

　　浏览器和屏幕信息

　　　　navigator.appName　　Web浏览器全称

　　　　navigator.appVersion　　Web浏览器厂商和版本的详细字符串

　　　　navigator.userAgent　　客户端绝大部分信息

　　　　navagator.platform　　　浏览器运行所在的操作系统

        document.write(navigator.userAgent + "<br/>"); // Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
        document.write(navigator.appName + "<br/>");   //Netscape
        document.write(navigator.appVersion + "<br/>"); //5.0 (Windows NT 6.1) AppleWebKit/537.11 (KHTML, like Gecko) Chrome/23.0.1271.97 Safari/537.11
        document.write(navigator.platform);             //Win32
로그인 후 복사

窗口的关系

　　　　parent == self　　只有顶级窗口才返回true

　　　　 parent和top属性允许脚本引用它的窗体的祖先，通常窗体是通过