JS History Object Phone physical return key

Interested can understand the next history object, not interested can also jump directly to the phone physical return key monitoring section

"HistoryObject" has the length property, Go ()/back ()/forward () Jump method ****************************

We want to know the history object of the browser, the historical object holds the user's internet record, from the moment the window is opened; The History.length property holds the number of URLs for the history record. Initially, the value is 1. If the current window has access to three URLs successively, the History.length property equals the 3;history object provides a series of methods that allow movement between browsing history, including Go (), back (), and forward ().

The Go () method can jump anywhere in the user's history. This method takes a parameter that represents an integer value for the number of pages that jump backwards or forwards.

Go (negative integer): Indicates a backward jump (similar to a back button)

Go (positive integer): Indicates a forward jump (similar to the forward button)

Example:

　　

Go () method is equivalent to History.go (0) when there is no parameter, can refresh the current page

Example:

　　

"Back ()"

The back () method is used to mimic the browser's fallback button, equivalent to History.go (-1)

"Forward ()"

The forward () method is used to mimic the browser's forward button, which is equivalent to History.go (1)

Example:

　　

If the moved position exceeds the access history boundary, the above three methods do not error, but silent failure

"Attention" when using history, the page is typically loaded from the browser cache instead of requesting the server to send a new page

Monitor phone physical return key ************************************

Example:

A page jumps to the B page, listens to the B page return key, and does the corresponding operation, then can write the following listener event in the B-page JavaScript script

Pushhistory ();

function pushhistory () { //Just go to page B and go to history pushstate a URL

var state = {
Title:"title", //can pass null value ""

URL:"#"};

Window.history.pushState (state,"title", "#");

}

Window.addeventlistener ("Popstate",function(e) { ///As long as the B page presses the physical return key of the phone, it will be heard

　　Why are you doing this?

Weixinjsbridge.invoke (' CloseWindow ', {},function(res) {}); //JS code close the current page

　　window.location = "http://www.baidu.com"; Skip to Baidu Page

},false);

Or

$ (function() {
Window.history.pushState ("", "", "#");
})
Window.addeventlistener ("popstate", function (e) {
　　Why are you doing this?
})

The above code on the phone to monitor the physical return keys and processing, the following are interested to understand

We all know that in the browser page, you can not know the actual URL to achieve back and forward, but due to security considerations, the developer can not get the URL of the user's browser or modify the history of the URL link;

HTML5 adds two new methods to the History object, History.pushstate () and History.replacestate (), which are used to add and modify records in the browsing histories (two methods use the same method, The difference is that pushstate changes the length property of the History object, and Replacestate does not).

Pushstate (equivalent to the stack) can be added to the history of the URL link, popstate (equivalent to the stack) event monitoring from the history stack pop-up URL. Since Popstate event monitoring is available, we can listen to the popstate.

Note

Popstate event when the history of the same document changes, the Popstate event is triggered;

It is important to note that only pushstate and replacestate do not trigger the event, only the user clicks the browser's forward, Back button to trigger, or calls Go ()/back ()/forward () using JavaScript to trigger In addition, the event is valid only for the same document, and does not trigger if the browser history switches to load different documents.

No Refresh page Toggle: Use the following API

"History.state": status information corresponding to the current URL

If the current URL is not generated by pushstate or replacestate, then the history.state is null;

"History.pushstate (state, title, URL)": Adds the current URL and history.state to the history and replaces the current with the new state and URL. does not cause page refresh;

State: The status information corresponding to the URL to jump

Title: Empty characters can be

URL: The address to jump to, not across domains (cross-domain error)

"History.replacestate": Replace the current with the new state and URL, will not cause the page to refresh;

State: The status information corresponding to the URL to jump

Title: Empty characters can be

URL: The address to jump to, not across domains (cross-domain error)

"Window.onpopstate"

History.go and History.back (including the user press the browser history forward Back button) trigger, and when the page is not brushed (because the use of pushstate modified history) will trigger the Popstate event, when the event occurs, the browser will remove the URL and the corresponding St Ate object Replacement when

Before the URL and history.state. History.state can also be obtained through event.state.

" round-trip cache "

By default, the browser caches the page in the current session, and when the user taps the forward or Back button, the browser loads the page from the cache, and the browser has a feature called "Round-trip cache" (Back-forward cache or Bfcache). You can speed up the conversion of a page when the user uses the browser's back and forward buttons. This cache not only preserves the page data, but also preserves the state of the DOM and JavaScript, and actually saves the entire page in memory. If the page is in Bfcache, the Load event will not be triggered when the page is opened again

AddEventListener () method, Event Listener (RemoveEventListener () method to remove a set of listener events)

Syntax: Element.addeventlistener (event,function,usecapture);

Parameters:

　　element: documentation node, document, window, or XMLHttpRequest

　　Event : types of events, such as "click" or "MouseDown"

　　function : functions called after the event is triggered or implemented EventListener interface

　　usecapture: Boolean value that describes whether the event is bubbling or capturing, parameter optional, default false (bubbling)

Note: The event does not use the "on" prefix. For example, use "click" instead of "onclick"

Example:

Element.addeventlistener ("click"function (){alert ("Hello world!");});
Equivalent

Element.addeventlistener ("click", MyFunction);

function MyFunction () {

Alert ("Hello world!");
}
To add an event to a Window object

Window.addeventlistener ("resize"function() {

document.getElementById ("Demo"). InnerHTML = Sometext;

});

Event bubbling or capturing?

There are two ways to pass events: bubbling, capturing,

Event passing defines the order in which elements are triggered, and if you insert the <p> element into the <div> element, the user taps the <p> element and which element's "click" event is first triggered?

In   bubbling  , an inner element's event is triggered first, and then an external element is triggered, that is: The <p> element's Click event is triggered first, and then the <div> element's Click event is triggered.

In a  capture  , an event of an external element is first triggered before the event of the inner element is triggered, that is: The <div> element's Click event is triggered first, and then the <p> element's Click event is triggered.

The AddEventListener () method can specify the "usecapture" parameter to set the delivery type:

AddEventListener (event, function,  usecapture);

The default is false, which is the bubbling pass , when the value is true, and the event uses capture delivery.

Example:

document.getElementById ("Mydiv"). AddEventListener ("Click", MyFunction, True);

"RemoveEventListener () method"

Element.removeeventlistener ("MouseMove", myFunction);

"Browser-compatible processing"
var x = document.getElementById ("mybtn"); if (X.addeventlistener) {                    //All major browsers except IE 8 and earlier    X.addeventlistener ("click", MyFunction);} else if (x.attachevent) {                  ///IE 8 and earlier version    x.attachevent ("onclick", myFunction);}
IE 8 and earlier versions of IE, Opera 7.0 and earlier versions do not support the AddEventListener () and RemoveEventListener () methods.
However, for this type of browser version, you can use the DetachEvent () method to remove the event handle:

Element.attachevent (event, function); Element.detachevent (event, function);

*****************************

Mobile phone side pop-up window

$. Pop.showalert ({
Content: "prompt Information",

Yes: Event executed afterfunction() { //point is determined
Window.location.href = "http://www.baidu.com"; //Jump to Baidu page
}
});

JS History Object Phone physical return key