javascript 別フレームから文字列を取得して、新しいウィンドウに表示する

Tipsのトップに戻る

別フレームから文字列を取得して、新しいウィンドウに表示する。: 別フレームから文字列を取得して、新しいウィンドウに表示する。

別フレームの選択された文字列を新しいウィンドウに表示させるには？

イメージがしにくい方や　何をやろうとしているかわからない方は、サンプルをクリックして実際に試してみてください。

サンプルはこちら

 サンプルをダウンロードする（frame.zip）

フレームの構造

　Frame.html （フレーム設定ページ）
　　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>sample</TITLE> </HEAD> <FRAMESET cols="50%,50%"> <FRAME src="a.htm" scrolling="auto" name="framea" id="framea"> <FRAME src="b.htm" scrolling="auto" name="frameb" id="frameb"> <NOFRAMES> <BODY></BODY> </NOFRAMES> </FRAMESET> </HTML>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　a.html(文字列を選択するページ　・・・フレーム名は、framea　）
　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　<HTML><HEAD><TITLE>フレーム</TITLE> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> </HEAD> <BODY> <BR> <BR> 下の文字列はサンプルで、特に意味はありません。 <BR> <LI>Afterhours Nonstop Mix Style Two / Physics　 <br> <br>　かなりおしゃれなダウンテンポのハウスミュージックアルバム。 <br>スウェーデンのPhysicsがDJをつとめ、自身の曲をメインにすごく心地よい音楽で繋いでくれます。 <br>　スウェーデンの人気ダンスレーベルdeeplay musicのトップDJのPhysicsだから間違いないです。 <br>試聴ができるので、是非聞いてみてください。 <br>　 <br>　ラウンジ、ハウス好きならど真ん中。 <br> <br> <br> <br> <br><LI> 　 Portrait in Jazz / BILL EVANS　　Fantasy/Original Jazz Classics <br> <br> <br>試聴できます　とにかく美しいピアノで有名なビルエバンスのリヴァーサイドの４部作の最初の作品で名盤です。 <br> <br>超有名な名曲　枯葉が収録されているアルバムで、 <br>この枯葉（Autumn Leaves）はかなりよいです。 <br> <br>早いリズムの中に物悲しさみたいなものが感じられます。 <br>しかも、ベースのスコット・ラファロはかっこよすぎます。 <br>小粋に乗せられてしまう曲です <br> <br>１曲目のCome Rain Or Come Shineなんかも好きで、オススメの作品 <br> <br> <br></BODY></HTML>
　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　b.html（ボタンがあるページ・・・・フレーム名は、frameb）
となってます。
　　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
　　　<HTML><HEAD><TITLE>Frame B</TITLE> <META http-equiv=Content-Type content="text/html; charset=shift_jis"> </HEAD> <BODY> <SCRIPT language=javascript>  </SCRIPT> <P align=center>フレームB</P> <CENTER> <FORM name=frmFrom><INPUT onclick=op() type="button" value="選択範囲を新しいウィンドウで表示" name="btnStart"></FORM> </CENTER></BODY></HTML>
　　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

解説　（b.htmlのスクリプト）

b.html（ボタンのあるページ）には下のようなスクリプトがあります。

<SCRIPT language=javascript>

</SCRIPT>

*赤文字部分が選択文字列を取得するフレームの名前

b.html （ボタン）のページから、<INPUT onclick=op() type="button" value="選択範囲を新しいウィンドウで表示" name="btnStart">などで、関数op()を呼び出せば、

文字列が選択されていれば新しいページに書き出します。

b.html （ボタン）のページから、<INPUT onclick=op() type="button" value="選択範囲を新しいウィンドウで表示" name="btnStart">などで、関数を呼び出せば、

文字列が選択されていれば新しいページに書き出します。

*注意事項。
Javascriptを使い、フレーム間で選択文字列やクリップボードなどのデーターを扱う場合は、フレームが基本的に同じサイト内のページの場合しかできないみたいです。（セキュリティの関係から

Javascriptで　アクセスが拒否されました　とエラーが出る場合、このところにひっかかっている場合があります。
↑のframe.html,a.html,b.htmlをデスクトップなどに保存して
ローカルでIEで実行するとよくわかるのですが、不明なゾーンとなってしまい、アクセスが拒否されてしまいます。
ローカルで実行したいのならば、Firefoxなどのブラウザをつかうしかないようです。
　　（IEでローカルでやる方法がわかりませんでした。）

IEの場合はめんどくさいですが、サーバーにアップして確認するとエラーはでません。

あくまで、これはセキュリティ上の問題でローカル（不明なゾーン）では、フレーム間のデーター受け渡しができないものと思われます。

参考
------------------------------------------------------------------
選択された範囲の文字を得る関数関数対応ブラウザ (括弧付きは下位互換対応)

document.getSelection() Netscape Communicater 4.0 以上、Mozilla、(Firefox)
document.selection() Internet Explorer 4.0 以上
document.selection.createRange().text Internet Explorer 4.0 以上
window.getSelection() Firefox、Safari
window._content.getSelection().toString() Firefox、Mozilla
( ↑toString() をつけないと、DOM2 の Range オブジェクトになるらしい。)

------------------------------------------------------------------