如何在iframe中强制调整大小？

debugcn 发表于 Dev

或

我有以下javascript代码段，用于在宽度小于768时强制使用CSS类：

<script>
 $( document ).ready(function() {
  var resizing = false;
   function doResize() {
       var w=$(window).innerWidth();
       console.log(w);
       if (w < 1320 && w > 768) {
           $('input[name="start"]').val("Retry");
           $('input[name="stop"]').val("Stop");
       } else {
           $('input[name="start"]').val("Retry command");
           $('input[name="stop"]').val("Stop command");
       }
       if (w < 768 ) {
           $('.div').addClass('mobile');
       } else {
           $('.div').removeClass('mobile') });
       }
   }

  $(window).resize(function(e) {
       if (resizing!==false) {
           clearTimeout(resizing);
       }
       resizing=setTimeout(doResize, 200);
   });
  })
    </script>

当我在移动设备上打开页面时，此方法效果很好。

但是，当我在iframe中为移动应用添加同一页面时，该页面将停止工作并假定宽度大于768。

编辑：似乎需要一个调整大小的事件，条件才能工作。如果我在浏览器中将iframe与页面一起加载并调整其大小，则一切正常。如果我加载的宽度小于768，则仅在更改窗口宽度后才添加css类。

可能出什么问题了，我该如何解决？

查理

我认为您所需要做的就是在设置处理程序后立即触发调整大小，或调用 doresize()

$(window).resize(function(e) {
       if (resizing!==false) {
           clearTimeout(resizing);
       }
       resizing=setTimeout(doResize, 200);
}).resize();// trigger it on page load now

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。