ブログ|静的志向

言語言語切替
日本語 English
サイト内検索

札幌在住のTakaによる静的htmlで作成したブログです。

素早く表示されるブログを作ることを目的として書いています。

iframe内の高さを自動調整する方法(レスポンシブにも対応)

iframeタグを使えばページ内に他サイトの情報を埋め込むことが可能です。。しかiframe高さ(height)を調整して綺麗に表示するにはjQueryを使う必要があります。

実物を見た方が早い!WordPressの最新記事を表示してみた

↑この表示はiframeタグを使っています。そのやり方は

  1. WordPressで最新記事の導入部だけが表示されるページをつくる(こちらから閲覧できます)
  2. iframeタグを使って1のページを埋め込む
  3. JQueryを使ってデザインを整える

今回はiframeとそのデザイン調整について説明していきます。

iframeとjQuery

<iframe src="http://kentampontam.com/wp/?page_id=4" frameborder="0" width="100%" scrolling="no" id="wpNewArticle"></iframe>

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

iframeについて解説

  • src="ここに埋め込み先のurl"
  • frameborder="0" → フレームを消す
  • width="100%" → iframeを画面幅で表示
  • scrolling="no" → スクロールバーを非表示
  • id="wpNewArticle" → 次のjQueryで使用

高さ(heigth)の指定は必要ありません。次のjQueryで調整するからです。

jQueryについて解説

jQuery日本語リファレンスiframeの高さをコンテンツにあわせるから引用しました。元のscriptでは

$(document).ready(function(){
$('iframe').load(function(){
if (typeof $(this).attr('height') == 'undefined') {
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
}
});
$('iframe').triggerHandler('load');
});

↑id指定がなくiframeそのものを調整しています。

今回は特定のiframeタグだけを調整するためid(wpNewArticle)を指定しました($('iframe')を$('#wpNewArticle')に変更しています)

さて、このscriptで重要なところは

if (typeof $(this).attr('height') == 'undefined') {

heightがないとき~という条件です。元のコードにこれがあったので、先ほどのiframeではheightを指定しませんでした。

もしifarmeタグにheightを入れてしまうと、jQueryが動作しなくなってしまいます。

なおjQueryはコピペするだけなので「とりあえずiframeにheightを入れなければOK」と思ってくれれば十分です。

iframe内の高さを自動調整する方法(レスポンシブにも対応)のまとめ

  1. iframeの高さをコンテンツにあわせるからscriptをコピーする。
  2. iframeの設定をする。id指定やscrollingのことです。ただしheightは入れない
  3. iframeにclassやidを指定した場合は、コピペしたscriptの$('iframe')を変更すること。

iframeタグの内容とjQueryにheightを入れないこと以外はすべてコピペで完了します。

あとがき

今回の内容は「出張時に静的htmlでなくWordPressでブログを更新して、トップページにWordPressの最新記事を表示させる」を実現するための方法です。

静的htmlでブログ更新の欠点として「FTPサーバーに接続する」というのがあります。これはもし、安全でないネットワークでサーバーにアクセスした場合、ログインIDとパスワードが漏れる危険性があるということです。

他にもパソコンやタブレットを紛失した際、第三者に端末を操作されて、アプリに登録してあったFTPサーバーを勝手にいじられる恐れもあります。

そんなわけで「外からの更新はできる限りリスクを減らしたい!でもブログは更新したい!!」という願いから、今回WordPressを一部だけ導入することに決めました。

↓鋭意制作中↓

ダイエットエラミカ

私自身の実践と経験に基づくリバウンドしないダイエットについて詳しく解説しています。

筋肉量31.4kg

BMI21.9 筋肉型スリム

元の用紙はこちら

↑このように私自身の体組成結果をすべて公開しています。現時点で2年以上のデータ、体脂肪率1桁の結果は21ヶ月連続で達成中です。

詳しくは「ダイエットエラミカ」よりご覧ください。

Sponsor Link

シェアしてくれると嬉しいです