Question

我有以下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页面并调整大小，一切正常。如果我加载宽度＆lt; 768它只在我改变窗口宽度后添加了css类。

可能有什么问题，我该如何解决这个问题？

Answer 1

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

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

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

1 个答案: