SQLの窓

2016年03月09日


IFRAME 内に外部の javascript を読み込んで画面を作成する / document.write での構築

結果的には、JSONP のもっと規模の大きいもので、外部定義で WEBページを全て作ってしまう方法です。

以下の IFRAME 内のページはこのようなコードで実装されています
<input type="button" value="IFRAME 内へのアクセス" onclick='document.getElementById("cross_domain_frame").contentWindow.document.body.style.backgroundColor = "#c0c0c0"'>

<iframe
	src="about:blank"
	id="cross_domain_frame"
	style="width:600px;height:900px"
></iframe>
<script type="text/javascript">
str="<"+"script charset=\"utf-8\" src=\"http://toolbox.winofsql.jp/js/string_html.js\"></"+"script> ";
document.getElementById("cross_domain_frame").contentWindow.document.write(str);
document.getElementById("cross_domain_frame").contentWindow.document.close();
</script>
しかも、about:blank に書き込むので元々同一ドメインという事になるので、DOM で IFRAME 内へアクセスする事ができます(当然中から本体へのアクセスもできます)。また、http://toolbox.winofsql.jp/js/string_html.js の中身は全て文字列の書き込みになっていて、普通に作った HTML+CSS+JavaScript のページのコードをこちらのツールで文字列に変換しています。

※ contentWindow.document は contentDocument に書き換える事ができます
document.write で書き込んだ画面内には、さらに外部ライブラリとして jQuery や jQuery プラグインや SyntaxHighlighter が使用されていますが、正しく動作しています

本当のつかいどころ

この方法でブックマークレットから任意のページに画面を埋め込んで、そこから本体のページをコントロールするプラグインを作成できます。本体側は簡単な設定でそれを拒否する事もできますが、プラグインするのは個人なので、特定のサービス以外でそのような実装はあまり見た事がまだありません。

自分は以前、『手書きブログ』というサービスで、当時パレットが自由に設定できなかった部分をこの手法でブックマークレット経由でプラグインを作成して配布していた事がありましたが、本体の HTML 構成が変更されない限り、普通に機能を追加できます。

▼ 使用例
というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました



posted by lightbox at 2016-03-09 21:20 | JavaScript DOM | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり