Question

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

有没有办法检查iFrame src网址是否已更改？如果是这样，我可以制定条件并执行以下代码以降低高度。

<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中获得感谢页面时设置它。

请求帮助。

Answer 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');

Answer 2

您可以在父页面中执行iFrame网址更改检查，如下所示：

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

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

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

2 个答案: