3

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

此表单用于使用 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" height="1000" width="950" border="0"/>

更新

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

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

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

4

5 回答 5

0

我相信，唯一的方法是使用postMessage（https://developer.mozilla.org/en-US/docs/DOM/window.postMessage）将内容的高度发送到父窗口。

问题是父页面需要收听消息，所以这只有在你对它有一些控制的情况下才会起作用。

于 2013-02-20T10:36:40.180 回答
0

Give an ID to your iframe and use the jQuery height function:

$('#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'); 
});

Demonstrating how to change the height of the iframe:

http://jsfiddle.net/aZxRn/

于 2013-02-18T13:43:29.443 回答
0 
$('#show').click(function () {
    $('#additional_fields').show('fast');
    $("#idIframe").height($("body").height());
});

$('#hide').click(function () {
    $('#additional_fields').hide('fast');
    $("#idIframe").height(0);
});
于 2013-02-18T13:46:22.560 回答
0

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

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

我的解决方案也仅在您对父级和 iframe 使用相同的域时才有效。这是因为同源政策：http ://en.wikipedia.org/wiki/Same_origin_policy

于 2013-02-20T10:52:39.573 回答
0

您将需要使用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 上下文设置为当前帧的文档，因此您需要手动设置上下文。

于 2013-02-18T14:21:08.747 回答