在iframe

Question

我使用以下代码根据内容调整iframe的大小：

iframe内部

function resizeiframe() {
  window.parent.postMessage(
    document.getElementById("widget-container").offsetHeight
    ,"*"
  );
};


window.onload = function() {
  resizeiframe();
};

在父级

中

<iframe src="https://myurl.com"
        frameborder="0"
        scrolling="no"
        width="100%"
        id="my-iframe"
        name="my-iframe"
        allowtransparency="true"
        target="_blank">
  Your browser is not supported.
</iframe>

<script type="text/javascript">
    var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
    var myEventListener = window[myEventMethod];
    var myEventMessage = myEventMethod == "attachEvent" ? "onmessage" : "message";
    myEventListener(myEventMessage, function (e) {
        if (e.data === parseInt(e.data))
            document.getElementById('my-iframe').height = e.data + "px";
            alert(e.data);
    }, false);
</script>

它工作得很好（用于测试我警告父母的e.data）。但是，如果我希望iframe在点击时调整大小则不起作用。

iframe内的按钮

$(document).on("click", ".show-recipe-btn", function(){
  window.parent.postMessage(
    2000
    ,"*"
  );
});

当我点击示例代码中的按钮时，父警告2000，这是正确的，但iframe高度不会改变。

我需要更改哪些内容才能在按钮点击时调整iframe大小？

  

更新我刚刚意识到，一旦点击该按钮，它就会触发2000，但就在该窗口之后。再次激活。

     

新问题：我需要window.onload函数来发送   小部件容器高度，并在按钮单击我需要发送另一个ID的高度。如何重写我的代码才能使其工作？