根据内容更改iframe高度

3 回答

• 3

  您可以尝试使用以下脚本 .

  <script type="text/javascript">
    function iframeLoaded() {
      var iFrameID = document.getElementById('your_frame_id');
      if(iFrameID) {            
          iFrameID.height = "";
          iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
     }   
  }
  </script>
  

  并将onload函数添加到iframe中

  <iframe onload="iframeLoaded()">
  

  回复于 2024-04-28T07:01:51+08:00
• 5

  这是真正比它应该更难的问题之一 . 以下是您需要考虑的事项，以便正确保持iFrame的大小 .

  计算出准确的高度

  获得iFrame的准确高度并不像应该的那样简单，因为您可以选择六种不同的属性，您可以检查它们并且没有一个能给出一个正确的答案 . 我提出的最好的解决方案就是这个函数只要你不使用CSS来溢出body标签就行了 .

  function getIFrameHeight(){
      function getComputedBodyStyle(prop) {
          return parseInt(
              document.defaultView.getComputedStyle(document.body, null),
              10
          );
      }
  
      return document.body.offsetHeight +
          getComputedBodyStyle('marginTop') +
          getComputedBodyStyle('marginBottom');
  }
  

  这是IE9版本，对于很长的IE8版本，请看answer .

  如果您确实溢出了正文并且无法修复代码来阻止它，那么使用 offsetHeight 的 offsetHeight 或 scrollHeight 属性是最佳选择 . 两者都有利弊，最好只测试两者，看看哪些适合你 .

  PostMessage

  postMessage API提供了一种在iFrame与其父级之间进行通信的简单方法 .

  要将消息发送到父页面，请按以下方式调用它 .

  parent.postMessage('Hello parent','http://origin-domain.com');
  

  在另一个方向，我们可以使用以下代码将消息发送到iFrame .

  var iframe = document.querySelector('iframe');
  iframe.contentWindow.postMessage('Hello my child', 'http://remote-domain.com:8080');
  

  要接收消息，请为消息事件创建事件listerner .

  function receiveMessage(event)
  {
    if (event.origin !== "http://remote-domain.com:8080")
      return;
  
    console.log(event.data);
  }
  
  if ('addEventListener' in window){
      window.addEventListener('message', receiveMessage, false);
  } else if ('attachEvent' in window){ //IE
      window.attachEvent('onmessage', receiveMessage);
  

  这些示例使用origin属性来限制发送消息的位置并检查消息的来源 . 可以指定 * 以允许发送到任何域，在某些情况下，您可能希望接受来自任何域的邮件 . 但是，如果您这样做，您需要考虑安全隐患，并对传入的消息实施您自己的检查，以确保它包含您期望的内容 . 在这种情况下，iframe可以发布它's height to ' * ', as we might have more than one parent domain. However, it'一个好主意来检查来自iFrame的传入消息 .

  function isMessageFromIFrame(event,iframe){
      var
          origin  = event.origin,
          src     = iframe.src;
  
      if ((''+origin !== 'null') && (origin !== src.substr(0,origin.length))) {
          throw new Error(
              'Unexpect message received from: ' + origin +
              ' for ' + iframe.id + '. Message was: ' + event.data  
          );
      }
  
      return true;
  }
  

  MutationObserver

  更现代的broswers的另一个进步是MutationObserver，它允许你观察DOM的变化;因此，现在可以检测可能影响iFrame大小的更改，而无需使用setInterval不断轮询 .

  function createMutationObserver(){
      var
          target = document.querySelector('body'),
  
          config = {
              attributes            : true,
              attributeOldValue     : false,
              characterData         : true,
              characterDataOldValue : false,
              childList             : true,
              subtree               : true
          },
  
          observer = new MutationObserver(function(mutations) {
              parent.postMessage('[iframeResize]'+document.body.offsetHeight,'*');
          });
  
      log('Setup MutationObserver');
      observer.observe(target, config);
  }
  
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  
  if (MutationObserver){
      createMutationObserver();
  }
  

  其他问题

  其他需要考虑的事项包括：在页面上有多个iFrame，CSS：Checkbox和：悬停事件导致页面调整大小，避免在iFrames的body和html标签中使用height auto，最后调整窗口大小 .

  IFrame Resizer Library

  我把所有这些都包含在一个简单的无需依赖的库中，它还提供了一些未在此讨论的额外功能 .

  https://github.com/davidjbradshaw/iframe-resizer

  这适用于IE8 .

  回复于 2024-04-28T07:01:51+08:00
• 1

  如果要为iframe滚动条，请尝试使用此选项

  <iframe style="height: 956px;overflow-y:scroll; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>
  

  只需输入“min-height”并添加“overflow-y”prop作为滚动即可

  或者如果你不想滚动那么试试

  <iframe scrolling="no" style="min-height: 956px; width: 100%" frameborder="0" id="ampcontentiframe"></iframe>
  

  回复于 2024-04-28T07:01:51+08:00