ホーム へ       サンプルページ   IFRAME 4   iframe4.htm

これは、Internet Explorer5.5を使った、Webページ上で編集可能なページの作成法です。  (1)  IFRAME内のドキュメント全体を編集モードにする(例)です。 designMode(デザインモード)のプロパティを使います。    (2) 閲覧モードで実行時に個々の要素を編集可能にする(例)も。  contentEditable 属性を True に設定することで閲覧中のテキストボックスのように振る舞う領域を作成します。   Internet Explorer の解析およびレンダリング エンジンへのHTML拡張機能であるMSHTMLです。      Internet Explorer5.5〜対応です。     コピー、編集して制作者の情報を反映でき、簡単にご自分のWebで応用できます。

デモは、それぞれなにかタイプインします。  (1) [デザインモード] のボタンを押さえ、縦書きフォームにタイプインや、画像、Webコンテンツをペーストをやらかし ”らくぐわき” します。

 

(1)

 

 

(2)

=(^。^)= ここにテキストを入力/編集できますのだ…*。

 

< ご使用方法 >

・ ローカル(=PC)への保存は、iframe4.htm を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 【Internet Explorer】 - [ファイル] - [名前を付けて保存]−[ファイルの種類] ”Webページ、完全” ……、などで変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、iframe4.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2) を参考に太字部分の編集を任意に行います。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.jsなども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号62スタイルシートリファレンスホームページ開設入門が便利!。   Web DevelopmentWeb開発MSDN IE8 HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点IE7IE6XMLDHTML

 

(*1)  iframe4.htm 編集モードにする(例)       挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

 

 

 

 

 

 

 

ボタン文字   対象WebのURL  IFRAMEサイズ

 

<script for="btnDesign" event="onclick">

targetDoc = document.frames(0).document;

if (targetDoc.designMode == "On")

targetDoc.designMode = "Off";

else

targetDoc.designMode = "On";

</script>

<button id=btnDesign>デザインモード</button>

<iframe src="tategaki.htm" style="border: black thin; width:100%; height:500px"></iframe>

 

(*2)  iframe4.htm 個々の要素を編集可能にする(例)       挿入先の  <body> 〜 </body> の、 部分にペーストします。

HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

領域サイズ  コンテンツ

<p><!--webbot bot="HTMLMarkup" startspan -->

<span contentEditable=true style="width:300; border:lightgrey 1px inset">=(^。^)= ここにテキストを入力/編集できますのだ…*。

</span><!--webbot bot="HTMLMarkup" endspan --></p>