最近用到iframe页面布局，解决了页面加载慢的问题，分成了上中下三层，结果遇到网上很多人遇到的问题。
1、下拉菜单因为高度问题向上显示了，
于是我把它放在了外面，其余用iframe，就不会出现问题了。
2、可是又遇到了
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
它会自动添加默认样式，覆盖原有的样式。因为我写的iframe的自适应高度的方法用到了。方法如下
function reinitIframe(iframe){
var bHeight = iframe.contentWindow.document.body.scrollHeight; var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
//var blankHeight = iframe.contentDocument.body.scrollHeight;
var height = Math.max(bHeight, dHeight);
try{
iframe.height = bHeight;
//iframe.height = blankHeight; //适应内部页面的大小
}catch (ex){
alert(ex+">>>>>>>>>>>>>>error0000");
}
}
后来发现可以用另外的方式实现：
function reinitIframe(iframe){
var win=iframe;
var minheight = 200;
if (document.getElementById){
if (win && !window.opera){
if (win.contentDocument && win.contentDocument.body.offsetHeight)
win.height = win.contentDocument.body.offsetHeight;
else if(win.Document && win.Document.body.scrollHeight)
if(minheight<win.Document.body.scrollHeight){
win.height = win.Document.body.scrollHeight;
}else{
win.height =minheight;
}
}
}
}
这样问题就解决了。
3、用了iframe之后，每次刷新页面都会跳转到首页，要是只刷新iframe就好了，于是写了下面的方法：
var check=function(e){
e=e||window.event;
if((e.which||e.keyCode)==116){
if(e.preventDefault){
e.preventDefault();
window.frames["mainFrame"].location.reload();
} else{
event.keyCode = 0;
e.returnValue=false;
window.frames["mainFrame"].location.reload();
} } }
if(document.addEventListener){
document.addEventListener("keydown",check,false);
} else{
document.attachEvent("onkeydown",check);
} ;
4、当有弹出框的时候，如果子页面调用父页面的方法，那么就调用
window.parent.document.mainFrame.user()//mainFrame父页面的iframe名称，user()父页面的方法
5、iframe局部跳转
window.frames[i].location.href=url//i表示第几个iframe
分享到：
相关推荐
在这个场景中，我们关注的是在ASP.NET MVC4框架下，利用DevExpress组件实现iframe页面布局的方法。 标题"devexpress mvc4页面布局"暗示我们将讨论如何使用DevExpress MVC Extensions在MVC4项目中创建一个具有特定...
在“easyui页面布局示例”中，我们将探讨如何利用 EasyUI 实现高效且直观的页面布局，并结合导航菜单，实现动态内容加载。 首先，EasyUI 提供了多种布局模式，如网格布局（grid layout）、面板布局（panel layout）...
2. **CSS样式**：接下来，为导航菜单和iframe添加适当的样式，确保它们在页面上的布局和交互符合预期。 3. **jQuery事件绑定**：使用jQuery，我们为导航菜单的链接元素绑定`click`事件。当用户点击一个链接时，我们...
6. 后台管理模板：layuiadmin-iframe3可能包含了典型的后台管理模板，如登录页面、权限控制、菜单管理等，这些都是开发企业级后台应用时常见的功能模块。 通过深入学习和实践layuiadmin-iframe3的代码，开发者可以...
本文将详细讲解如何利用IFrame解决这些问题，特别是针对Flex菜单的遮挡问题。 首先，理解Flex和IFrame的基本概念是必要的。Flex是一种基于ActionScript和MXML的开源框架，用于构建富互联网应用程序（RIA）。而...
layuiadmin 的 iframe 版本则是将多个页面通过 iframe 方式嵌入到一个主页面中，实现多页面管理的布局模式。 layuiadmin 的核心组件包括但不限于以下几个方面： 1. **布局**：layuiadmin 使用流式布局，适应不同...
本教程将深入探讨如何利用`frameset`来创建一个类似QQ邮箱那样的布局，即左侧为菜单，右侧显示菜单对应的详细内容。 首先，`frameset` 的基本结构包括`<frameset>`标签和`<frame>`标签。`<frameset>`定义了窗口的...
这个项目旨在创建一个自适应的页面布局，适应不同屏幕尺寸的设备，尤其关注桌面端的用户体验。在深入探讨其核心功能和实现原理之前，我们先了解一下Vue、Element UI以及iframe的概念。 Vue.js 是一款轻量级的前端...
layui后台管理页面通常采用流式布局，结合layui的`layadmin-layout`模块，可以轻松实现响应式布局，确保在不同设备上都能良好显示。页面通常分为头部（header）、侧边栏（sidebar）、内容区域（content）和底部...
通过使用iframe，开发者可以将不同页面的内容集成到一个页面上，实现页面的模块化，提高代码复用性，减少网络请求，优化页面加载速度。在这个框架模板中，iframe被用来分割和组织后台管理界面的不同功能区域，比如...
在JavaScript中，自定义右键弹出菜单是一种常见的交互式功能，它允许用户在点击鼠标右键时看到自定义的选项，而不是浏览器默认的上下文菜单。本篇将详细讲解如何利用JavaScript实现这一功能，主要涉及到鼠标事件和...
这款模板充分利用了Bootstrap框架的强大功能，提供了一系列预设的页面布局、组件和样式，使得开发者能够快速搭建出功能完备且美观的后台界面。 Bootstrap是一个流行的前端开源框架，由Twitter开发并维护。它包含了...
任务二是制作内联式框架（IFrame）网页，IFrame是另一种实现页面内嵌入其他网页内容的方式，它更加灵活，可以在页面的任何位置插入，并且大小可调。 总的来说，框架结构布局网页的学习涵盖了从理解基本概念，到熟练...
首先，`index.html`是项目的主入口文件，它包含了HTML结构，定义了页面的基本布局和元素。HTML中可能嵌入了jQuery库和jQuery UI库的链接，以及用于初始化UI组件和执行特定功能的JavaScript代码。 `wallpapers`...
通过JavaScript，开发者可以控制网页的行为，包括响应用户的操作、修改页面内容和布局等。 ### 知识点二：利用JavaScript屏蔽IE的工具栏、菜单栏和地址栏 在给定的代码片段中，通过创建一个自定义窗口并使用`...
- IFRAME是一种在页面内部嵌入其他页面的元素，具有自己的名字、宽度、高度和滚动条设置。 - 在Dreamweaver中，通过“布局—IFRAME”可以方便地插入和修改IFRAME属性。 8. **保存框架集和框架** - 保存框架集时...
在Web开发过程中，经常会遇到日期选择器与页面上的其他元素（如`<select>`下拉菜单、Flash插件等）重叠导致交互不便的问题。为了解决这一问题，本文介绍了一种将日历嵌入到`<iframe>`中的方法，以此来避免与其他DOM...
- 自定义：layuimini支持高度定制，可以按需引入组件，满足不同项目需求。 - 响应式：适应各种设备，无论是PC还是移动设备，都能提供良好的用户体验。 3. layuimini主要组件： - 导航栏：提供多种样式的导航栏，...
而iframe版则是利用iframe嵌套页面的方式实现多页面管理，各个功能模块可以独立加载，方便管理和维护。 layuiAdmin2020的核心特性包括： 1. **响应式布局**：layuiAdmin2020采用了响应式设计，适应不同设备的屏幕...
4. **页面布局**： layuiAdmin采用响应式布局，支持不同设备的适配。其主页面通常包括头部、侧边栏、主要内容区域等部分。通过控制侧边栏的展开和折叠，可以优化在小屏幕设备上的显示效果。 5. **组件使用**： - ...