当前位置：网站首页>BOM (location object, navigation object)

BOM (location object, navigation object)

2022-07-28 22:37:00 【Green hedgerow bamboo maple】

1.location object

window Provides a location Property is used to get or set the name of the form URL, And can be used for parsing URL, Because this property returns an object , Therefore, this attribute is called location object

URL： Uniform resource locator , Standard resource addresses on the Internet , Every document in the history of the Internet has its own URL, It contains information about the location of the file and how the browser should handle it

URL General syntax format

protocol://host[:port]/path/[?query]#fragment

http://www.itcast.cn/index.html?name=andy&age=18#link

form	explain
protocol	Communication protocol , Commonly used http,ftp,matio etc.
host	host （ domain name ）www.itheima.com
port	Port number , Optional , Omit is the default port of the use scheme , such as http Default 80
path	route , There are dragons or more '/' Fu ha separated string , It is generally used to describe a directory or file address on the host
query	Parameters , In the form of key value pairs , adopt & separate
fragment	fragment ,# Buy your content later , Common in links , Anchor point

1.1 location Object properties

location Object properties	Return value
`location.href`	Gets or sets the entire URL
`location.host`	Back to the host （ domain name ）,www.itcast.com
`location.port`	Return port number
`location.pathname`	Return path
`location.search`	Returns the parameter
`location.hash`	Return fragment ,# Later , Common in links , Anchor point

Jump to the page at the specified time

<body>
  <button> Click on </button>
  <div></div>
  <script>
    var btn = document.querySelector('button');
    var div = document.querySelector('div');
    btn.addEventListener('click', function () {
      location.href = 'http://www.itcast.cn';
    })
    var timer = 5;
    setInterval(function () {
      if (timer == 0) {
        location.href = 'http://www.itcast.cn';
      } else {
        div.innerHTML = ' You will be at ' + timer + ' Jump to home page ';
        timer--;
      }
    }, 1000)
  </script>
</body>

1.2 location Object properties

location Object methods	Return value
location.assign()	And href identical , You can jump to the page , You can go back to the page
location.replace()	Replace the current page , Because there's no history , You can't go back to the page
location.reload()	Little red heart loading page , Equivalent to letter page , Parameter is true, Means force refresh

<body>
  <button> Click on </button>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      // location.assign('http://www.itcast.cn');
      location.replace('http://www.itcast.cn');
      location.reload(true);
    })
  </script>
</body>

2.navigation object

navigator Object contains information about the browser , He has many attributes , The most common is userAgent, This property can return the information sent by the client to the server user-agent The value of the head

The code used to judge the equipment

  <script>
    if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|woSBrowser|BrowserNG|WebOS|Symbian|WindowsPhone)/i))) {
      window.location.href = "";// mobile phone 
    } else {
      window.location.href = "";// The computer 
    }
  </script>

3.histroy object

window Object provides us with a history object , Interact with browser history , This object contains the user （ In the browser window ） Visited URL

history Object methods	effect
back()	You can step back
forward()	Forward
go( Parameters )	Forward and backward function , Parameters 1 It means to advance one page , Parameters -1 Means to go back one page


<body>
  <a href="login.html"> Click to go to the login page </a>
  <button> back off </button>
  <script>
    var btn = document.querySelector('button');
    btn.addEventListener('click', function () {
      history.back();
      history.go(-1);
    })
  </script>
</body>

原网站

版权声明
本文为[Green hedgerow bamboo maple]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/196/202207130601355023.html

当前位置：网站首页>BOM (location object, navigation object)

BOM (location object, navigation object)

边栏推荐

猜你喜欢

随机推荐