[jQuery]一定幅以下になったらiframeを再読込させる

非表示→表示だとiframeの中身が出ない場合がある。

レスポンシブ+iframeの駄目なところというか無理っぽいところ
やっていく
1. 仕組みの話

レスポンシブ+iframeの駄目なところというか無理っぽいところ

iframeで埋め込むwebサービスがある。

それを、レスポンシブと合わせてスマホ幅時だけ表示したい。

はじめから表示される幅で読み込めば表示される。

display:none;で切り替えるのが一般的だと思う。
表示されない幅から切り替えると、iframeの中身が表示されない場合がある。

それをどうにかしましょう。

やっていく

<div class="weather onlySP">
    <iframe width="650" height="187" src="https://embed.windy.com/embed.html?type=forecast&location=coordinates&detail=true&detailLat=35.66269471552431&detailLon=139.73356064138568&metricTemp=default&metricRain=default&metricWind=default" frameborder="0"></iframe>
</div>

.weather{
    iframe{
        width: 100%;
    }
}
@media screen and (min-width: 768px) {
    .onlySP {
        display: none;
    }
}

$(window).on('load resize', function(){
    if(window.matchMedia('(max-width:767.98px)').matches){
        if(!$('body').hasClass('sp')){
            $('body').addClass('sp');
            var src = $('.weather iframe').attr('src');
            $('.weather iframe').attr('src', '');
            $('.weather iframe').attr('src', src);
        }
    }else{
        $('body').removeClass('sp');
    }
})

仕組みの話

ネックになるのはjs（jQuery）部分。

クロスドメイン前提だと.reload()じゃ駄目らしくて、iframeを再設定することで再読み込みになるらしいということで、それをやっている。

で、単純に一定幅以下で再読み込みさせると幅を変えるたびに発火するので、「一定幅以下になったタイミングで発火」に留めるようにしなければいけない。
なので、幅判定で「.sp」を付与するタイミングと絡ませた。

そんな感じ。