动态 iframe 高度取决于隐藏/显示

Posted 2023-03-06

【中文标题】动态 iframe 高度取决于隐藏/显示

【英文标题】：Dynamic iframe height depending on hide/show

【发布时间】：2013-02-02 23:07:39

【问题描述】：

我有一个表单，其中包含一些隐藏字段，这些字段仅根据是/否单选按钮问题的答案显示。

此表单用于多个使用 iframe 的外部网站，因此位于不同的域中。

如何根据这些隐藏字段是否显示来更改 iframe 的高度。它们显示/隐藏的方式是在单独的 scripts.js 文件中使用 jquery show/hide。例如

 $('#show').click(function()
     $('#additional_fields').show('fast'); 
);

$('#hide').click(function()
   $('#additional_fields').hide('fast'); 
);


<div id="additional_fields" style="display:none;"> hidden fields here
</div>

包含上述内容的 iframe：

<iframe id="idIframe" src="http://websites.com/form.php" scrolling="no"   border="0"/>

更新

我已经设法使用以下方法让它工作

$("#idIframe", top.document).css( height: 1750 );

但是，这仅在使用相同的域时有效。

【问题讨论】：

是从框架中的页面调用还是从框架集调用到页面？

从 iframe 内的页面调用。

【参考方案1】：

给你的 iframe 一个 ID 并使用 jQuery height 函数：

$('#show').click(function()
      var newHeight = $("#idIframe").height() + 50;
      $("#idIframe").height(newHeight);
      $('#additional_fields').show('fast');   
);

$('#hide').click(function()
      var newHeight = $("#idIframe").height() - 50;
      $("#idIframe").height(newHeight);
    $('#additional_fields').hide('fast'); 
);

演示如何改变 iframe 的高度：

http://jsfiddle.net/aZxRn/

【讨论】：

我应该在 iframe 的来源页面中还是在包含 iframe 的页面中添加这个？

@user1961082 在带有显示和隐藏按钮的文件中。 （或外部 JS 文件）。 jQuery 应该能够找到元素“iframe”

似乎仍然不起作用。我也没有遇到任何 js 错误，高度保持在 1000。

@user1961082 - 我已经编辑了我的帖子，你可以重试吗？还要检查我提供的 JS fiddle。

不，仍然没有运气。这很奇怪，因为它也没有给出任何错误。如果我这样做 alert($("#idIframe").height()); 它返回 null

【参考方案2】：

$('#show').click(function () 
    $('#additional_fields').show('fast');
    $("#idIframe").height($("body").height());
);

$('#hide').click(function () 
    $('#additional_fields').hide('fast');
    $("#idIframe").height(0);
);

【讨论】：

我应该在 iframe 的来源页面中还是在包含 iframe 的页面中添加这个？

在包含 iframe 的页面内。

似乎仍然不起作用。我也没有遇到任何 js 错误，高度保持在 1000。

仅供参考，如果我使用$("#idIframe", top.document).css( height: 1750 );，它可以工作，但希望我不必手动设置它

【参考方案3】：

您需要使用context 选项才能调用框架集。

$('#show').click(function () 
    $('#additional_fields').show('fast');
    $("iframe",window.document).height(150);
);

$('#hide').click(function () 
    $('#additional_fields').hide('fast');
    $("iframe",window.document).height(0);
);

这是因为默认情况下Jquerys上下文设置为当前帧的文档，所以需要手动设置上下文。

【讨论】：

似乎仍然不起作用。我也没有遇到任何 js 错误，高度保持在 1000。

【参考方案4】：

我认为唯一的方法是使用postMessage (https://developer.mozilla.org/en-US/docs/DOM/window.postMessage) 将内容的高度发送到父窗口。

问题是父页面需要收听消息，因此只有在您对它有一定控制权的情况下才能使用。

【参考方案5】：

我编写了一个示例，它可以在为 iframe 的内容设置动画的同时调整 iframe 的大小。我认为您应该在我的代码中找到您的解决方案：

http://algorhythm.de/tools/resizeable-iframe/

我的解决方案也仅适用于父域和 iframe 使用相同域的情况。因为同源策略：http://en.wikipedia.org/wiki/Same_origin_policy

【讨论】：

这很好，但如果 parent 和 iframe 位于不同的域中则不起作用（如此小提琴所示：jsfiddle.net/Q3X2r）。

@strah 好的，你可以用 PHP 构建一个代理实现或使用一些 JSONP，然后你可以使用其他域的 javascript...

是的，代理或 JSONP 也可以，但它们需要一些服务器端脚本。

应该没问题：***.com/a/6036468/852866绝大多数浏览器都支持。

此链接已失效。 404. 下次试试把代码贴在这里