Iframe相关

原创于 2014-05-13 18:41:41 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Iframe #自适应

JS 专栏收录该内容

1 篇文章

订阅专栏

本文深入探讨了iframe自适应技术，包括三种实现方式：标准方式、批量处理及经典代码，同时提供了获取iframe中表单提交值、父窗口元素的方法，并解决了iframe刷新问题。此外，还详细介绍了如何解决iframe跨域访问限制。

1、iframe自适应问题

第一种方式：经测试，支持IE，FireFox及Chrome浏览器

HTML代码如下：

<iframe id = "uIframe" name = "uIframe" src = "aa.jsp" width = "100%" onload="f_changeIframe(this)" frameborder="0" scrolling="no"></iframe>

JS代码如下：

function f_changeIframe(iframe) {
    var height = iframe.contentWindow.document.body.scrollHeight;
    if (height < 600) {
        height = 600;
    } else {
        height = height + 40;
    }
    iframe.height = height;
}

第二种方式：批量iframe自适应

<script language="javascript">
//输入你希望根据页面高度自动调整高度的iframe的名称的列表 
//用逗号把每个iframe的ID分隔. 例如: ["myframe1", "myframe2"]，可以只有一个窗体，则不用逗号。 
//定义iframe的ID 
var iframeids = ["uIframe"];
//如果用户的浏览器不支持iframe是否将iframe隐藏 yes 表示隐藏，no表示不隐藏 
var iframehide = "yes";
function dyniframesize() {
var dyniframe = new Array() for (i = 0; i < iframeids.length; i++) {
if (document.getElementById) {
//自动调整iframe高度 
dyniframe[dyniframe.length] = document.getElementById(iframeids[i]);
if (dyniframe[i] && !window.opera) {
dyniframe[i].style.display = "block";
if (dyniframe[i].contentDocument && dyniframe[i].contentDocument.body.offsetHeight) //如果用户的浏览器是NetScape 
dyniframe[i].height = dyniframe[i].contentDocument.body.offsetHeight;
else if (dyniframe[i].Document && dyniframe[i].Document.body.scrollHeight) //如果用户的浏览器是IE 
dyniframe[i].height = dyniframe[i].Document.body.scrollHeight;
}
}
//根据设定的参数来处理不支持iframe的浏览器的显示问题 
if ((document.all || document.getElementById) && iframehide == "no") {
var tempobj = document.all ? document.all[iframeids[i]] : document.getElementById(iframeids[i]);
tempobj.style.display = "block";
}
}
}
if (window.addEventListener) window.addEventListener("load", dyniframesize, false);
else if (window.attachEvent) window.attachEvent("onload", dyniframesize);
else window.onload = dyniframesize;
</script>

第三种方式：经典代码 iFrame 自适应高度，在IE6/IE7/IE8/Firefox/Opera/Chrome/Safari通过测试

HTML代码如下：

<iframe src="http://www.fufuok.com/" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" onLoad="iFrameHeight()" ></iframe>

JS代码如下：

<script type="text/javascript" language="javascript">
	function iFrameHeight() {
		var ifm = document.getElementById("iframepage");
		var subWeb = document.frames ? document.frames["iframepage"].document: ifm.contentDocument;
		if (ifm != null && subWeb != null) {
			ifm.height = subWeb.body.scrollHeight;
		}
	}
</script>

2、获取iframe中表单提交的值

document.getElementById('iframe的ID').contentWindow.getValue();

注：iframe中的表单必须在table标签内，否则获取不到

3、获取父窗口中的元素

window.parent.document.getElementById("元素ID");

4、iframe刷新问题

document.getElementById("iframeId").contentWindow.location.href = URL;