37-iframe自适应高度

最新推荐文章于 2020-11-29 08:46:09 发布

会编程的阿强

最新推荐文章于 2020-11-29 08:46:09 发布

阅读量1.2k

点赞数

分类专栏： HTML/CSS

本文链接：https://blog.csdn.net/shuangrenyu1234/article/details/10365977

版权

HTML/CSS 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

使用方法，在桌面上创建两个html文件，

一个叫做test.html

一个叫做1.html

然后将对应的下面的代码复制进去，

然后运行test.html在浏览器中

这个是在IE浏览器中的效果图。

如果要是在EditPlus中也可以出现效果，但是在谷歌浏览器中就不会出现这样的效果。还在研究》。。。。。。。

test.html

<head>
    <script type="text/javascript">
    function reinitIframe(){
    var iframe = document.getElementById("frame1");
    try{
    var bHeight = iframe.contentWindow.document.body.scrollHeight;
    var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
    var height = Math.max(bHeight, dHeight);
    iframe.height =  height;
    }catch (ex){}
    }
    window.setInterval("reinitIframe()", 200);
    </script> 
</head>

<iframe id="frame1" src="1.html" width="640" scrolling="no" frameborder="1" οnlοad="this.height=100"></iframe>

1.html

sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>

sdfsdf<br/>

sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>
sdfsdf<br/>

Iframe自适应高度同域/跨域

　　最近项目里要用到Iframe自适应高度的问题，当时就随手百度一搜，真的一大把抓，但是发现代码到我手里只要访问下属网站的dom属性时就都报“没有权限，拒绝访问”的错误，头大了，后来发现，原来是http安全因素的考虑，不允许跨域访问其他网站的属性，想想也是，不然，谁还不都可以访问其他的网站后一顿子乱改去。现把网上收集的解决方法整理一下。

1:同域

在同一个域名下，安全因素不是问题，自己访问自己的dom属性是允许的。直接贴网上的代码：

   按 Ctrl+C 复制代码 
 
 function SetCwinHeight(iframeObj) { 
 
             if (document.getElementById) { 
 
                 if (iframeObj) { 
 
                     this.height = iframepage.document.body.scrollHeight; 
 
                     if (iframeObj.contentDocument && iframeObj.contentDocument.body.offsetHeight) { 
 
                         iframeObj.height = iframeObj.contentDocument.body.offsetHeight + 20; 
 
                     } else if (document.frames[iframeObj.name].document && document.frames[iframeObj.name].document.body.scrollHeight) { 
 
                         iframeObj.height = document.frames[iframeObj.name].document.body.scrollHeight + 20; 
 
                     } 
 
                 } 
 
             } 
 
         } 
 
   按 Ctrl+C 复制代码

网上还有很多其他的同域自适应高度的代码。。。

2：跨域

感谢网上各位大虾的博文，不然我还在找门。。。下面是自己的学习心得。

实现原理：比如现在有两个网站域名分别为A.com; B.com; A网站有个Iframe，需要把B网站放到该Iframe中，但是Iframe的高度得先获取B网站的页面高度，然后根据所获取的高度来修改A网站Iframe的高度值。 1：是要在B网站（即下属网站）获取自己的页面的高度， 2：B网站没权限修改A网站的高度，需要一个中间页面，该中间页面可以修改A网站的高度，so.这个中间页面必须与A网站在同一个域下。

A网站的关键代码：

B网站的关键代码：

在B网站下也加一个iframe,该iframe是为了导向A网站的中间页面，从而改掉A网站的Iframe高度。

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">

　　$(function () {

　　　　hashH = document.documentElement.scrollHeight;
           urlC = "http://www.joantest.com:9001/Home/Agent";                           //为A域名的中间页面，此处一定要用域名，不能用Ip
           document.getElementById("MiddleIframe").src=urlC+"#"+hashH;
       });

</script>

</head>
<body>
   <div class="topTitle">
        .....
   </div>
   @RenderBody()
    <iframe id="MiddleIframe" name="MiddleIframe" src="http://www.joantest.com:9001/Home/Agent" width="0" height="0" style="display: none;">
   </iframe>
</body>
</html>

中间页面的关键代码：

该页面是在A域名下的一个文件，由上面的src知道我就是在A网站的HomeController下开了个Agent的方法

这样就已经修改好了，但是在“为A域名的中间页面，此处一定要用域名，不能用Ip”这个地方的src,在一般的局域网的同一个网段内，一般都是IP地址访问网站的，所以这个地方还需要做一个域名映射，方法如下：

在“C:\Windows\System32\drivers\etc”路径下，打开 hosts 文件

增加要映射的网址的域名即可： #表示注释