jquery has a load() method, the usage method is as follows: $("#div").load("/index.html"); In this way, you can load index.html into the container with the ID of div, use
iframe can also be implemented, but it is not as perfect as the above method. See discuz websites. For example, a layer pops up when logging in, which is also a loaded page. However, I found that about:blank appears on the left side of the status bar. I don’t know if iframe is being used. Set the src to about:blank, and then edit the iframe? But notice that when viewing the source code, you can’t see the source code of the loaded page. I don’t know if this is the case. I used the same analysis method as jquery to analyze the head, then added the header information of the loading page to the head of the main page, and then used the eval() function to execute the javascript code. Solution?
I used a page as the bearer below. The container that loads the page source code is named do.html. Pass a parameter uri to tell do.html the page to be loaded!
Example DEMO: http://mi.8866.org:2/management.aspx/ Just click to log in
This page loads two js files
The source code of do.html is:
File:do.js
document.write("");
document.write("");
window.onload=function(){
j.plus.loadPage({uri:"/",time:1},{
start:function(){/*receipt function to start loading*/},
over:function(){/*receipt function to complete loading*/}});
}
loadPage is defined 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: waiting loading time (milliseconds);
callback: receipt function (callback.start(), callback.over())
e.element page container; */
if(!r.uri)alert('page uri parameters not 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='Loading ';}},
error:function(x){if(e)e.innerHTML='Loading failed!';else document.body.innerHTML='Loading 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 the ajax request object defined in global.js
* timer is the code to implement a timer, which is defined in plus.js*/
The function has been defined Completed, we add the code where it needs to be loaded:
File:/management.aspx/
var bd=j.$("mainbody"); // mainbody is a div container
var uri="/do.html?uri=/management.aspx/" uri;
bd.innerHTML="
