前段时间因为有需要，要在div中加载一个页面。但是以前没做过，不懂。于是到网上查了很多资料都没有相关的东西。后来在前辈的指点下明白了一些，现分亨给大家。
首先一个页面：
<html>
<head>
<mce:script type="text/javascript" src="sub.js" mce_src="sub.js"></mce:script>
<mce:style type="text/css"><!--
.class1{
color:red;
}
--></mce:style><style type="text/css" mce_bogus="1"> .class1{
color:red;
}</style>
</head>
<body>
<div style="border:1px solid black" mce_style="border:1px solid black">
sub.html页面。
<input type="button" value="sub.js里边的sub_js方法。" οnclick="sub_js();"/><br/>
<mce:script type="text/javascript"><!--
function page1()
{
alert("page1");
}
function page2()
{
alert("page2");
}
// --></mce:script>
<input type="button" value="page1" class="class1" οnclick="page1();"/><br/>
<input type="button" value="page2" style="color:red" mce_style="color:red" οnclick="page2();"/>
</div>
</body>
</html>sub.js文件里边有一个函数：sub_js(){alert("sub_js()");}
然后要加载该页面的div的页面。下边在获取字符串中的js或css文件时，有可能有其它的不符合规定的出现，因此这里可能解析代码不正确，如果你有好的解析方法，就给我指点指点吧。。。
<html>
<head>
<title>parent.html</title>
<mce:script type='text/javascript'
src='/dwr2/dwr/interface/httpContentRead.js'><!--
// --></mce:script>
<mce:script type='text/javascript' src="/dwr2/dwr/engine.js" mce_src="dwr2/dwr/engine.js"><!--
// --></mce:script>
<mce:script type='text/javascript' src="/dwr2/dwr/util.js" mce_src="dwr2/dwr/util.js"><!--
// --></mce:script>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="otherPage">
</div>
<mce:script type="text/javascript"><!--
var page1;//因为要嵌入的页面定义了这两个函数变量，因此这里定义。然后在解析出来的页面中直接赋值给他
var page2;
var url = "http://192.168.1.100:81/sub.html";
var url_parent = "http://192.168.1.100:81/";//url的父路径
function abc(){
//下边使用dwr框架（ajax对java的一个高级框架）进行获取目标页面中的内容。
//当然也可以使用其它框架或纯的ajax，这里只是得到了一个目标页面的内容。
httpContentRead.getContextEncoding(url, "gbk", function(date){
_b(date);
});
}
function _b(d)//处理。
{
getJsUrls(d);//获取页面中的所有js文件及js代码。当然如果有css样式文件的话，也一样要按照获取js文件的方式来获取。
var head = document.getElementsByTagName("head")[0];//获取到的heads对象不管你怎么写都有且仅有一个
for (var i = 0; i < jsUrls.length; i++) {
//创建一个script对象，如果你的目标页面有css引用的话，也要这样来加载
var scriptObj = document.createElement("script");
scriptObj.src = disposeUrl(jsUrls[i]);
scriptObj.type = "text/javascript";
head.appendChild(scriptObj);
}
//对非js文件中的js脚本有点麻烦。
//另外如果目录页面有写在style标记中间的样式，是不能加这样加载的，
var str="";
for(var i=0;i<jsFuns.length;i++)
{
str+=jsFuns[i];
}
eval（str);//先把这些零散的脚本执行。
this.page1=page1;//然后再把这些脚本变量（局部变量）赋值给外边的全局变量
this.page2=page2;
$("otherPage").innerHTML = d;//把得到的页面放到otherPage这个div中。$()这个是dwr框架中定义的一个函数。是查找页面中的控件并返回
}
var jsUrls = new Array();//页面引入的js文件
var jsFuns = new Array();//页面写的独立的js
function getJsUrls(str){//获取指定字符串中的js文件和js函数
str = str.toLowerCase();
var begin = -1;
var end = -1;
var temp = "";
while ((begin = str.indexOf("<script")) >= 0) {
end = str.indexOf("<//script", begin + 7);
temp = str.substring(begin, end);
if (temp.indexOf("src=") >= 0) {//如果有src=的话，则是引入了js文件
jsUrl = temp.substring(temp.indexOf("src=") + 4, temp.indexOf(".js") + 3);//把script
if (jsUrl.indexOf("/"") == 0)//如果获取到的js文件是以引号开头，则去掉它
jsUrl = jsUrl.substring(1);
jsUrls[jsUrls.length] = jsUrl;
}
else {//处理单独写在页面中的js代码
jsFun = temp.substring(temp.indexOf(">") + 1);
jsFuns[jsFuns.length] = jsFun;
}
str = str.substring(end + 9);
}
}
/**
* 处理url。
* 主要是页面中js或css的引用目录可能以以下的方法来书写
* src="http://XXX";src="../XXX";src="./XXX";src="XXX";
* @param {Object} url
*/
function disposeUrl(url){
if ((/^http:.*$/i).test(url) == false) {
if (url.indexOf("/") == 0) {
urls = url.split("/");//如果url是以应用服务器的应用程序开始这样处理
url = urls[0] + "/" + urls[1] + "/" + urls[2] + url;
}
else //如果是以./或../或直接与页面在同一父目录中，直接接上父路径
url = url_parent + url;
}
return url;//把处理后的url返回
}
abc();
// --></mce:script>
</body>
</html>这个页面里边使用了dwr来读取目标页面的全部内容（以字符串形势返回，如果不懂dwr的话，可以使用其它ajax技术来得到），下边使用的是dwr框架来读取目标页面内容的java代码。
package sky.dwr;
import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStream;
import java.io.InputStreamReader;
import java.net.URL;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.ScriptScope;
import org.directwebremoting.create.NewCreator;
/**
* 得到指定url的页面内容
*
* @author sky
*
*/
// dwr元注释配置
@RemoteProxy(name = "httpContentRead", creator = NewCreator.class, scope = ScriptScope.PAGE)
public class HttpContentRead {
/**
* 根据指定的解码方式得到目标页面的内容。
*
* @param urlStr
* 目标页面的url
* @param encoding
* 指定的解码方式
* @return 返回得到的内容
*/
@RemoteMethod
public String getContextEncoding(String urlStr, String encoding) {
URL url = null;
BufferedReader br = null;
try {
url = new URL(urlStr);// 建立url对象
InputStream is = url.openStream();// 得到一个字节输入流
br = new BufferedReader(new InputStreamReader(is, encoding));// 创建一个BufferedReader对象
} catch (Exception e) {
e.printStackTrace();
throw new RuntimeException("error");
}
// 读取页面中的内容
String str = null;
StringBuilder sb = new StringBuilder();
try {
while ((str = br.readLine()) != null) {
sb.append(str + "/n");
}
} catch (IOException e) {
e.printStackTrace();
throw new RuntimeException("error2");
}
return sb.toString();// 返回得到的内容
}
/**
* 得到页面的内容(默认使用utf-8编码)
*
* @param url
* 要得到内容的页面的url
* @return 返回得到的内容
*/
@RemoteMethod
public String getContext(String url) {
return getContextEncoding(url, "utf-8");
}
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
