调整跨域Iframe高度

6 回答

• 0

  这是一个小型库，它解决了将iFrame调整为包含内容的所有问题 .

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

  它通过使用post-message API处理跨域问题，还以几种不同的方式检测iFrame内容的更改 .

  适用于所有现代浏览器和IE8以上版本 .

  编辑：为了确定跨域iframe高度，您还必须有权在iframe的页面上实现脚本 .

  回复于 2024-04-20T11:25:33+08:00
• 2

  最小的跨域集我用于在页面上嵌入适合的单个iframe .

  在嵌入页面（包含iframe）时：

  <iframe frameborder="0" id="sizetracker" src="http://www.hurtta.com/Services/SizeTracker/DE" width="100%"></iframe>
  <script type="text/javascript">
    // Create browser compatible event handler.
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    // Listen for a message from the iframe.
    eventer(messageEvent, function(e) {
      if (isNaN(e.data)) return;
  
      // replace #sizetracker with what ever what ever iframe id you need
      document.getElementById('sizetracker').style.height = e.data + 'px';
  
    }, false);
  </script>
  

  在嵌入页面（iframe）上：

  <script type="text/javascript">
  function sendHeight()
  {
      if(parent.postMessage)
      {
          // replace #wrapper with element that contains 
          // actual page content
          var height= document.getElementById('wrapper').offsetHeight;
          parent.postMessage(height, '*');
      }
  }
  
  // Create browser compatible event handler.
  var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
  var eventer = window[eventMethod];
  var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  
  // Listen for a message from the iframe.
  eventer(messageEvent, function(e) {
  
      if (isNaN(e.data)) return;
  
      sendHeight();
  
  }, 
  false);
  </script>
  

  回复于 2024-04-20T11:25:33+08:00
• 0

  你得到一个iframe的内容高度，例如像这样：

  document.getElementById('iframe-id').contentWindow.document.body.scrollHeight
  

  UPDATE

  但是，跨域可能存在问题 . 以下是一些显示不同方法的来源：

  http://css-tricks.com/cross-domain-iframe-resizing/

  How to get height of iframe cross domain

  Resize iframe height according to content height

  Resizing an iframe based on content

  Get value of input field inside an iframe

  注意：后者显示了如何访问字段，但访问体高的原则相同

  回复于 2024-04-20T11:25:33+08:00
• 7

  您还需要在网站上访问，以便进行iframing . 我在这里找到了最好的解决方案：https://gist.github.com/MateuszFlisikowski/91ff99551dcd90971377

  yourotherdomain.html

  <script type='text/javascript' src="js/jquery.min.js"></script>
  <script type='text/javascript'>
    // Size the parent iFrame
    function iframeResize() {
      var height = $('body').outerHeight(); // IMPORTANT: If body's height is set to 100% with CSS this will not work.
      parent.postMessage("resize::"+height,"*");
    }
  
    $(document).ready(function() {
      // Resize iframe
      setInterval(iframeResize, 1000);
    });
  </script>
  

  你的网站有iframe

  <iframe src='example.html' id='edh-iframe'></iframe>
  <script type='text/javascript'>
    // Listen for messages sent from the iFrame
    var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var eventer = window[eventMethod];
    var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
  
    eventer(messageEvent,function(e) {
      // If the message is a resize frame request
      if (e.data.indexOf('resize::') != -1) {
        var height = e.data.replace('resize::', '');
        document.getElementById('edh-iframe').style.height = height+'px';
      }
    } ,false);
  </script>
  

  回复于 2024-04-20T11:25:33+08:00
• 25

  javascript中没有选项可以找到跨域iframe高度的高度，但是你可以借助一些服务器端编程来完成这样的事情 . 我在这个例子中使用了PHP

  <code>
      <?php
  $output = file_get_contents('http://yourdomain.com');
  ?>
  <div id='iframediv'>
      <?php echo $output; ?>
  </div>
  
  <iframe style='display:none' id='iframe' src="http://yourdomain.com" width="100%" marginwidth="0" height="100%" marginheight="0" align="top" scrolling="auto" frameborder="0" hspace="0" vspace="0"> </iframe>
  
  <script>
  if(window.attachEvent) {
      window.attachEvent('onload', iframeResizer);
  } else {
      if(window.onload) {
          var curronload = window.onload;
          var newonload = function(evt) {
              curronload(evt);
              iframeResizer(evt);
          };
          window.onload = newonload;
      } else {
          window.onload = iframeResizer;
      }
  }
     function iframeResizer(){
          var result = document.getElementById("iframediv").offsetHeight;
  
          document.getElementById("iframe").style.height = result;
          document.getElementById("iframediv").style.display = 'none';
          document.getElementById("iframe").style.display = 'inline';
      }
  </script>
  </code>
  

  回复于 2024-04-20T11:25:33+08:00
• 1

  如果您有权操作要加载的站点的代码，则以下内容应提供一种全面的方法，以便在框架内容的高度发生变化时随时更新 iframe 容器的高度 .

  将以下代码添加到要加载的页面（可能在 Headers 中） . 此代码在DOM更新时（如果您正在延迟加载）发送包含HTML容器高度的消息，或者调整窗口大小（当用户修改浏览器时） .

  window.addEventListener("load", function(){
      if(window.self === window.top) return; // if w.self === w.top, we are not in an iframe 
      send_height_to_parent_function = function(){
          var height = document.getElementsByTagName("html")[0].clientHeight;
          //console.log("Sending height as " + height + "px");
          parent.postMessage({"height" : height }, "*");
      }
      // send message to parent about height updates
      send_height_to_parent_function(); //whenever the page is loaded
      window.addEventListener("resize", send_height_to_parent_function); // whenever the page is resized
      var observer = new MutationObserver(send_height_to_parent_function);           // whenever DOM changes PT1
      var config = { attributes: true, childList: true, characterData: true, subtree:true}; // PT2
      observer.observe(window.document, config);                                            // PT3 
  });
  

  将以下代码添加到存储iframe的页面 . 这将更新iframe的高度，因为该消息来自iframe加载的页面 .

  <script>
  window.addEventListener("message", function(e){
      var this_frame = document.getElementById("healthy_behavior_iframe");
      if (this_frame.contentWindow === e.source) {
          this_frame.height = e.data.height + "px";
          this_frame.style.height = e.data.height + "px";
      }
  })
  </script>
  

  回复于 2024-04-20T11:25:33+08:00