easyui在頁面佈局中引入外部的jsp頁面，css衝突，功能失效，頁面混亂

easyui在頁面佈局中引入外部的jsp頁面，如header.jsp或left.jsp，避免出現頁面混亂有兩個方式： 
一、兩個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>

•  

二、或者佈局引入的時候，用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>

• 1
• 2
• 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");
});