1 iframe 主窗口操作 子窗口
2 iframe自适应高度的写法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <iframe id="FF" src="b.html"></iframe> <input type="submit" value=" OK " onclick="OK()"/> <script language="JavaScript"> function OK() { // 操作iframe中内容的CSS var iframe = document.getElementById('FF'); //iframe.contentWindow 这是取出iframe里面的window var body = getIframeWindow(iframe).document.body; body.style.marginTop = 50; body.style.padding = 0; body.style.fontSize = 30; body.style.textAlign = 'center'; body.style.backgroundColor = 'red'; body.style.color = 'blue'; } //操作iframe之前必须获取iframe中的window function getIframeWindow(iframeElement){ //IE w3c return iframeElement.contentWindow || iframeElement.contentDocument.parentWindow; } </script> </body> </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> 33 <div style="height: 500px;width: 100%">ddddddddddddddddddd<br /><br /><br /><br /><br /><br /><br><br><br><br><br>d</div> 222222222 </body> <script type="text/javascript"> //更改iframe的高度为这个页面的高度 var MainFrame = parent.document.getElementById("FF"); alert( MainFrame.getAttribute('id') ); //document.documentElement 是html节点 MainFrame.style.height = getMaxOffsetHeight()+"px";//最好在这上面还加上一个常数,如10 alert( MainFrame.style.height ); alert( getMaxOffsetHeight()); // 注意取出最大值 得到最大高度 function getMaxOffsetHeight(){ return Math.max(document.documentElement.offsetHeight , document.body.offsetHeight ); } </script> </html>
相关推荐
html的iframe学习以及alt、title的学习、兼容性的学习
### 自学Iframe框架 #### 一、Iframe框架简介 Iframe(Inline Frame),即内联框架,是一种用于在当前网页中嵌入另一个网页或文档的HTML元素。通过使用`<iframe>`标签,可以轻松地将外部内容整合到现有页面上,...
开发者可以下载这个压缩包,通过查看和运行代码来学习和理解iframe之间的交互和控制逻辑。 总结来说,这个实例涉及了以下关键知识点: 1. HTML的`iframe`标签及其`src`属性。 2. JavaScript/jQuery对iframe内容的...
你可以解压文件,查看并学习其中的代码,了解更具体的实现方式。 总结来说,禁用`iframe`内的右键菜单主要涉及`iframe`元素的选择和`contextmenu`事件的监听与处理。通过JavaScript的事件监听和事件处理函数,我们...
通过深入学习和实践layuiadmin-iframe3的代码,开发者可以更好地掌握layui框架的应用技巧,特别是在处理复杂的后台管理界面时如何有效地利用iframe,提高代码的复用性和维护性。同时,这也有助于提升对前端工程化、...
在描述中提到的"DreamRever学习iframe(图片的过渡效果欣赏)"可能是一个教程或者示例集合,教授如何利用`iframe`和相关的JavaScript或CSS技术,实现图片之间的平滑过渡。这通常涉及到以下几个关键知识点: 1. **...
通过对上述知识点的学习,我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题,包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...
在.NET框架中,`iframe`(Inline Frame)是一种常见的网页元素,用于在单个HTML文档内嵌入另一个HTML文档。`iframe`常被用来实现...通过学习和实践这些文件,开发者可以更好地理解和掌握`iframe`在实际项目中的应用。
通过分析和学习"IFrameDemo",你应该能够解决Flex项目中Google IFrame的消失问题,并对如何在Flex应用中有效地使用IFrame有更深入的理解。记得在实际应用中不断测试和优化,确保IFrame的稳定性和性能。
在IT行业中,Java是一种广泛应用的编程语言,尤其在企业级应用开发中,JSP...在"mytest"这个压缩包中,可能包含了相关的示例代码或项目结构,通过学习和实践这些内容,可以加深对IFrame在Java Web应用中的理解与运用。
在IT行业中,尤其是在Web开发领域,`iframe`和`flex`是两个非常重要的概念,它们在构建现代网页和应用程序时发挥着关键作用。...通过学习和熟练掌握这两个技术,开发者可以构建出适应各种设备和用户需求的现代Web应用。
AdminLTE是一款广受欢迎的开源后台管理模板,它基于Bootstrap框架构建,提供了丰富的UI组件和预设的布局选项,便于...通过深入研究这个案例,开发者可以学习到如何在实际项目中应用这些技术,提升自己的前端开发技能。
在IT行业中,IFrame(Inline Frame)是一种HTML元素,它允许网页嵌入另一个网页或文档。IFrame在很多场景下非常...通过阅读和学习这个文档,开发者可以提高工作效率,同时创建出更稳定、更安全的基于IFrame的应用程序。
通过研究这些文件,开发者可以深入理解如何在实际项目中应用局部刷新和iframe技术,同时也可以学习到如何将AdminLTE和Bootstrap结合,构建功能强大且用户体验良好的后台管理系统。 总之,这个案例展示了如何利用...
在网页开发中,`iframe`(Inline Frame)是一种非常实用的HTML元素,它允许我们嵌入另一个HTML文档到当前页面中。"iframe框架使用(完美版)"这一...通过深入学习和实践,我们可以更好地利用iframe解决各种网页嵌入需求。
通过阅读和理解这个源码,开发者可以学习到如何在Flex环境中实现HTML的iframe功能,这对于创建富媒体应用或者需要集成外部Web内容的Flex项目是非常有价值的。 总之,使用Flex实现iframe功能是一种挑战,但通过...
这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源代码下载,方便开发者研究和学习。 首先,我们要理解`iframe`的跨域限制。由于安全原因,浏览器不允许不同源的页面之间进行...
在压缩包中的"report"文件可能是Laya与iframe通信的一个实例或教程,可能包含了具体的代码示例和实现步骤,以便开发者理解和学习如何在实践中实现这种通信。 总的来说,理解和掌握Laya与iframe的通信机制对于构建...
"layui-iframe.rar"这个压缩包很可能是layui的一个应用场景,涉及到在页面中使用layui框架创建iframe组件的示例或模板。 layui的设计理念是“轻量、易用、模块化”,这使得它在开发过程中具有很高的灵活性。它提供...
对于初学者,这是一个很好的实践案例,可以深入学习网页布局、DOM操作以及事件处理等方面的知识。而对于有经验的开发者,这样的设计则提供了一种灵活且实用的解决方案,尤其是在处理页面内容嵌入和切换时。