锐客网

  1. 首页 > 睿知 > >

iframe 自适应高度的六种方法介绍

睿知

在实际使用iframe的过程中，会遇到iframe高度的问题，对于iframe 自适应高度一直是难点，因为既要考虑浏览器的兼容性，还要考虑同域、跨域的情况，下面就给大家介绍iframe 自适应高度的六种方法 。

iframe 自适应高度的六种方法介绍

文章插图
前言：
【iframe 自适应高度的六种方法介绍】JS自适应高度其实就是设置iframe的高度，使其等于内嵌网页的高度，从而看不出来滚动条和嵌套痕迹，对于用户体验和网站美观起着重要作用 。?/p>如果内容是固定的，那么我们可以通过CSS来给它直接定义一个高度，同样可以实现上面的需求，当内容是未知或者是变化的时候，情况也各不一样 。
iframe 自适应高度的六种方法介绍：
一、iframe内容未知，高度可预测
这个时候，我们可以给它添加一个默认的CSS的min-height值，然后同时使用JavaScript改变高度 。常用的兼容代码有：?/p>01// document.domain = "caibaojian.com";02function setIframeHeight(iframe) {03if (iframe) {04var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;05if (iframeWin.document.body) {06iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;07}08}09};10window.onload = function () {11setIframeHeight(document.getElementById('external-frame'));12};复制代码// document.domain = "caibaojian.com";function setIframeHeight(iframe) {if (iframe) {var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;if (iframeWin.document.body) {iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;}}};window.onload = function () {setIframeHeight(document.getElementById('external-frame'));};二、如果在同个顶级域名下，不同子域名之间互通信息
设置document.domain=“caibaojian.com”，只要修改以上的iframe的ID即可了，或者你可以直接在iframe里面写代码，我们一般为了不污染HTML代码，建议使用上面的代码 。
01复制代码三、多个iframe的情况下
01复制代码六、跨域下的iframe自适应高度
跨域的时候，由于js的同源策略，父页面内的js不能获取到iframe页面的高度，需要一个页面来做代理 。
方法如下：
假设www.a.com下的一个页面a.html要包含www.b.com下的一个页面c.html 。
我们使用www.a.com下的另一个页面agent.html来做代理，通过它获取iframe页面的高度，并设定iframe元素的高度 。?/p>a.html中包含iframe：
01复制代码在c.html中加入如下代码：
0102复制代码最后，agent.html中放入一段js：
01复制代码agent.html从URL中获得宽度值和高度值，并设置iframe的高度和宽度（因为agent.html在www.a.com下，所以操作a.html时不受JavaScript的同源限制）
关于iframe 自适应高度的六种方法就给大家介绍到这里了，希望可以帮助到广大的码农们，不要再头疼了 。。。

    推荐阅读


    上一篇：几大普洱茶茶山的介绍

    下一篇：按份之债与连带之债是否一样