Iframe高度自适应的方法（跨域及非跨域）

最新推荐文章于 2024-07-26 15:39:22 发布

wangrumeng

最新推荐文章于 2024-07-26 15:39:22 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： iframe stylesheet html function javascript border

本文链接：https://blog.youkuaiyun.com/wangrumeng/article/details/1917984

本文介绍了两种实现Iframe高度自适应的方法：一种适用于跨域场景，通过利用window.clipboardData进行父窗体与子窗体间的通信；另一种适用于非跨域场景，直接通过JavaScript修改Iframe的高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法一：支持跨域的Iframe高度自适应
主页面A.html : 注意下面代码中加粗的部分

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>无标题文档</title>

function resetIframeHeight(){

try{

var str=window.clipboardData.getData('text');

var obj=document.getElementById('chezuo');

if(str.match(/^frameHeight=d+$/)){

obj.style.height=parseInt(str.match(/d+/))+'px';

window.clipboardData.setData('text','null');

}

}catch(e){}

setTimeout(resetIframeHeight,100);

}

</script>

</head>

AAAAAAAAAAAAAAAAAAAAA

</center>

</body>

</html>

B.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML>

<HEAD>

</HEAD>

<body>

BBBBBBBBBBBBBBBBBBBBBBB

</center>

</body>

</HTML>

a.js的内容如下：

document.body.onload = jxh;

function jxh()

{

window.clipboardData.setData('text',String('frameHeight='+document.body.scrollHeight));

}

方法二：非跨域的IFRAM高度自适应
主页面使用如下语句引用IFRAME页面：