Javascript+iframe to implement code _javascript for full page without refreshing skills

Source: Internet
Author: User
jquery has a load () method that uses methods such as: $ ("#div"). Load ("/index.html"), so you can load index.html into a container with ID div.
With an IFRAME can also be achieved, but not perfect, see discuz those sites, such as landing a pop-up layer, is also a load of a page, but I found the status bar on the left is open About:blank, do not know is the iframe of the SRC set for about: Blank, and then edit the IFRAME? But notice that when you look at the source, you can't see the load page's source code, and I don't know if I used the same analysis head as jquery, and then add the header information of the page to the head of the main page. Then execute the JavaScript code with the eval () function, and solve it?
I used a page as a container to load the source code of the page, named Do.html, passing a parameter URI to tell do.html to load the page!
Example demo:http://mi.8866.org:2/management.aspx/direct point landing can be
The page loaded with two JS files
Copy Code code as follows:

<script type= "Text/javascript" src= "/image/script.ashx/global.js?ver=1.0.0" ></script>
<script type= "Text/javascript" src= "/image/script.ashx/plus.js?ver=1.0.0" ></script>

The source code for the do.html is:
Copy Code code as follows:

<title> Loading in ...</title>
<script type= "Text/javascript" src= "/image/script.ashx/do.js?ver=1.0" ></script>
<body>
</body>

File:do.js
Copy Code code as follows:

document.write ("<script src=\"/image/script.ashx/global.js?ver=1.0.0\ "></script>");
document.write ("<script src=\"/image/script.ashx/plus.js?ver=1.0.0\ "></script>");
Window.onload=function () {
J.plus.loadpage ({uri: "/", time:1},{
Start:function () {//* Start loading Receipt function */},
Over:function () {/* Load completed receipt function/}});
}

The definition of LoadPage is as follows:
Copy Code code as follows:

if (!typeof (WINDOW.J)) Window.j=new JS ();
J.plus=new Plus ();
Function Plus () {}
Plus.prototype.loadpage=function (r,callback,e,times) {
/*
R request; R.time: Wait for loading time (milliseconds);
Callback: Receipt function (Callback.start (), Callback.over ())
E.element page container; */
if (!r.uri) alert (' page URI parameters not to be found! ');
var aj=new ajax ();
Aj.request (r,{
Start:function () {if (Callback.start) Callback.start (); if (e) e.innerhtml= ' loading ... '; Else{document.body.innerhtml= ' in load ';}},
Error:function (x) {if (e) e.innerhtml= ' load failed! '; Else document.body.innerhtml= ' load failed ';},
Success:function (x) {
var func=function () {if (callback.over) callback.over (); if (e) E.innerhtml=x;else document.write (x);};
if (r.time) {var t=new timer (R.time,func); T.start ();} /* Delay Display * *
else func ();
}});
}
/*aj is defined for Ajax request objects in Global.js
* Timer for the implementation of a timer code, in the plus.js definition * * *

function already defined, we add code where we need to load:
file:/management.aspx/
Copy Code code as follows:

var bd=j.$ ("Mainbody"); Mainbody as a div container
var uri= "/do.html?uri=/management.aspx/" +uri;
Bd.innerhtml= "<iframe src= '" +uri+ "' frameborder= ' 0 ' width= '" + (j.x () -200) + "' height= ' 100% ' scrolling= ' no ' >< /iframe> ";

Because the do.html is cached, the returned HTML is exported to the do.html in Do.js with Ajax
Online Demo Address http://demo.jb51.net/js/menu_iframe/index.htm

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.