一陣の神風が舞う
東北弁炸裂するショボプログラマの日々(´・ω・`)
04 | 2018/05 | 06
S M T W T F S
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

[JavaScript] IFrameを使って余所サマのコンテンツを埋め込んでみた

某所で、 Flex上にIFrameを使ってHTMLコンテンツを埋め込むってサンプルがあるんだけど、、
あれってhtmlに追記しなくちゃいけないとかちょっと使いにくいと思ったので、 組み込みやすいように書き直してみることにした。

最終的にはFlex側から容易に呼び出せるようコンポーネント化しようと企んでたりする。

今回はJavaScript部分。
動的にIFrameタグをHTML内に埋め込んで色々します。


例によってサンプル [別窓] [スクリプトファイル]

サンプル説明

全ての機能を ContentViewerオブジェクト にクラスっぽく埋め込んでいるので OOP ライクなコードが書けるかも。
prototypeオブジェクト全開で書くのって結構便利なのね(・x・;)

  • [読込]ボタンで、指定のURLのコンテンツを読み込む
  • [移動]ボタンで、指定の座標にContentViewerを移動させる(DIV配下の時は無視)
  • [表示][非表示]ボタンで、ContentViewerを表示/非表示にする(削除はしていない)
  • [リサイズ]ボタンで、指定の大きさをContentViewerに設定する(DIV配下の時は無視)
  • [インタフェース]ボタンで、ContentViewerの持つ全ての関数名を列挙する(主にデバッグ用)
  • [スクリプトダンプ]ボタンで、ContentViewerの中身を全部吐き出す(主にデバッグ用)
  • [文字列変換]ボタンで、ContentViewerの持つ全ての関数以外の値を列挙する(主にデバッグ用)
  • [BODYに生成]ボタンで、ContentViewerをBODYの子要素として配置する
  • [DIVに生成]ボタンで、ContentViewerをDIVの子要素として配置する(親要素を引数で指定可能)
  • [削除]ボタンで、ContentViewerオブジェクトを破棄します。
要素のidチェックをしているから、このサンプルではContentViewerは1つだけしか生成できない。
[DIVに生成]ってのを補足すると、初期化時に親要素のidを指定することで、そいつの子要素になり、 リサイズと移動が不可になります。
いや、変更しても良いんだけどレイアウト崩れやすいし、スクリプト側で制限掛けちゃってます。

|・x・)ノシ ンジャ、マタ

テーマ:プログラミング - ジャンル:コンピュータ

この記事に対するコメント

この記事に対するコメントの投稿














管理者にだけ表示を許可する


この記事に対するトラックバック
トラックバックURL
→http://ciablo.blog70.fc2.com/tb.php/128-1df2b70b
この記事にトラックバックする(FC2ブログユーザー)

プロフィール

Mahny

Author:Mahny
趣味PG派生の職業PG(+SE?)。頭のデキはきっと残念ω

最近の記事

最近のコメント

最近のトラックバック

月別アーカイブ

カテゴリー

ブロとも申請フォーム

この人とブロともになる

ブログ内検索

RSSフィード

リンク

このブログをリンクに追加する

ペット
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。