Как изменить размер внутри iframe?

Question

У меня есть следующий фрагмент кода яваскрипта для принуждать класс CSS, когда ширина находится под 768:

<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> 

Это работает отлично, когда я открываю страницу на мобильном устройстве.

Однако, когда я добавляю одну страницу внутри фрейма для мобильного приложения он перестает работать, и принимает на себя ширина превышает 768.

Edit: Кажется, там должно быть событие изменения размера для условий для Работа. Если я загружаю iframe со страницей в браузере и изменяю его размер, все работает нормально. Если я загружу его с шириной < 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