Iframe framework, native JS routing

One 、iframe frame

1. iframe label

This label specifies an inline frame . Used in the current HTML Embed another document in the document .

You can put the required text in and Between

2. Attribute summary

attribute	describe
align	Specifies how to align according to the surrounding elements
frameborder	Specify whether to display The surrounding border .
height|width	Regulations The width and height of .
marginheight|width	Regulations The top and bottom margins of
name	Regulations The name of
scrolling	Stipulate whether it is Scroll bar... In
src	Regulations Of the document shown in URL
srcdoc	HTML_code Specify... In the page HTML The content is shown in in

3.JS operation iframe

(1) get iframe Of window object

function getIframeWindow(element){
    
return element.contentWindow;
//return element.contentWindow || element.contentDocument.parentWindow;
}

(2) get iframe Of document object

var getIframeDocument = function(element) {
    
return element.contentDocument || element.contentWindow.document;
};

(3) iframe To get the window object

(4) get iframe In the parent page html label

(5) iframe Of onload event

var i = document.createElement('iframe');
i.src = 'http://www.b.com/index.php';
i.onload = function() {
    
alert('loaded');
};
document.body.appendChild(i);

Two 、 Native js route

be based on hash（ location.hash+hashchange event ）
The presentation level is also called switching # Later , Present different pages to users

characteristic ：

url in hash A change in value does not reload the page hash
Change in value , You can add a record to the browser's access history , That is to say, you can go back through the browser 、 Forward button control hash Handoff

Can pass hashchange event , Listen to the hash Change in value , So as to respond to the logical processing of different paths

be based on history new API（ history.pushState()+popState event ）

window.history.pushState(null, null, "http://www.google.com");

Similarities :
Will operate the history of the browser , Without causing a page refresh .
The difference is :
pushState A new history will be added , and replaceState The current history will be replaced

Implement front end routing

(1) hash Realization

When A window hash （URL in # Back section ） When it changes, it triggers hashchange event

hash yes URL in hash (#) And the back part , It is often used as an anchor to navigate the page , change URL Medium hash Some will not cause page refresh

adopt hashchange Event monitoring URL The change of , change URL There are only a few ways ： Move forward and backward through the browser to change URL、 adopt <a>
Label change URL、 adopt window.location change URL, These changes URL Will trigger hashchange event

(2) history Realization

history.pushState() and history.replaceState Method , They can add and modify history entries, respectively

history Yes pushState and replaceState Two methods , These two methods change URL Of path Some will not cause page refresh

• replaceState() Method

history.replaceState() Use and history.pushState() Very similar , The difference lies in

replaceState() It is to modify the current history entry instead of creating a new one . Note that this does not prevent it from creating a new history entry in the global browser history .

replaceState() The usage scenario of is to respond to user actions , You want to update the status object state Or the current history URL.

• popstate event

popstate Events will correspond to window Trigger on object .

call history.pushState() perhaps history.replaceState() Not trigger popstate event .
popstate Events are triggered only under certain behaviors of the browser , For example, click back 、 Forward button ( perhaps
stay JavaScript Call in history.back()、history.forward()、history.go() Method ).