Iframe asynchronous loading implementation click the left menu to load the right content instance

For asynchronous loading of iframe, we usually use content pages on the right of the Left menu bar, which requires that the content pages on the right be asynchronously loaded if the left menu cannot be refreshed.

In a few words, an instance is roughly like this:

1. First, create three files in your project, for example:

2. Introduce the jquery file on the Default page and add the following code to the body:
Copy codeThe Code is as follows:
<Div style = "width: 20%; float: left">
<Div id = "butten" style = "cursor: pointer;">
Partial refresh (frame loading page)
</Div>
<Div id = "hidden" style = "display: none">
I am hiding it. Click "partial refresh". <br/>
I will show, page loading will not disappear
</Div>
</Div>
<Div id = "page" style = "width: 80%; float: right;">
<Iframe src+'1.htm' frameborder = '0' style = 'border: 0; width: 100%; height: 99.4%; '>
</Iframe>
</Div>
<Script type = "text/javascript">
$ (Function (){
$ ("# Butten"). click (function (){
$ ("# Hidden"). show ();
$ ("Iframe"). attr ("src", "2.htm ");
});
});
</Script>

3rd can write anything in 1.htmand 2.htm at will, or even directly write it like this (any html, title, body, title, etc. can be left blank ):
1. htm:
Copy codeThe Code is as follows:
Page 1 <br/>
Original page

2. htm:
Copy codeThe Code is as follows:
Page 2 <br/>
Page loaded by framework

4. Effect