如何根据内容使用 javascript 设置 iFrame 高度和宽度答案

【问题标题】：How to set iFrame height and width using javascript based on the contents如何根据内容使用 javascript 设置 iFrame 高度和宽度
【发布时间】：2017-12-29 19:13:53
【问题描述】：

我的 jsp 页面中有一个 iFrame，在页面加载时，它的高度和宽度应分别为 600 和 400。此 iFrame 包含一些页面，其中包含一些表单，一旦填写并提交表单，它将重定向到感谢页面。当时我需要iFrame的高度为200（因为页面内容较少，我需要减少其中的空白）。如何做到这一点？我在堆栈交换本身中获得了 n 个链接，但在这种情况下没有任何用处。

有什么方法可以检查 iFrame src url 是否更改？如果是这样，我可以创建一个条件并执行以下代码来降低高度。

<script type="text/javascript">
  function iframeLoaded() {
  var iFrameID = document.getElementById('idIframe');
  if(iFrameID) {
        iFrameID.height = "200";
        iFrameID.width = "400";
        iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
        iFrameID.width = iFrameID.contentWindow.document.body.scrollHeight + "px";
  }   
  }
</script>

如果我在 iFrame 页面加载中提供上述功能，则它可以正常工作，但只有当我在 iFrame 中获得感谢页面时，我才需要设置它。

请求对此提供帮助。

【问题讨论】：

标签： html jsp iframe

【解决方案1】：

您可以使用 cookie.js (https://github.com/js-cookie/js-cookie) 之类的东西为 iframe 中的每个步骤创建一个辅助 cookie。

(function($) {

    $( '#submit-button').on( "click", function() {
        Cookies.set('isSubmitted', true);
    });

})(jQuery);

现在您可以检查是否设置了 cookie 并调整 iframe 的大小

(function($) {

  if(Cookies.get('isSubmitted') === true) {
      $('#iFrameID').height(200);
  }

})(jQuery);

之后你可以删除这个cookie

Cookies.remove('isSubmitted');

【讨论】：

【解决方案2】：

您可以像这样在父页面中进行 iFrame url 更改检查：

function check(){
    $('#idIframe').load(function() {
        console.log("the iframe has changed");
    });
};

$("#idIframe").on("mouseenter",function(){
  window.setInterval(check, 100); // 100 ms
});

【讨论】：