動態iframe高度取決於隱藏/顯示

Question

我有一個包含一些隱藏字段的表單，這些字段僅根據是/否單選按鈕問題的答案顯示。

此表單使用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"/>

UPDATE

我設法使用以下內容使其工作

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

但是，這僅在使用相同域時有效。

Answer 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/

Answer 2

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

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

Answer 3

您需要使用上下文選項才能調用框架集。

$('#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上下文設置為當前幀的文檔，因此您需要手動設置上下文。

Answer 4

我認為唯一的方法是使用postMessage （ https://developer.mozilla.org/en-US/docs/DOM/window.postMessage ）將內容的高度發送到父窗口。

問題是父頁面需要監聽消息，所以只有在你對它有一些控制權時才會有效。

Answer 5

我寫了一個示例，在動畫內容的同時調整iframe的大小。 我想你應該在我的代碼中找到你的解決方案：

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

我的解決方案也只有在您使用父域和iframe的相同域時才有效。 這是因為相同的原產地政策： http ： //en.wikipedia.org/wiki/Same_origin_policy