Question

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

但是，它们是跨域服务器。他们都在不同的领域。我真的不知道如何使用jQuery。是否有一个易于学习的教程？

Answer 1

我不确定您是否可以仅使用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>

Answer 2

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

只需下载这些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未调整大小”。这将创建一个缩放器的实例。

将此jquery库放在页面的<head> </head>部分。

<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
将此行放在代码的最后一部分</body>
之前
<script type="text/javascript" src="iframeresizer.contentwindow.min.js">

希望这会对你有所帮助。祝你好运兄弟！

动态调整跨域网站中的iframe

2 个答案: