iframe自适应示例

网页中经常遇到使用iframe嵌入其它页面。如果将iframe宽高设定,可能在各种浏览器、屏幕下的显示都不一样,有可能影响美观。最好的办法是让它根据分辨率自适应大小。

下面是一个简单的示例:

<%@ page language=”java” contentType=”text/html; charset=UTF-8″
pageEncoding=”UTF-8″%>
<%@ taglib uri=”http://java.sun.com/jstl/core_rt&#8221; prefix=”c”%>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<title>电务生产调度指挥系统</title>
<jsp:include page=”/views/include.jsp”></jsp:include>
<script type=”text/javascript”>
var contextPath = ‘<%=request.getContextPath()%>’;
$.parser.onComplete = function() {
$(‘body’).css(‘visibility’, ‘visible’);
setTimeout(function() {
$(‘#loading-mask’).remove();
}, 50);
};
$(function() {
$(window).resize(function() {
$(‘#mainlayout’).layout(‘resize’);
});
});
</script>

</head>
<body
style=”margin: 0; padding: 0; background: #F2FBFF; overflow-y: hidden” fit=”ture”>

<!–<div style=”margin:10px 0;”></div>–>
<div id=’main_div’ class=”easyui-tabs” >
<div title=”车站” style=”padding: 10px” fit=”true”>
</div>
<div title=”设备类型” style=”padding: 10px” fit=”true”>

</div>
<div title=”所属系统” style=”padding: 10px” fit=”true”>

</div>
<div title=”报警级别” style=”padding: 10px” fit=”true”>

</div>
<div title=”责任机构” style=”padding: 10px” fit=”true”>

</div>

</div>
</body>

This entry was posted in Computer, Java. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s