iframe跨域自适应高度的问题

最新推荐文章于 2024-09-11 12:01:27 发布

cely_bu

最新推荐文章于 2024-09-11 12:01:27 发布

阅读量307

点赞数 2

分类专栏： javascript 文章标签： iframe xhtml javascript function html border

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

昨天遇到的这个问题，觉得有必要记录一下。

简单介绍下原理: 现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个，通过main.html（域名为http://www.ccvita.com）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的JavaScript代码设置iframeC的scr地址中加入iframe页面的高度，agent.html（域名为：http://www.ccvita.com）取得传递的高度，通过JavaScript设置main.html中iframe的高度。 记住：main.html和agent.html一定要同域啊。

main.html

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

<head><title>iframe主页面</title></head>

<body>

</html>

iframe.html

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

<head><title>被iframe嵌套页面</title></head>

<body>

文字 文字 文字 文字 <iframeid="iframeC"name="iframeC"src=""width="0"height="0"style="display:none;"></iframe>

function sethash(){

hashH = document.documentElement.scrollHeight;

urlC ="agent.html";

document.getElementById("iframeC").src=urlC+"#"+hashH;

}

window.onload=sethash;

</script>

关键的一步 agent.html

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

<head><title>iframe中介页面</title></head>

<body>

function pseth(){

var iObj= parent.parent.document.getElementById('frame_content');

iObjH = parent.parent.frames["frame_content"].frames["iframeC"].location.hash; //这一步在测试时，我发现有问题，浏览器iframeC 拒绝访问，可以改 document.location.hash;

iObj.style.height= iObjH.split("#")[1]+"px";

}

pseth();

</script>

</body>

转自： http://www.ccvita.com/376.html

cely_bu

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
iframe跨域自适应高度的问题

昨天遇到的这个问题，觉得有必要记录一下。简单介绍下原理: 现有iframe主页面main.html、被iframe嵌套页面iframe.html、iframe中介页面agent.html三个，通过main.html（域名为http://www.ccvita.com）嵌套iframe.html（域名为：http://www.phpq.net），当用户浏览时执行iframe.html中的Ja
复制链接

扫一扫