抽象方法示例_示例介绍JavaScript窗口方法

抽象方法示例

窗口定位方法 (Window location Method)

The window.location object can be used to get information on the current page address (URL) and to redirect the browser to a new page.

window.location对象可用于获取有关当前页面地址(URL)的信息，并将浏览器重定向到新页面。

The window.location object can be written without the window prefix, as just location.

window.location对象可以不带window前缀而只写location 。

一些例子： (Some examples:)

• window.location.href returns the href (URL) of the current page

  window.location.href返回当前页面的href(URL)

• window.location.hostname returns the domain name of the web host

  window.location.hostname返回虚拟主机的域名

• window.location.host returns both the host name and any associated port

  window.location.host返回主机名和任何关联的端口

• window.location.pathname returns the path and filename of the current page

  window.location.pathname返回当前页面的路径和文件名

• window.location.protocol returns the web protocol used (http: or https:)

  window.location.protocol返回使用的Web协议(http：或https ：)

• window.location.assign() loads a new document

  window.location.assign()加载新文档

更多信息： (More Information:)

MDN

MDN

窗口setInterval方法 (Window setInterval Method)

The setInterval() method calls a function or evaluates an expression at specified intervals (in milliseconds).

setInterval()方法以指定的时间间隔(以毫秒为单位)调用函数或计算表达式。

setInterval(function(){ 
  alert("Hello");
}, 3000);

The setInterval() method will continue calling the function until clearInterval() is called, or the window is closed.

setInterval()方法将继续调用该函数，直到调用clearInterval()或关闭窗口为止。

The setInterval() method can pass additional parameters to the function, as shown in the example below.

setInterval()方法可以将其他参数传递给该函数，如下例所示。

setInterval(function, milliseconds, parameter1, parameter2, parameter3);

The ID value returned by setInterval() is used as the parameter for the clearInterval() method.

setInterval()返回的ID值用作clearInterval()方法的参数。

Tips:

提示：

• 1000 ms = 1 second.
  1000毫秒= 1秒。

• To execute a function only once, after a specified number of milliseconds, use the setTimeout() method.

  要在指定的毫秒数内仅执行一次函数，请使用setTimeout()方法。

窗口setTimeout方法 (Window setTimeout Method)

The setTimeout() method sets a timer in milliseconds, then calls a function or evaluates an expression when the timer runs out.

setTimeout()方法以毫秒为单位设置计时器，然后在计时器用尽时调用函数或评估表达式。

Notes:

笔记：

• setTimeout() uses milliseconds, and 1000 ms is equal to 1 second

  setTimeout()使用毫秒，并且1000 ms等于1秒

• This method only executes the function or expression you pass to it once. Use the setInterval() method if you need to repeat the execution multiple times

  该方法仅执行一次传递给它的函数或表达式。 如果需要多次重复执行，请使用setInterval()方法

• To stop the function or expression passed to it, use the clearTimeout() method

  要停止传递给它的函数或表达式，请使用clearTimeout()方法

The syntax of the setTimout() method is as follows:

setTimout()方法的语法如下：

setTimeout(function, milliseconds, param1, param2, ...);

For example:

例如：

setTimeout(function() { 
  alert("Hello");
}, 3000);

A very important thing to remember about setTimeout() is that it's executed asynchronously:

关于setTimeout() ，要记住的一个非常重要的事情是它是异步执行的：

console.log("A");
setTimeout(function() { console.log("B"); }, 0);
console.log("C");

// The order in the console will be
// A
// C
// B

The order of the console logs is probably not what you expected. To solve this problem and make sure that your code is executed synchronously, you just need to nest the last console.log statement in the function:

控制台日志的顺序可能不是您期望的。 要解决此问题并确保代码同步执行，您只需要在函数中嵌套最后一个console.log语句：

console.log("A");
setTimeout(function() {
    console.log("B");
    console.log("C");
}, 0);

// The order in the console will be
// A
// B
// C

窗口clearTimeout方法 (Window clearTimeout Method)

The clearTimeout() method is used stop a timer set with the setTimeout() method.

clearTimeout()方法用于停止使用setTimeout()方法设置的计时器。

clearTimeout(setTimeout_ID);

To be able to use the clearTimeout() method, you must use a global variable. See the example below

为了能够使用clearTimeout()方法，必须使用全局变量。 参见下面的例子

The clearTimeout() method works by using the id that's returned by setTimeout(). Because of this, it's often a good idea to use a global variable to store setTimeout(), then clear that when necessary:

clearTimeout()方法通过使用setTimeout()返回的id来工作。 因此，通常最好使用全局变量存储setTimeout() ，然后在必要时清除该变量：

const myTimeout = setTimeout(function, milliseconds);

...

// Later, to clear the timeout
clearTimeout(myTimeout);

窗口clearInterval方法 (Window clearInterval Method)

The clearInterval() method is used to clear a timer set with the setInterval() method.

clearInterval()方法用于清除使用setInterval()方法设置的计时器。

clearInterval(setInteval_ID);

The clearTimeout() method works by using the id that's returned by setInterval(). Because of this, it's often a good idea to use a global variable to store setInterval(), then clear that when necessary:

clearTimeout()方法通过使用setInterval()返回的id来工作。 因此，通常最好使用全局变量存储setInterval() ，然后在必要时清除该变量：

const myInterval = setInterval(function, milliseconds);

...

// Later, to clear the timeout
clearInterval(myInterval);

窗口localStorage方法 (Window localStorage Method)

