찾다

집  >  기사  >  웹 프론트엔드  >  자바스크립트에서 창은 무엇을 의미하나요?

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

青灯夜游
青灯夜游원래의
2022-02-15 18:06:176020검색

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의 모든 전역 함수나 변수는 창의 속성입니다. . 

8019067d09615e43c7904885b5246f0a
    var name="撼地神牛";
    document.write(window.name);
2cacc6d41bbb37262a98f745aa00fbf0

2. Window 및 self 개체

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

8019067d09615e43c7904885b5246f0a
    document.write(window == self);　　　　　　//必须相等，永远都相等
　　document.write(window.Top == window.self);　　//判断当前框架是否是主框架
2cacc6d41bbb37262a98f745aa00fbf0

　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 픽셀로 조정합니다. 

6c04bd5ca3fcae76e30b72ad730ca86d
    02edad1963adfa90e6b10bbd1f9ab79e
    5eac04ea1d548c5f0f87be4062c2c1b3
    906cd9b2775cac4cefd84b7f6ad07ce0
    9da8ebe7e9ca720a9ab0536518e2c435
    8006252de7d5c35b6d2bd9a854a60b7b
    c2abf7906f931633019d565144f979a3
    cb248f94d1d1b27db7360dfcb5344a36
36cc49f0c466276486e50c850b7e4956

　 양식 스크롤 축 제어 기능:

  • 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 함수의 세 번째 인자 특징 설명 :

입니다.
매개변수 이름 Type Description
height Number 폼의 높이를 100 이상으로 설정합니다. 100
left Number 설명 창 만들기 신체의 왼쪽 좌표는 음수 값입니다
location Boolean 폼에 주소 표시줄이 표시되는지 여부, 기본값은 no입니다
ressible Boolean 폼에서 드래그로 크기 조정이 가능한지 여부 가장자리, 기본값은 no
scrollable Boolean 양식 내부가 창의 가시 범위를 초과할 때 드래그를 허용할지 여부, 기본값은 no
toolbar Boolean폼에 툴바 표시 ​​여부, 기본값은 no
top Number 생성된 폼의 상위 좌표를 기술하며 음수가 될 수 없음
status Boolean 폼 표시 여부 상태 표시줄의 기본값은 no
width Number 생성된 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属性允许脚本引用它的窗体的祖先，通常窗体是通过d5ba1642137c3f32f4f4493ae923989c元素创建的，可以用来获取顶级窗口。 

5、event事件对象

　　最有用的两个操作：阻止事件冒泡。有时return false;不管用，这个或许就管用了。

//IE：
window.event.cancelBubble = true;//停止冒泡
window.event.returnValue = false;//阻止事件的默认行为

//Firefox：
event.preventDefault();// 取消事件的默认行为  
event.stopPropagation(); // 阻止事件的传播

【相关推荐：javascript学习教程】

위 내용은 자바스크립트에서 창은 무엇을 의미하나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript html 全局变量 字符串 循环 Event 线程 JS 对象 事件 dom bom location history href alert http prompt
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：자바스크립트 ID 연산자란 무엇입니까?다음 기사：자바스크립트 ID 연산자란 무엇입니까?

관련 기사

더보기