このブログは、上部に"黒板"状のイメージで、「お品書き」を設置しています。 このデザインに拘りがあってそうしているのですが、 しかし、最初に読み込まれるデータが、その分無駄に多くなるわけで、SEO的には良くないという説もあるわけで。 （※例えば検索エンジンがサイトを読み込んでインデックスしたときに、無駄な情報が多くて本文に到達しない＝本文がインデックスされない可能性があるわけです。） そこで、ふと思いついたのは、上部のお品書きの黒板部分を外部ファイルにして、iframeで読み込ませるようにすれば、ソースに書くのは一行で済むんじゃ・・・ というわけでやってみたら、iframeって、高さを自動で調整してくれないのですね。。。 高さをきっちり指定して作り込んでしまえばよいのですが、ちょっと調べてみたら、javascriptを使って自動的に高さを調整する方法もあるそうで、やってみました。 ☆以下のサイトを参考にさせて頂きました。
iframeの高さを判別して自動的に調整する(JavaScript)
iframeを使っているページなどで、iframeの高さを判別して自動的に調整したい。そんなときのJavaScriptです。(jQuery使用)cssなどでもできますが、手っ取り早く実装したい場合は以下のソースをコピペでOKです。ソース下記…
iframeにID名をセット
<iframe src="url" width="***" id="フレームID">
JavaScript（フレームのID指定）
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$("#フレームID").on("load", function(){
try {
$(this).height(0);
$(this).height(this.contentWindow.document.documentElement.scrollHeight);
} catch (e) {
}
});
$("#フレームID").trigger("load");
</script> 
コメント