Movable Type 備忘録

 iframe with jQuery

  • Jan012009
  • Vote:
    http://bizcaz.com/archives/2009/01/01-150656.php
  • Categories: jQuery
  • Tags:
  • Social Bookmark

新年明けましておめでとうございます。
本年もよろしくお願いします。

さて、新年一回目の記事はやっぱり jQuery です。
わたしのオススメの一品です (●´∀｀●)

わたしのサイトでは jQuery やら mootools など、iframe を使ってサンプル表示させてます。
でも、XHTML 1.1 では iframe は推奨されてません。そこで jQuery を使って対応してるわけですね (￣∇￣)b

たとえば、iframe を使って Google の検索ページを以下に表示してみます。

サンプルを表示できませんでした。

こんなかんじでカンタン且つ、Valid に iframe を使うことができます。
わたしのサイトに限ってはかなり重宝してますの (●´∀｀●)

ダウンロード

残念なことに、配布元さんではスクリプトの公開をやめてしまった!? ようです。
とっても便利なのにすっごく残念ですが、わたしが以前ダウンロードしたものでよければ以下からお持ち帰りください。
ただし、わたし向けに少し!? カスタマイズしちゃってます (;￣∇￣A はは

使い方

使い方はとってもカンタンです。
まず、iframe を使って表示したページを以下のようにマークアップします。

マークアップ

  1. <a href="http://www.google.co.jp/webhp?hl=ja" class="iframe h:600 sc:no">サンプルを表示できませんでした。</a>

基本的には iframe で表示させたいページへのアンカーとして記述します。
青字の部分は iframe で表示したページの URL を、赤字には以下で説明する iframe のオプションを指定します。

  • fb:

    iframe のパラメータでいうところの frameborder に相当します。pixel 数を指定してください。デフォルトは 0 です。

  • wm:

    iframe のパラメータでいうところの marginwidth に相当します。pixel 数を指定してください。デフォルトは 0 です。

  • hm:

    iframe のパラメータでいうところの marginheight に相当します。pixel 数を指定してください。デフォルトは 0 です。

  • w:

    iframe のパラメータでいうところの width に相当します。pixel 数を指定してください。デフォルトは '100%' です。

  • h:

    iframe のパラメータでいうところの height に相当します。pixel 数を指定してください。デフォルトは '100%' です。

  • sc:

    iframe のパラメータでいうところの scrolling に相当します。'yes' or 'no' を指定してください。デフォルトは 'auto' です。

  • hs:

    iframe のパラメータでいうところの hspace に相当します。pixel 数を指定してください。デフォルトは 0 です。

  • vs:

    iframe のパラメータでいうところの vspace に相当します。pixel 数を指定してください。デフォルトは 0 です。

  • cls:

    任意のクラス名称を付加することができます。デフォルトはマークアップ時のクラス名と同様になります。
    elementType オプションで指定したタグに、ここで指定したクラス名が付加されます。

  • elementType:

    iframe タグ置き換え時に包含するためのタグ名を指定します。デフォルトは div タグで囲われます。
    実際には以下のようにかんじでマークアップされます。

    1. <div class="iframe">
    2.     <iframe src="●●●" width="320" height="240" />
    3. </div>

  • xhtml:

    タグ閉じ方を指定します。'true' を指定した場合 XHML の構文に沿ってタグが閉じられます。'false' の場合には HTML の構文でタグを閉じます。

大まかなオプションは以上です。
緑字は JavaScript が Off だったりなどの場合に表示するテキストになります。

実際には以下のように使いいます。

iframe コード

  1. $(document).ready(function() {
  2.     $('a.iframe', '#main').iframe();
  3. });

上記のようにページのロード完了後、iframe というクラスがついたアンカーを検索して iframe タグに差し替えます。
青字の部分は検索する範囲を絞り込むためのものです。ページ全体を検索するのではなく、検索範囲を絞り込んだほうが高速です。

以上です。

本年もこんな調子でいろんなスクリプトを試したり、Movable Type のカスタマイズ記事をがんばっていきます (●´∀｀●)
どうぞよしなに。

 Trackback Pings(0)

No trackbacks found.

 Comments(4)

#1: Posted by Author Profile Page アプル @ January 2, 2009 [REPLY]
user-pic

あけましておめでとうございます♪
昨年は、色々と参考にさせて頂きました。
ありがとうございました♪

今年もきっと・・・世の中自体がイマイチだと
思うので1日1日を乗りこなすしかないのかな？
なんて思っています・・・。
でも・・・お互いに素敵な1年にしたいですね。

今年も宜しくお願い致しますm(._.)m

 
#2: Posted by Author Profile Page bzbellからアプルへの返信 @ January 2, 2009 [REPLY]
user-pic

>>1 アプル さん

明けましておめでとうございます。

昨年は不景気やら、日本っておかしいよっ!! ってな話題が多く、あまり良い年ではなかったですが、今年は良い年になるといいですねワクワク
わたしの今年の抱負は『英字新聞をつまづかず読むっ!!』ですキャハハ
こんなわたしですが本年もよろしくお願い致しますテレテレ

 
#3: Posted by Author Profile Page Kei @ January 2, 2009 [REPLY]
user-pic

あけましておめでとうございます＾＾
昨年はお世話になりました～！

いつも来るたびbzbellさんのブログは進化してますねうぅ～ん
このテンプレートもとても素敵です(｡･･｡)ﾎﾟｯ
うちは更新止まりつつありますがOrz

今年もよろしくお願いします＾＾ｖ

 
#4: Posted by Author Profile Page bzbellからKeiへの返信 @ January 2, 2009 [REPLY]
user-pic

>>3 Kei さん

明けましておめでとございます。
こちらこそ大変お世話になりましたブイブイ

> うちは更新止まりつつありますがOrz

うん、知ってます。チョコチョコとお邪魔してるのであせあせ
忙しくって更新されてないのかなぁ･･･と思ってました。
でも、わたしもあまり記事書いてないですにやり
飽きっぽいわたしが 3 年も( ブログを )継続できたので、われながら感心してますパチパチ

ここ数年景気悪い話ばっかりで嫌になりますが、今年こそはいい年になるといいですねワクワク

 

 Post a Comment

 

コメント用フィード