자바스크립트 BOM

php中世界最好的语言원래의: 2018-02-26 09:21:072117검색

이번에는 JavaScript BOM을 들고 왔습니다. JavaScript BOM 사용 시 주의사항은 무엇인가요?

위치 개체
위치 개체는 현재 창에 로드된 문서에 대한 정보를 제공하고 일부
탐색 기능도 제공합니다. 이는 창 개체와 문서 개체 모두의 속성입니다.
구문: location.href
기능: 현재 로드된 페이지의 전체 URL을 반환합니다.
설명: location.href는 window.location.href와 동일합니다.
구문: location.hash
기능: URL에 해시를 반환합니다(#는 뒤에옴) 0 또는 여러 문자로), 포함되지 않은 경우 빈 문자열을 반환합니다.
구문: location.host
함수: 서버 이름과 포트 번호(있는 경우)를 반환합니다.
구문: locationhostname
함수: 포트 번호 없이 서버 이름을 반환합니다. .
구문: location.pathname
기능: URL에 디렉터리 및/또는 파일 이름을 반환합니다.
구문: location.port
기능: URL에 지정된 포트 번호를 반환하고, 그렇지 않은 경우 빈 문자열을 반환합니다.
구문: location.protocol
기능: 페이지에서 사용하는 프로토콜을 반환합니다.
구문: location.search
기능: URL의 쿼리 문자열을 반환합니다. 이 문자열은 물음표로 시작됩니다.
구문: location.replace(url)
기능: 리디렉션 URL
설명: location.replace를 사용하면 기록 레코드에 새 레코드가 생성되지 않습니다.
구문: location.reload()
기능: 현재 표시된 페이지를 다시 로드합니다.
설명:
location.reload()는 버퍼에서 로드하려고 합니다.
location.reload(true)는 서버에서 다시 로드합니다.
history 개체
history 개체는 사용자가 브라우저에 방문한 페이지 기록을 저장합니다.
구문: 역사 .back()
Function: 기록의 이전 단계로 돌아갑니다
설명: History.go(-1)
사용과 동일합니다. 구문: location.forward()
Function: 기록의 다음 단계로 돌아갑니다. Record
설명: Yu가 사용하는 것과 동일한history.go(1)
구문:history.go(-n)
기능:역사 기록의 처음 n단계로 돌아갑니다.
구문:history.go(n)
기능:Go 기록 기록의 마지막 n 단계로 돌아가기
navigator object
useragent: 브라우저 이름, 버전, 엔진, 운영 체제 및 기타 정보를 식별하는 데 사용됩니다.
screen object
구문: screen.availWidth
Function: 사용 가능한 화면 너비 반환
구문: screen.availHeight
Function: 사용 가능한 화면 높이 반환

location01.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box1{
            height: 900px;
            background: #ccc;
        }
        .box2{
            height: 500px;
            background-color: #333;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div></div>
    <input type="button" id="btn" value="返回顶部">
    <script>
        btn.onclick = function () {
            location.hash = &#39;#box1&#39;;
            console.log(location.hash);
        }
        console.log(location.href);
        console.log(location.hash);
        console.log(location.host);
        console.log(location.hostname);
        console.log(location.pathname);
        console.log(location.port);
        console.log(location.protocol);
        console.log(location.search);
    </script>
</body>
</html>

location02.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="刷新" id="btn">
    <script>
        /*setTimeout(function () {
            //location.href = "https://www.baidu.com";
            //window.location = "https://www.baidu.com";
            location.replace("https://www.baidu.com");
        },1000);*/
        document.getElementById(&#39;btn&#39;).onclick = function () {
            location.reload();
            //location.reload(true);
        }
    </script>
</body>
</html>

history01.html :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="example_2.html">example_2.html</a>
    <input type="button" value="后退" id="btn1">
    <input type="button" value="前进" id="btn2">
    <script>
        var btn1 = document.getElementById(&#39;btn1&#39;);
        var btn2 = document.getElementById(&#39;btn2&#39;);
        btn1.onclick = function () {
            //history.back();
            history.go(-1);
        }
        btn2.onclick = function () {
            history.forward()
            //history.go(1);
        }
    </script>
</body>
</html>

navigator.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        function getBrowser() {
            var explorer = navigator.userAgent.toLowerCase();
            var browser = "";
            if (explorer.indexOf("msie")>-1) {
                browser = "IE";
            } else if (explorer.indexOf("chrome")>-1){
                browser = &#39;Chrome&#39;;
            } else {
                browser = &#39;asdf&#39;;
            }
            return browser;
        }
        var msg = "您用的是" +getBrowser()+&#39;浏览器&#39;;
        console.log(msg);
    </script>
</body>
</html>

screen.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <script>
        console.log(screen.availWidth);
        console.log(screen.availHeight);
        console.log(window.innerWidth);
        console.log(window.innerHeight);
    </script>
</body>
</html>

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목해 보세요!