`

iframe学习

 
阅读更多

 

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的学习、兼容性的学习

    html的iframe学习以及alt、title的学习、兼容性的学习

    自学Iframe框架

    ### 自学Iframe框架 #### 一、Iframe框架简介 Iframe(Inline Frame),即内联框架,是一种用于在当前网页中嵌入另一个网页或文档的HTML元素。通过使用`&lt;iframe&gt;`标签,可以轻松地将外部内容整合到现有页面上,...

    iframe对另一个iframe控制的Demo

    开发者可以下载这个压缩包,通过查看和运行代码来学习和理解iframe之间的交互和控制逻辑。 总结来说,这个实例涉及了以下关键知识点: 1. HTML的`iframe`标签及其`src`属性。 2. JavaScript/jQuery对iframe内容的...

    iframe里无右键菜单

    你可以解压文件,查看并学习其中的代码,了解更具体的实现方式。 总结来说,禁用`iframe`内的右键菜单主要涉及`iframe`元素的选择和`contextmenu`事件的监听与处理。通过JavaScript的事件监听和事件处理函数,我们...

    layuiadmin-iframe3.zip

    通过深入学习和实践layuiadmin-iframe3的代码,开发者可以更好地掌握layui框架的应用技巧,特别是在处理复杂的后台管理界面时如何有效地利用iframe,提高代码的复用性和维护性。同时,这也有助于提升对前端工程化、...

    iframe(图片过渡效果欣赏)

    在描述中提到的"DreamRever学习iframe(图片的过渡效果欣赏)"可能是一个教程或者示例集合,教授如何利用`iframe`和相关的JavaScript或CSS技术,实现图片之间的平滑过渡。这通常涉及到以下几个关键知识点: 1. **...

    js处理iframe的系列问题

    通过对上述知识点的学习,我们可以更加灵活地利用JavaScript来处理`iframe`中的各种问题,包括但不限于访问、修改`iframe`内部元素、提交表单、调用方法以及触发事件等。这些技巧对于开发复杂的Web应用来说是非常...

    Default(iframe).rar(iframe的简单使用)

    在.NET框架中,`iframe`(Inline Frame)是一种常见的网页元素,用于在单个HTML文档内嵌入另一个HTML文档。`iframe`常被用来实现...通过学习和实践这些文件,开发者可以更好地理解和掌握`iframe`在实际项目中的应用。

    Flex项目Google IFrame使用

    通过分析和学习"IFrameDemo",你应该能够解决Flex项目中Google IFrame的消失问题,并对如何在Flex应用中有效地使用IFrame有更深入的理解。记得在实际应用中不断测试和优化,确保IFrame的稳定性和性能。

    java iframe应用 jsp j2ee

    在IT行业中,Java是一种广泛应用的编程语言,尤其在企业级应用开发中,JSP...在"mytest"这个压缩包中,可能包含了相关的示例代码或项目结构,通过学习和实践这些内容,可以加深对IFrame在Java Web应用中的理解与运用。

    iframe for flex!

    在IT行业中,尤其是在Web开发领域,`iframe`和`flex`是两个非常重要的概念,它们在构建现代网页和应用程序时发挥着关键作用。...通过学习和熟练掌握这两个技术,开发者可以构建出适应各种设备和用户需求的现代Web应用。

    Adminlte(bootstrap)iframe版本

    AdminLTE是一款广受欢迎的开源后台管理模板,它基于Bootstrap框架构建,提供了丰富的UI组件和预设的布局选项,便于...通过深入研究这个案例,开发者可以学习到如何在实际项目中应用这些技术,提升自己的前端开发技能。

    IFrame开发参考文档docs

    在IT行业中,IFrame(Inline Frame)是一种HTML元素,它允许网页嵌入另一个网页或文档。IFrame在很多场景下非常...通过阅读和学习这个文档,开发者可以提高工作效率,同时创建出更稳定、更安全的基于IFrame的应用程序。

    基于AdminLTE(bootstrap)用iframe实现的局部刷新的案例

    通过研究这些文件,开发者可以深入理解如何在实际项目中应用局部刷新和iframe技术,同时也可以学习到如何将AdminLTE和Bootstrap结合,构建功能强大且用户体验良好的后台管理系统。 总之,这个案例展示了如何利用...

    iframe框架使用(完美版)

    在网页开发中,`iframe`(Inline Frame)是一种非常实用的HTML元素,它允许我们嵌入另一个HTML文档到当前页面中。"iframe框架使用(完美版)"这一...通过深入学习和实践,我们可以更好地利用iframe解决各种网页嵌入需求。

    flex中的iframe源码

    通过阅读和理解这个源码,开发者可以学习到如何在Flex环境中实现HTML的iframe功能,这对于创建富媒体应用或者需要集成外部Web内容的Flex项目是非常有价值的。 总之,使用Flex实现iframe功能是一种挑战,但通过...

    iframe跨域高度自适应例子源码

    这个例子提供了一个在线演示(http://okiner.cn/demo/cross-domain/iframe.html)以及源代码下载,方便开发者研究和学习。 首先,我们要理解`iframe`的跨域限制。由于安全原因,浏览器不允许不同源的页面之间进行...

    Laya和iframe通信.zip

    在压缩包中的"report"文件可能是Laya与iframe通信的一个实例或教程,可能包含了具体的代码示例和实现步骤,以便开发者理解和学习如何在实践中实现这种通信。 总的来说,理解和掌握Laya与iframe的通信机制对于构建...

    layui-iframe.rar

    "layui-iframe.rar"这个压缩包很可能是layui的一个应用场景,涉及到在页面中使用layui框架创建iframe组件的示例或模板。 layui的设计理念是“轻量、易用、模块化”,这使得它在开发过程中具有很高的灵活性。它提供...

    div覆盖 iframe

    对于初学者,这是一个很好的实践案例,可以深入学习网页布局、DOM操作以及事件处理等方面的知识。而对于有经验的开发者,这样的设计则提供了一种灵活且实用的解决方案,尤其是在处理页面内容嵌入和切换时。

Global site tag (gtag.js) - Google Analytics