iframeって最近使われているのでしょうか？WPやらのPHPでのページの読み込みや、jQeryでもページの読み込みは可能。それでもiframeを使用するには何らかの理由があるからなんですが・・・それでも最近そういったサイトはお目にかからないです。おそらく僕が見ていないだけですが。では、さっそくiframeについて進めていきます。
iframeなんて使ってないよ！という人にはまったくもって意味のない記事です。
ご自分の知りたいところからお読みください。
iframeとは
iframeとSEO
iframeを制御するjQuery
iframeとは
ifarmeとは、今更人に聞けないからググちゃってここに来た方のためにご説明しておきます。
「iframe」は、Inline Frameの略でございまして、インラインフレームと読みます。
このインラインフレームはひとつのページ内に、別のページを表示させるものでして、body内の好きな場所に挿入できます。
使い方は至ってシンプルで、<iframe>で囲った場所に任意のファイルを読み込みます。
幅や高さも一緒に設定することでサイドバーや、ページの任意の場所に合わせて表示させることができます。
サンプルHTML
<iframe src="読み込みファイル" width="100%" frameborder="0" scrolling="no"></iframe>
あとちなみにのお話ですが、wordpressでマルチブログなど利用している場合、ほかにも何かあったけど、iframeは特権管理者しか使用できないなんてこともあります。
これは権限の問題で権限の低い方が記事投稿を行った場合、「unfiltered_html」権限が付与されておらず、記事ないのタグから<script>タグや<iframe>タグがフィルターされちゃうってケースです。
これを回避する方法は、権限の変更を行うか、function.phpにちょこちょこっと書いてあげると回避できますが次回のネタに回します。
iframeとSEO
iframeを使えば他人のサイトでさえ、あなたのページの一部として見せることができます。
しかし、そのiframe内に読み込まれたページは、あくまでも独立したページとしてみなされるためgoogleに評価される場所にはなりません。ですので、もしもそのiframeで呼び出そうとしているコンテンツが自コンテンツであるならば、iframeではなくphpで読み込んだり、jQueryの.loadなどを使って読み込んだほうが宜しいと思います。
また、ちょっと昔に読んだ記事でiframe無いの表示先にページランクが渡される的なことを某海外SEOブログの方がおしゃってました。
気になる方はお読みになってみてはいかがでしょうか？その記事
しかし、その裏を返せばSEOを意識したサイトで重複したコンテンツを防ぎたい場合には有効的な活用方法となるのではないでしょうか？
あまり深くは自粛いたしますが、使い方次第ということです。
iframeを制御するjQuery
さて、iframeですがこれまた色々と曲者だったりします。そうでもありませんがちょっと手こずったりしたのでして。
問題として上がってきたのは、iframeで読み込む先のページの高さやらの問題です。
A.htmlとb.htmlでそれぞれコンテンツの量が違い、うまく高さが合わなかったり、その読み込み先のページを更新した時に高さが変わってしまい、読み込むページのiframeの高さ指定の数値を変更しなければならないなんて手間です。これが数ページならまだしも数十ページとなってくると、かったるくて仕方ありません。
そこで探したのが、「jQueryで高さを自動取得して調整しちゃいます！」ってスクリプトです。
あいにく時間との戦いでスクリプトのメモしかとっておらず、引用先のURLがわかりませんが、ググって見たい方は頑張って探してみてください。
SCRIPT
(function ($) {
$.fn.iframeAutoHeight = function (spec) {
var undef;
if ($.browser === undef) {
var message = [];
message.push("WARNING: you appear to be using a newer version of jquery which does not support the $.browser variable.");
message.push("The jQuery iframe auto height plugin relies heavly on the $.browser features.");
message.push("Install jquery-browser: https://raw.github.com/house9/jquery-iframe-auto-height/master/release/jquery.browser.js");
alert(message.join("\n"));
return $;
}
// set default option values
var options = $.extend({
heightOffset: 0,
minHeight: 0,
callback: function (newHeight) {},
animate: false,
debug: false,
diagnostics: false, // used for development only
resetToMinHeight: false,
triggerFunctions: [],
heightCalculationOverrides: []
}, spec);
// logging
function debug(message) {
if (options.debug && options.debug === true && window.console) {
console.log(message);
}
}
// not used by production code
function showDiagnostics(iframe, calledFrom) {
debug("Diagnostics from '" + calledFrom + "'");
try {
debug(" " + $(iframe, window.top.document).contents().find('body')[0].scrollHeight + " for ...find('body')[0].scrollHeight");
debug(" " + $(iframe.contentWindow.document).height() + " for ...contentWindow.document).height()");
debug(" " + $(iframe.contentWindow.document.body).height() + " for ...contentWindow.document.body).height()");
} catch (ex) {
// ie fails when called during for each, ok later on
// probably not an issue if called in a document ready block
debug(" unable to check in this state");
}
debug("End diagnostics -> results vary by browser and when diagnostics are requested");
}
// show all option values
debug(options);
// ******************************************************
// iterate over the matched elements passed to the plugin ; return will make it chainable
return this.each(function () {
// ******************************************************
// http://api.jquery.com/jQuery.browser/
var strategyKeys = ['webkit', 'mozilla', 'msie', 'opera'];
var strategies = [];
strategies['default'] = function (iframe, $iframeBody, options, browser) {
// NOTE: this is how the plugin determines the iframe height, override if you need custom
return $iframeBody[0].scrollHeight + options.heightOffset;
};
jQuery.each(strategyKeys, function (index, value) {
// use the default strategy for all browsers, can be overridden if desired
strategies[value] = strategies['default'];
});
// override strategies if registered in options
jQuery.each(options.heightCalculationOverrides, function (index, value) {
strategies[value.browser] = value.calculation;
});
function findStrategy(browser) {
var strategy = null;
jQuery.each(strategyKeys, function (index, value) {
if (browser[value]) {
strategy = strategies[value];
return false;
}
});
if (strategy === null) {
strategy = strategies['default'];
}
return strategy;
}
// ******************************************************
// for use by webkit only
var loadCounter = 0;
// resizeHeight
function resizeHeight(iframe) {
if (options.diagnostics) {
showDiagnostics(iframe, "resizeHeight");
}
// set the iframe size to minHeight so it'll get smaller on resizes in FF and IE
if (options.resetToMinHeight && options.resetToMinHeight === true) {
iframe.style.height = options.minHeight + 'px';
}
// get the iframe body height and set inline style to that plus a little
var $body = $(iframe, window.top.document).contents().find('body');
var strategy = findStrategy($.browser);
var newHeight = strategy(iframe, $body, options, $.browser);
debug(newHeight);
if (newHeight < options.minHeight) {
debug("new height is less than minHeight");
newHeight = options.minHeight + options.heightOffset;
}
debug("New Height: " + newHeight);
if (options.animate) {
$(iframe).animate({height: newHeight + 'px'}, {duration: 500});
} else {
iframe.style.height = newHeight + 'px';
}
options.callback.apply($(iframe), [{newFrameHeight: newHeight}]);
} // END resizeHeight
// debug me
debug(this);
if (options.diagnostics) {
showDiagnostics(this, "each iframe");
}
// if trigger functions are registered, invoke them
if (options.triggerFunctions.length > 0) {
debug(options.triggerFunctions.length + " trigger Functions");
for (var i = 0; i < options.triggerFunctions.length; i++) {
options.triggerFunctions[i](resizeHeight, this);
}
}
// Check if browser is Webkit (Safari/Chrome) or Opera
if ($.browser.webkit || $.browser.opera) {
debug("browser is webkit or opera");
// Start timer when loaded.
$(this).load(function () {
var delay = 0;
var iframe = this;
var delayedResize = function () {
resizeHeight(iframe);
};
if (loadCounter === 0) {
// delay the first one
delay = 500;
} else {
// Reset iframe height to 0 to force new frame size to fit window properly
// this is only an issue when going from large to small iframe, not executed on page load
iframe.style.height = options.minHeight + 'px';
}
debug("load delay: " + delay);
setTimeout(delayedResize, delay);
loadCounter++;
});
// Safari and Opera need a kick-start.
var source = $(this).attr('src');
$(this).attr('src', '');
$(this).attr('src', source);
} else {
// For other browsers.
$(this).load(function () {
resizeHeight(this);
});
} // if browser
}); // $(this).each(function () {
}; // $.fn.iframeAutoHeight = function (options) {
}(jQuery));
なっげーですね。
やっぱ後でURL貼ります。
このスクリプトを読み込んで、iframeタグには高さを自動で調整しますよって読み込みを加えます。
上記のなっげースクリプトをiframe.jsとした場合
サンプルソース
<script type="text/javascript" src="js/iframe.js"></script>
<script type="text/javascript">jQuery('iframe').iframeAutoHeight();</script>
こんな感じで使います。
そして、iframeAutoHeight()内に数値を入力することで高さに余白を加えることもできます。
使い方
<script type="text/javascript">jQuery('iframe').iframeAutoHeight({ heightOffset: 15 });</script>
１５px余白をくださいな！って感じです。
どうでしょうか？
iframe使う気になりましたか？