在做页面设计的时候,有时需要在一个页面上引入另一个页面,用jquery比较简单,三两句代码就能实现,看代码:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ueditor 富文本编辑器</title>
<script type="text/javascript" src="editor_config.js"></script>
<script type="text/javascript" src="editor_all.js"></script>
<link href="themes/default/ueditor.css" type="text/css" rel="stylesheet">
</head>
<body>
<script type="text/plain" id="myEditor" class="myEditor"></script>
<script type="text/javascript">
var editor_a = new baidu.editor.ui.Editor();
editor_a.render('myEditor');
</script>
</body>
</html>
test.html,在这个页面里面引入index.html
1.引入jquery.js
<script type="text/javascript" src="jquery-1.7.1.js"></script>
2.定义需要显示的区域和样式
<style type="text/css">
#test{width:auto;height:auto;border:1px solid green;}
</style>
<div id="test"> </div>
3.写一个方法,用于加载index.html
<script language="javascript">
function loadPage(href){
$("#test").load(href);
}
</script>
4.定义一个button,在click事件里面调用loadPage方法
<input type="button" value="加载" onclick="loadPage('index.html')"/>
到这一步已经完成啦,看看效果图:
点击"加载"之后:
非常不错的一个效果!