javascript - Youtube 和 Google map iframe 在 Chrome 和 Opera 中不可见

Question

我在将 youtube 和 google maps iframe 嵌入我的网站时遇到问题。该问题出现在 Webkit 浏览器(Chrome、Opera)中。我有一个 jQuery 脚本，它调整 iframe 的大小以适应浏览器宽度(以保持在不同设备上的响应能力)，然后 iframe 变得不可见。

问题出现在这样的用例中:

1. 缩小浏览器窗口宽度(或使用手机)
2. 刷新页面
3. iframe 可见但不适合窗口宽度
4. Javascript 正在运行并更改 iframe 宽度和高度以适应窗口宽度
5. iframe 变得不可见
6. 如果我手动更改窗口大小，iframe 会再次可见(仅在桌面上，在手机上 iframe 始终不可见，无法更改窗口大小)

问题仅在嵌入 youtube 和 Google map 时出现，其他 iframe 完美运行。

这是有问题的 URL:https://www.rtu.lv/lv/nac-studet

简化的代码示例:

$(window).resize (function (){     
    $('iframe, img').each (function () {   
        if (!empty ($(this).attr('data-default-width'))) {      
            var w = $(this).closest('div').actual('width');
            var m = parseFloat ($(this).attr('data-margins'));   
            var dw = parseFloat ($(this).attr('data-default-width'));
            var dh = parseFloat ($(this).attr('data-default-height'));
            var ar = parseFloat ($(this).attr('data-aspect-ratio'));                                  
            if (dw+m>w) {
                if ($(this).width()!=w-m) {
                    $(this).width(w-m);
                    $(this).height((w-m)/ar);    
                    if (($(this).is('iframe')) && ($(this).css('float')=='left')) {
                        //IF CHROME, IFRAME IS INVISIBLE. WHAT IS NEXT???
                    }                                                                                        
                }
            } else if (dw+m<=w) {
                if ($(this).width()!=dw) {  
                    $(this).width(dw);     
                    $(this).height(dh);  
                    if (($(this).is('iframe')) && ($(this).css('float')=='left')) {
                        //IF CHROME, IFRAME IS INVISIBLE. WHAT IS NEXT???    
                    }                                                                                          
                }   
            }                          
        }                                   
    })   
}) 

Answer 1

解决方法:

$('iframe').css('transform', 'scale(0.9999)');    
$('iframe').css('transform', 'scale(1)');