easyui在页面布局中引入外部的jsp页面，css冲突，功能失效，页面混乱

最新推荐文章于 2020-12-26 00:16:26 发布

转载最新推荐文章于 2020-12-26 00:16:26 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/3583296/blog/1555947

文章标签：

#easyUI引入外部jsp的方法

前端技术专栏收录该内容

14 篇文章

订阅专栏

本文介绍在使用EasyUI进行页面布局时，如何优雅地引入外部jsp页面如header.jsp或left.jsp，避免页面元素混乱。提供了三种有效的方法：1. 确保jsp中除编码声明外无页头，直接使用div；2. 使用iframe作为容器引入jsp；3. 动态加载iframe页面，提升兼容性。

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

个人推荐使用第三种写法