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

我有以下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>

$（文档）.ready（函数（）{
var resizing=false；
函数doResize（）{
var w=$（窗口）.innerWidth（）；
控制台日志（w）；
如果（w<1320&&w>768）{
$（'input[name=“start”]'）.val（“重试”）；
$（'input[name=“stop”]'）.val（“stop”）；
}否则{
$（'input[name=“start”]”）.val（“重试命令”）；
$（'input[name=“stop”]'）.val（“stop命令”）；
}
如果（w<768）{
$（'.div'）.addClass（'mobile'）；
}否则{
$（'.div'）.removeClass（'mobile'）}；
}
}
$（窗口）。调整大小（函数（e）{
如果（调整大小！==false）{
clearTimeout（调整大小）；
}
调整大小=设置超时（doResize，200）；
});
})

当我在移动设备上打开页面时，这种方法非常有效

但是，当我在iframe中为一个移动应用程序添加相同的页面时，它会停止工作，并假设宽度大于768

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

---

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

我认为您只需要在设置处理程序后立即触发resize，或者调用

doresize（）

---

Javascript是从iFrame外部应用的吗？如果是这样的话，它将不起作用。当脚本在iFrame中呈现时，它是否会加载到页面中？这个问题没有很详细的说明，并且会混淆您的问题。此外，您所提供的只是一段代码，而不是一个示例。请避免在页面布局中使用iFrame。请参阅@JodyHeavener no，javascript来自iframe内的页面

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