easyui在页面布局中引入外部的jsp页面,css冲突,功能失效,页面混乱
easyui在页面布局中引入外部的jsp页面,如header.jsp或left.jsp,避免出现页面混乱有两个方式:1、两个jsp中不能有页头,除了编码声明外,直接div;2、或者布局引入的时候,用ifame作为容器,用iframe引入header.jsp或left.jsp;
·
easyui在页面布局中引入外部的jsp页面,如header.jsp或left.jsp,避免出现页面混乱有两个方式:
1、两个jsp中不能有页头,除了编码声明外,直接div;
例如:
<%-- header.jsp --%>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ include file="" %>
<script type="text/javascript">
</script>
<style type="text/css" rel="stylesheet">
</style>
<div id="headerDiv"></div>
<div></div>
<%-- index页面引入:--%>
<div id="northNav" data-options="region:'north',href:'header.jsp'" style="height:80px;overflow: hidden;"></div>
2、或者布局引入的时候,用ifame作为容器,用iframe引入header.jsp或left.jsp;
例如:
<div id="northNav" data-options="region:'north'" style="height:80px;overflow: hidden;">
<iframe scrolling="no" frameborder="0" src="header.jsp" style="width:100%;height:100%;margin:0px;padding:0px"></iframe>
</div>
3、第2种方式在ie下可能不兼容,可以动态加载iframe页面,例如:
<%-- 在index页面中用于加载header-iframe的div--%>
<div id="northNav" data-options="region:'north'"></div>
<%-- index页面加载时,动态加载头部与脚部的iframe页面到div --%>
function loadHeader(divId,pageUri){
document.getElementById(divId).innerHTML = '<iframe scrolling="no" frameborder="0" src="' + pageUri + '" style="width:100%;height:100%;"></iframe>';
}
<%-- 页面加载时调用--%>
$(function(){
loadHeader("northNav","header.jsp");
});
更多推荐
已为社区贡献4条内容
所有评论(0)