結果的には、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 構成が変更されない限り、普通に機能を追加できます。 ▼ 使用例 というわけで、『関西向け東電プレミアムプラン シュミレーション』ブックマークレットを作成しました
|
【JavaScript DOMの最新記事】
- JavaScript : setTimeout の第一引数の正しい書き方。
- JavaScript でクリックの代替( 古くは dispatchEvent で呼び出し )、現在は jQuery の click() ではリンクの URL を開く事はでき無いので、$("セレクタ")..
- JavaScript : リンクから _blank で開いたページを JavaScript で閉じる場合の動作テスト
- JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )
- JavaScript DOM と jQuery : エレメントの参照
- JavaScript : リンクのテキストの取得( Chrome、Firefox、IE / textContent、innerText、text、replace、jQuery )
- 動的に作成された IFRAME の キャラクタセットのブラウザ別の違い
- ローカル記憶域 : window.localStorage
- JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました
- JavaSctipt : ユーザ用(名前空間付き)イベント追加メソッドの作成
- JavaScript : 最後にクリックしたテキストフィールドを保存する
- JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く