请选择 进入手机版 | 继续访问电脑版
开启辅助访问
帐号登录 |立即注册

Iframe 高度自适应的一些解决方法

 
方法一:使用 window.resizeTo() 方法如果 iframe 中的内容与主页面处于同一域名下,那么可以在 iframe 中动态获取内容高度,并将高度传递给主页面,从而实现高度自适应。具体实现方法如下:

<iframe id="myIframe" src="iframe.html"></iframe>


// 获取 iframe 元素
const iframe = document.getElementById('myIframe');


// 根据 iframe 内容高度设置 iframe 高度
function resizeIframe() {
  const iframeDocument = iframe.contentDocument;
  const iframeContent = iframeDocument.getElementById('content');
  iframe.style.height = iframeContent.offsetHeight + 'px';
  window.resizeTo(iframe.offsetWidth, iframe.offsetHeight);
}


// 监听 iframe 内容加载完成事件,并执行高度自适应
iframe.onload = resizeIframe;


上面的代码中,resizeIframe() 函数会在 iframe 的内容加载完成后被调用。该函数会动态获取 iframe 内容的高度,然后将高度设置为 iframe 的高度,并调用 window.resizeTo() 方法将主页面的大小设置为 iframe 的大小。由于 resizeTo() 方法需要在主页面中调用,因此在 resizeIframe() 函数中需要将 iframe 的高度传递给主页面。

方法二:使用 postMessage() 方法如果 iframe 中的内容与主页面处于不同的域名下,那么不能直接访问 iframe 中的内容。这种情况下,可以使用 postMessage() 方法来实现跨域通信,从而动态调整 iframe 的高度。具体实现方法如下:

<iframe id="myIframe" src="https://example.com"></iframe>


// 获取 iframe 元素
const iframe = document.getElementById('myIframe');


// 监听消息事件
window.addEventListener('message', (event) => {
  if (event.origin === 'https://example.com') {
    // 获取消息中的高度数据
    const height = parseInt(event.data);


    // 将高度设置为 iframe 的高度
    iframe.style.height = height + 'px';
  }
});


// 发送消息给 iframe,请求其高度信息
iframe.contentWindow.postMessage('getHeight', 'https://example.com');


上面的代码中,当 iframe 中的内容加载完成后,主页面会向 iframe 发送一条消息,请求其高度信息。iframe 收到消息后,会将自己的高度信息通过 postMessage() 方法传递给主页面。主页面通过监听 message 事件来接收消息,并根据消息中的高度信息动态调整 iframe 的高度。

回复

使用道具 举报

0 个回复

倒序浏览

快速回复

您需要登录后才可以回帖 登录 or 立即注册

本版积分规则

友情链接
  • 艾Q网

    提供设计文章,教程和分享聚合信息与导航工具,最新音乐,动漫,游戏资讯的网站。