localStorage provides a way for your web applications to store key/value pairs locally within the user’s browser.

localStorage为您的Web应用程序提供了一种在用户浏览器中本地存储键/值对的方法。

Before HTML5 and localStorage, web app data had to be stored in cookies. Every HTTP request includes cookies, and these were once a legitimate method for storing application data locally on client devices. However, a lot of the same data was being transmitted with cookies, and since they were limited to around 4 KB of data, it was difficult to store everything your application needed.

在HTML5和localStorage之前，Web应用程序数据必须存储在cookie中。 每个HTTP请求都包含cookie，而cookie曾经是在客户端设备上本地存储应用程序数据的合法方法。 但是，许多相同的数据都通过Cookie传输，并且由于它们限于大约4 KB的数据，因此很难存储应用程序所需的所有内容。

The storage limit for localStorage is 10 MB of data per domain, and it is considered more efficient because the information stored in it is never transferred to the server with every request.

localStorage的存储限制是每个域10 MB的数据，这被认为是更有效的，因为其中存储的信息永远不会在每次请求时都传输到服务器。

Web存储的类型 (Types of Web Storage)

localStorage is one of two modern methods for browsers to store data locally:

localStorage是浏览器在本地存储数据的两种现代方法之一：

• localStorage: This stores data with no expiration date. The data in localStorage persists even when the user’s browser is closed and reopened.

  localStorage ：存储没有到期日期的数据。 即使关闭并重新打开了用户的浏览器， localStorage的数据也会保留。

• sessionStorage: This is similar to localStorage, except that it stores data for one session only. This data is removed once the user closes their browser.

  sessionStorage ：它类似于localStorage ，除了它仅存储一个会话的数据。 用户关闭浏览器后，该数据将被删除。

HTML5 localStorage方法 (HTML5 localStorage Methods)

localStorage comes with a few different JavaScript methods that makes it very easy to work with.

localStorage带有一些不同JavaScript方法，使其非常易于使用。

To set data:

设置数据：

localStorage.setItem('Name', 'somevalue');

To retrieve some data from storage:

要从存储中检索一些数据：

localStorage.getItem('Name');

To remove or delete some data:

要删除或删除一些数据：

localStorage.removeItem('Name');

To clear everything in storage (not just an individual item):

要清除存储中的所有内容(而不仅仅是单个项目)：

localStorage.clear();

To get the number of properties in storage:

要获取存储中的属性数：

localStorage.length;

Note: All of the methods above also work with sessionStorage. Simply replace localStorage with sessionStorage.

注意：上面所有方法都可以与sessionStorage 。 只需将sessionStorage替换为localStorage 。

开窗方式 (Window open Method)

The Window open() method is used to open a new browser window or tab, depending on the parameters and the user's browser settings. This method is typically used for popups, and is blocked by default in a lot of modern browsers.

Window open()方法用于打开新的浏览器窗口或标签，具体取决于参数和用户的浏览器设置。 该方法通常用于弹出窗口，并且在许多现代浏览器中默认情况下被阻止。

The syntax of the open() method is:

open()方法的语法为：

const window =  window.open(url, windowName, windowFeatures);

参量 (Parameters)

• url: A string for the resource you want to load.

  url ：您要加载的资源的字符串。

• windowName: A string indicating the target name of the new window or tab. Note that this will not be used as the title for the new window/tab.

  windowName ：一个字符串，指示新窗口或选项卡的目标名称。 请注意，这将不会用作新窗口/选项卡的标题。

• windowFeatures: An optional comma-separated list of strings of features such as the size of the new window, its position, whether or not to display the menu bar, and so on.

  windowFeatures ：字符串的可选逗号分隔列表，例如新窗口的大小，其位置，是否显示菜单栏等。

例 (Example)

let windowObjectReference;
const strWindowFeatures = "menubar=yes,location=yes,resizable=yes,scrollbars=yes,status=yes";

function openRequestedPopup() {
  windowObjectReference = window.open("https://www.freecodecamp.org/", "fCC_WindowName", strWindowFeatures);
}

openRequestedPopup();

The above code will attempt to open a popup to the freeCodeCamp landing page.

上面的代码将尝试打开一个弹出到freeCodeCamp登录页面的弹出窗口。

窗口确认方法 (Window Confirm Method)

You can use the confirm method to ask a user to double check a decision on a web page. When you call this method, the browser will display a dialog box with two choices along the lines of “OK” and “Cancel.”

您可以使用confirm方法来要求用户仔细检查网页上的决定。 调用此方法时，浏览器将显示一个对话框，其中包括“确定”和“取消”两行。

For example, say someone has just clicked a Delete button. You could run the following code:

例如，假设某人刚刚单击“删除”按钮。 您可以运行以下代码：

if (window.confirm("Are you sure you want to delete this item?")) {
  // Delete the item
}

The message “Are you sure you want to delete this item?” will appear in the dialog box. If the user clicks OK, the confirm method will return true and the browser will run the code inside the if statement. If he or she clicks Cancel, the method will return false and nothing else will happen. This provides some protection against someone accidentally clicking Delete.

消息“您确定要删除此项目吗？” 将出现在对话框中。 如果用户单击“确定”，confirm方法将返回true ，浏览器将在if语句中运行代码。 如果他或她单击“取消”，则该方法将返回false并且不会发生其他任何事情。 这样可以防止有人意外单击“删除”。

翻译自: https://www.freecodecamp.org/news/javascript-window-methods-explained-with-examples/

抽象方法示例