iframe 跨域自适应高度

最新推荐文章于 2021-03-12 18:11:20 发布

kathy_love150

最新推荐文章于 2021-03-12 18:11:20 发布

阅读量658

点赞数

分类专栏： js 文章标签： iframe 2010 function xhtml html float

本文链接：https://blog.csdn.net/shipandi/article/details/5322992

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

父页面：

　　　　function　autoHeightIFrameNavigate(iframeId,url)
　　　　{
　　　　　　　　var　iframe　=　$('#'　+　iframeId);
　　　　　　　　iframe.attr('_name_',iframe.attr('name'))　　　　//备份原　name　
　　　　　　　　.attr('src',url)　　　　　　　　　　　　　　　　　　　　　　　　　　　　//设置URL
　　　　　　　　.one('load',function　()　{
　　　　　　　　　　　　this.contentWindow.location　=　"about:blank";　　　　//向代理页面，直接使这个
　　　　　　　　　　　　$(this).one('load',function　()　{
　　　　　　　　　　　　　　　　var　msg　=　this.contentWindow.name;　　　　　　　　　　　　//得值　这个值就度
　　　　　　　　　　　　　　　　this.contentWindow.name　=　$(this).attr('_name_');　　　　//恢复原　Name
　　　　　　　　　　　　　　　　this.contentWindow.location　=　url;　　　　　　　　　　　　//再次向目标页面
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　try
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　var　height　=　eval(msg);　　　　　　　　　　　　　　　　　　　　//得并设置度
　　　　　　　　　　　　　　　　　　　　//alert(height+"1");
　　　　　　　　　　　　　　　　　　　　iframe.css('height',　height　+　'px');
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　catch(e)
　　　　　　　　　　　　　　　　{
　　　　　　　　　　　　　　　　　　　　alert('目标页面没有设置度　window.name')
　　　　　　　　　　　　　　　　}
　　　　　　　　　　　　　　　　
　　　　　　　　　　　　})
　　　　　　　　
　　　　　　　　
　　　　　　　　});
　　　　}
　　　　
        function load()
        {
            autoHeightIFrameNavigate('iframePreview1',　"http://192.168.18.117/WebRef/info1.htm");
            autoHeightIFrameNavigate('iframePreview2',　"http://192.168.18.117/WebRef/info2.htm");
        }
    </script>

</head>
<body οnlοad="load()">
    <div>
        <div>
            <iframe id="iframePreview1" style="width: 100%; height: 80px;" scrolling="no" frameborder="0"></iframe>
        </div>
        <br />
        <br />
        <br />
        <div style="clear: both;">
            <iframe id="iframePreview2" style="width: 100%; height: 80px;" scrolling="no" frameborder="0">
            </iframe>
        </div>
    </div>
</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">
<head>
<title>无标题页</title>
</head>
<style type="text/css">
*{margin:0; padding:0;}
ul,li{list-style:none;}
.gogao ul{float:left;}
.gogao ul li{line-height:22px; font-family:宋体; width:584px; text-align:right; font-size:12px; height:25px; padding:0 0 0 21px; background:url(../images/ggbj.gif) no-repeat 0 4px;}
.gogao ul li a{float:left; color:#236cb0; text-decoration:none;}
.gogao ul li a:hover{float:left; color:#236cb0; text-decoration:underline;}
.gogao p a{color:#fff000; text-decoration:none;}
.gogao p a:hover{color:#ff0000; text-decoration:none;}
</style>
<script type="text/javascript">
function load(){
window.name = document.body.scrollHeight;
}
</script>

<body bgcolor="transparent" οnlοad="load()" >
    <div class="gogao" style="width: 605px; padding: 10px 10px; overflow: hidden;">
        <ul>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>
            <li><a href="#">2010年3月31前都买付费模块一律五折优惠</a> 2010.2.2</li>

        </ul>

    </div>
</body>
</html>

kathy_love150

关注

0
点赞
踩
0

收藏

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

父页面：http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml"> 无标题页　　　　function　autoHeightIFrameNavigate(iframeId,url)　　　　{　　　　　　　　var　iframe　=　$(#　+　
复制链接

扫一扫