根据内容调整iframe的大小

我正在开发一个类似igoogle的应用程序。来自其他应用程序(在其他域中)的内容使用iframe显示。

我如何调整iframes的大小以适应iframes的内容的高度?

我试图破译的javascript谷歌使用，但它是模糊的，搜索网络至今一无所获。

更新:请注意，内容是从其他域加载的，因此适用同源策略。

当前回答

我们有这种类型的问题，但稍微与您的情况相反-我们正在向其他域的网站提供iframed内容，因此同源策略也是一个问题。在花了好几个小时搜索谷歌后，我们最终找到了一个(有点..)可行的解决方案，您可能能够适应您的需求。

有一种方法可以绕过同源策略，但它需要同时对iframe内容和框架页面进行更改，因此，如果您不能同时请求更改两边的内容，那么这种方法恐怕对您没有多大用处。

有一个浏览器的怪癖，它允许我们绕过同源策略——javascript可以与自己域中的页面通信，也可以与它已经框架的页面通信，但不能与它被框架的页面通信，例如，如果你有:

 www.foo.com/home.html, which iframes
 |-> www.bar.net/framed.html, which iframes
     |-> www.foo.com/helper.html

然后home.html可以与framed.html (iframed)和helper.html(同一域)通信。

 Communication options for each page:
 +-------------------------+-----------+-------------+-------------+
 |                         | home.html | framed.html | helper.html |
 +-------------------------+-----------+-------------+-------------+
 | www.foo.com/home.html   |    N/A    |     YES     |     YES     |
 | www.bar.net/framed.html |    NO     |     N/A     |     YES     |
 | www.foo.com/helper.html |    YES    |     YES     |     N/A     |
 +-------------------------+-----------+-------------+-------------+

Framed.html可以向help .html (iframed)发送消息，但不能向home.html发送消息(子节点不能与父节点跨域通信)。

这里的关键是help .html可以接收来自framed.html的消息，也可以与home.html通信。

本质上，当framed。html加载时，它计算出自己的高度，告诉helper。html，后者将消息传递给home。html，后者可以调整framed。html所在的iframe的大小。

我们发现的将消息从framed.html传递到help .html的最简单方法是通过URL参数。为此，frames .html有一个iframe，并指定了src= "。当它的onload触发时，它计算自己的高度，并在此时将iframe的src设置为help .html?身高= N

这里有一个facebook如何处理它的解释，可能比我上面的稍微清楚一点!

代码

在www.foo.com/home.html中，需要以下javascript代码(这可以从任何域的.js文件中加载，顺便说一句..):

<script>
  // Resize iframe to full height
  function resizeIframe(height)
  {
    // "+60" is a general rule of thumb to allow for differences in
    // IE & and FF height reporting, can be adjusted as required..
    document.getElementById('frame_name_here').height = parseInt(height)+60;
  }
</script>
<iframe id='frame_name_here' src='http://www.bar.net/framed.html'></iframe>

在www.bar.net/framed.html:

<body onload="iframeResizePipe()">
<iframe id="helpframe" src='' height='0' width='0' frameborder='0'></iframe>

<script type="text/javascript">
  function iframeResizePipe()
  {
     // What's the page height?
     var height = document.body.scrollHeight;

     // Going to 'pipe' the data to the parent through the helpframe..
     var pipe = document.getElementById('helpframe');

     // Cachebuster a precaution here to stop browser caching interfering
     pipe.src = 'http://www.foo.com/helper.html?height='+height+'&cacheb='+Math.random();

  }
</script>

www.foo.com/helper.html:网站内容

<html> 
<!-- 
This page is on the same domain as the parent, so can
communicate with it to order the iframe window resizing
to fit the content 
--> 
  <body onload="parentIframeResize()"> 
    <script> 
      // Tell the parent iframe what height the iframe needs to be
      function parentIframeResize()
      {
         var height = getParam('height');
         // This works as our parent's parent is on our domain..
         parent.parent.resizeIframe(height);
      }

      // Helper function, parse param from request string
      function getParam( name )
      {
        name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
        var regexS = "[\\?&]"+name+"=([^&#]*)";
        var regex = new RegExp( regexS );
        var results = regex.exec( window.location.href );
        if( results == null )
          return "";
        else
          return results[1];
      }
    </script> 
  </body> 
</html>

2008-12-12 12:04:38

其他回答

This is slightly tricky as you have to know when the iframe page has loaded, which is difficuly when you're not in control of its content. Its possible to add an onload handler to the iframe, but I've tried this in the past and it has vastly different behaviour across browsers (not guess who's the most annoying...). You'd probably have to add a function to the iframe page that performs the resize and inject some script into the content that either listens to load events or resize events, which then calls the previous function. I'm thinking add a function to the page since you want to make sure its secure, but I have no idea how easy it will be to do.

2008-09-30 14:12:16

使用jQuery的最简单方法:

$("iframe")
.attr({"scrolling": "no", "src":"http://www.someotherlink.com/"})
.load(function() {
    $(this).css("height", $(this).contents().height() + "px");
});

2012-08-30 17:50:38

https://getbootstrap.com/docs/4.0/utilities/embed/

经过大量的研究，我明白了，这不是一个独特的问题，我打赌Bootstrap处理它。你瞧……

2022-01-27 12:57:54

如果您可以控制iframe内容，我强烈建议使用

调整观察者大小

只需在iframe的srcdoc属性的末尾插入以下内容，如果需要，可以转义。

<script type="text/javascript">
var ro = new ResizeObserver(entries => {
  for (let entry of entries) {
    const cr = entry.contentRect;
    // console.log(window.frameElement);
    window.frameElement.style.height =cr.height +30+ "px";
  }
});

ro.observe(document.body);
</script>

2021-12-13 11:51:14

我相信这样的做法会奏效。

parent.document.getElementById(iFrameID).style.height=framedPage.scrollHeight;

在iframe内容中加载你的body。

2008-09-30 14:13:07

根据内容调整iframe的大小

推荐文章

最新文章

标签