未分類

iframeの高さの自動調整

 

 

  • 共通コンテンツのSEO対策で実装
  • すべてのiframeを対象にせず、iframe1のidがあるiframeのみ反映させる

 

 

html

<iframe src="読み込み先パス" frameborder="0" width="100%" scrolling="no" id="iframe1"></iframe>

Widthは100%で高さはjQueryから取得する

 

 

 

jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

 

JS

<script>
var height;
var scrollHeight;

jQuery(function($){
    $('#iframe1').load(function(){
    if (typeof $(this).attr('height') == 'undefined') {
        $(this).height(this.contentWindow.document.documentElement.scrollHeight);
    }
});
</script>

footer.phpにでも記述するのが良いでしょう

 

 

iframe挿入時の注意

  • <a href=”URL”>タグのリンクにはtarget=”_blank”を加えること
    <a href=”URL” target=”_blank”>
    これをしないとフィッシングとしてブラウザでブロックされてリンクが押せない

 

 

Amazonおすすめ

iPad 9世代 2021年最新作

iPad 9世代出たから買い替え。安いぞ!🐱 初めてならiPad。Kindleを外で見るならiPad mini。ほとんどの人には通常のiPadをおすすめします><

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)