iframe 页面框架
使用 iframe 框架可以在一个页面中嵌套另一个页面, 从而使页面得到重用; 在需要导入页面的地方标签如下:
<!-- 右边 -->
<div class="right-side">
<iframe src="iframe/workOrderManagement.jsp" frameborder="0"
width="100%" height="100%" scrolling="no" id="mainFrame"
name="mainFrame"></iframe>
</div>
点击一个连接改变子网页的页面, 标签内容如下:
<a href="iframe/station.html" target="mainFrame" >分机数</a>
在js 中如果需要导入父网页面里面js 的方法,可以使用 parent ;
使用iframe 框架最大的问题是 子网页自适应高度的调整:
<!-- 子网页自适应高度 -->
<script type="text/javascript">
var browserVersion = window.navigator.userAgent.toUpperCase();
var isOpera = false, isFireFox = false, isChrome = false, isSafari = false, isIE = false;
function reinitIframe(iframeId, minHeight) {
try {
var iframe = document.getElementById(iframeId);
var bHeight = 0;
if (isChrome == false && isSafari == false)
bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = 0;
if (isFireFox == true)
dHeight = iframe.contentWindow.document.documentElement.offsetHeight + 2;
else if (isIE == false && isOpera == false)
dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
else if (isIE == true && !-[ 1, ] == false) {
} //ie9+
else
bHeight += 3;
var height = Math.max(bHeight, dHeight);
if (height < minHeight)
height = minHeight;
iframe.style.height = height + "px";
} catch (ex) {
}
}
function startInit(iframeId, minHeight) {
isOpera = browserVersion.indexOf("OPERA") > -1 ? true : false;
isFireFox = browserVersion.indexOf("FIREFOX") > -1 ? true : false;
isChrome = browserVersion.indexOf("CHROME") > -1 ? true : false;
isSafari = browserVersion.indexOf("SAFARI") > -1 ? true : false;
if (!!window.ActiveXObject || "ActiveXObject" in window)
isIE = true;
window.setInterval("reinitIframe('" + iframeId + "'," + minHeight
+ ")", 500);
}
startInit('mainFrame', 500);
</script>
子网页中的模态框的位置问题(无法显示在屏幕中央), 可以通过获取父框架中的 滚动条高度,设置 模态框位置,获取父框架滚动条顶部的方法:
/*获取父框架的滚动条高度*/
function getParentScrollHeight(){
var scrollTop = window.parent.document.documentElement.scrollTop;
if(scrollTop==0)
{
scrollTop = window.parent.document.body.scrollTop;
}
return scrollTop;
}