Iframe is used as a subwindow. After refreshing, what should I do if the iframe page jumps to another page?

 

When developing a website, especially in the management background, we often use iframe as the content window, while the menu is outside, so that we can use iframe to refresh only the content part, without refreshing other parts.

Benefits:

(1) the visual effect provided to the user is better. What the user sees is not to refresh the entire page.

(2) less loaded resources, less time required, and less server traffic consumed.

(3) manage the menu content in a unified manner. You do not need to write menus on every page. You can add menus to facilitate modification.

Disadvantages: (1) not conducive to SEO.

(2) after you click the refresh button of the browser, the original page will be lost and you will be redirected to the page set by default.

 
Because iframe is usually used in the case of many menus, it is generally used to manage the background, so SEO is not considered.

Now we can solve the second drawback, that is, the original page loss in iframe after the page is refreshed.

I. Anchor

We use the anchor to implement this function. As for what the anchor is, it can mark a part of a page. In the url, the anchor follows the anchor, and then the content of the anchor is directly located.

Http: // localhost: 8030/# footer
Assume that the footer anchor can be directly located at the end of the page (of course, this section does not describe how to define an anchor ).

 
II. Ideas

Idea: because the page will not be refreshed when the anchor is located, we can listen to the anchor changes in the url, can I set the value in iframe through js based on the content of this anchor?

The answer is yes.

 
III. Implementation

3.1: monitors changes in the anchor.
The core of the entire process is to listen to the changes in the anchor. It can be imagined that it is an event, but this event is relatively unpopular. I have never heard of this event, that is, the onhashchange event.

Window. onhashchange = function (){
Alert ("changed ");
}

How can I get the content of the anchor?

Window. onhashchange = function () {var hash = location. hash;
Hash = hash. substring (1, hash. length );
Alert (hash );
}
As to why to intercept the string, it is because the content obtained through location. hash is # at the top, so # is removed through substring.

3.2: Set the iframe address

Now that you can monitor the changes in the anchor and get the anchor value, the rest is simple.

Assume that the content of our anchor is the url value of iframe,

The remaining code is

Window. onhashchange = function () {var hash = location. hash;
Hash = hash. substring (1, hash. length );
$ ("# BaseIframe"). attr ("src", "<% = path %>" + url );
}

This completes. Whenever the anchor changes, we set the new address to iframe.

So how do we set the anchor? When you click the menu, call the following method and set the anchor.

Function loadIframe (url ){
Var u = window. location. href;
Var end = u. indexOf ("#");
Var rurl = u. substring (0, end );
// Set a new anchor
Window. location. href = rurl + "#" + url;
}

As for why we want to intercept the string again, because each time we obtain the mutual href, there will be a previous anchor, so we need to remove the previous anchor and then set a new anchor.

3.4: Set the iframe address when loading the page
The current situation is quite good. Now, every time you click a menu, we will set an anchor, and assume that we refresh the browser page, but refresh is refresh, the anchor above the url will still exist.

We only need to set the value in iframe when loading the browser.

Document. addEventListener ('domainloaded', function () {var hash = location. hash; var url = hash. substring (1, hash. length );
$ ("# BaseIframe"). attr ("src", url );
}, False)

The reason why I want to intercept the string here is the same as that in section 3.1. When the page is loaded, set the value in iframe, will not lose the original page.