在跨域站点中动态调整iframe的大小


Dynamically resize iframes in a cross-domain site

我想根据父级的内容大小动态调整iframe的大小。我可以访问父(源)和子(目标)网站/服务器。

但是,它们是跨域服务器。他们都在不同的领域。我真的不知道如何使用jQuery。有没有一个简单易懂的教程?

您可以尝试使用iframe-resizer-jquery插件。它对我有用。

只需下载这些js文件:

  • jquery-1.11.1.js
  • IframeResizer.js
  • IframeResizer.contentWindow.min.js

www.ADomain.com中,将此代码块添加到具有iframe的页面中。

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="iframeresizer.min.js"></script>
<script type="text/javascript" src="iframeresizer.contentwindow.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('#IframeID').iFrameResize({
            autoResize: true,
            enablePublicMethods: false,
            sizeWidth: false,
            heightCalculationMethod: 'bodyScroll'
        });
    });
</script>


然后在www.BDomain.com中,在将加载到iframe的页面中添加此代码块,以避免出现另一个名为的错误"有时我的iframe没有调整大小"。这将创建一个调整大小器的实例。

  1. 将这个jquery库放在页面的<head> </head>部分中。

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

  2. 将这一行放在</body> 之前的代码的最后一部分

    <script type="text/javascript" src="iframeresizer.contentwindow.min.js">

希望这对你有帮助。祝你好运,兄弟!

我不确定你是否可以只使用css来实现这一点,但如果你想在你可以访问的iframe之间传输信息,为了避免跨域错误,你可以在url中传输数据,并使用JS和JQUERY处理它们假设这个文件是主要的index.html

<iframe src="www.a.com/?width=330&height=220"></iframe>

这是iframe 索引中的代码

<iframe src="www.b.com"></iframe> 
   <script>

function getParam(name) {
  name = name.replace(/['[]/, "''[").replace(/[']]/, "'']");
  var regex = new RegExp("[''?&]" + name + "=([^&#]*)"),
          results = regex.exec(location.search);
  return results === null ? "" : decodeURIComponent(results[1].replace(/'+/g, " "));
}
    $(function(){
           $('iframe[src="www.b.com"]').width(getParam('width')).height(getParam('height')) 
    });
    </script>