UFrame

Ajax
Javascript

iframeのように他ページのコンテンツを取得する

iframeというタグはほかのページのコンテンツを自分のサイトに埋め込むことができ、場合によっては非常に便利です。
しかし、ブラウザ間で挙動が違ったり、Ajaxと組み合わせて利用すると利用できない場面がある、など開発者泣かせのタグでもあります。

そんなiframeの欠点を補うらしい？Ajaxスクリプト、Uframeを試してみました。
jQueryを利用します。
.NETのUpdatePanelと併用するといい感じらしいのですが、ここでは通常のHTMLに組み込む方法をご紹介します。

公式？サイト
UFRAME: goodness of UpdatePanel and IFRAME together

以下、利用方法です。

1. 上記のサイトにアクセスし、Source Codeというタブをクリック
2. 右上のLatest Version　Downloadというリンクをクリックしてダウンロード
3. ファイルを解凍し、/trunk/UFrame-Scripts というディレクトリの中が、利用するJavascript本体です。
4. ここからは、HTMLに書き込んでいきます。jquery-1.2.3.js、htmlparser.js、UFrame.jsを読み込みます。
5. 後は、次のように
   にsrcを指定するだけ。

 <div id="UFrame1" src="iframe_test_content.html" class="UFrame">
  <p>This should get replaced with content from Somepage.aspx</p>
 </div>

1. インラインフレーム風にするために、次のスタイルを設定します。

 div.UFrame { 
    width: 300px; 
    height: 300px; 
    overflow: scroll; 
    border: 1px solid black; 
    background-color: white; 
    color:black; 
    padding: 5px }

これで終わりです。なんとも簡単です。

サンプルを下記に置きましたので、HTMLコーディングなどは参考にしてみてください。
UFrameを利用した、iframe風の利用

注意点


読み込む先に、文字エンコーディングの指定

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

があると、エラーになってしまうようです。

利用した感想としては、すごく使いやすい！というほどのこともないかもしれません。
何かiframeで困ったときのために、こういうものもある、と知っておいて損はないでしょう。

overflowの中にiframeを入れるとIE6で崩れる

共有:

• クリックして Twitter で共有 (新しいウィンドウで開きます)
• Facebook で共有するにはクリックしてください (新しいウィンドウで開きます)
• クリックして Google+ で共有 (新しいウィンドウで開きます)

いいね:

いいね 読み込み中...

関連