iframe动态加载高度(同域)

<iframe id="myIframe" src="http://127.0.0.1:5208/campus-recruitment/index.html" style="width:100%; border:none; overflow:hidden;"></iframe>
<script>
function resizeIframe() {
  const $iframe = $('#myIframe');
  try {
    const height = $iframe[0].contentDocument.documentElement.scrollHeight;
    $iframe.css('height', height + 'px');
  } catch (e) {
    // 跨域情况处理
    $iframe.css('height', '800px'); // 设置默认高度
  }
}

$(document).ready(function() {
  const $iframe = $('#myIframe');
  
  // 绑定onload事件
  $iframe.on('load', function() {
    resizeIframe();
    
    // 使用MutationObserver监听内容变化
    try {
      const observer = new MutationObserver(function(mutations) {
        resizeIframe();
      });
      
      observer.observe($iframe[0].contentDocument.body, {
        childList: true,
        subtree: true,
        characterData: true
      });
    } catch(e) {
      // 跨域情况无法使用MutationObserver
    }
  });
  
  // 如果iframe已经加载完成
  if ($iframe[0].contentDocument && $iframe[0].contentDocument.readyState === 'complete') {
    $iframe.trigger('load');
  }
});
</script>

 

posted @ 2025-04-01 09:33  julian_chang  阅读(26)  评论(0)    收藏  举报