iframeにページが読み込まれた時、親ページに表示したい

[新着] Webテンプレートを仮オープンしました

0   名前： アカシア ： 2006/08/11（金） 14:48  ID:GxyO0gtK
非表示のＮｏが打ってあるページが iframe に読み込まれた時、そのＮｏが親ページの一部に表示出来るようにしたいです。

　隠しＮｏの入れ方と、読み込み、そして表示の仕方を教えて下さい。

　色々検索しましたが、親からiframe しか見つかりませんでした。


　どなたかよろしくお願いします。
1   名前： かふぇおれ ： 2006/08/11（金） 14:48  ID:Ji0blfRq
用語の認識を間違えていたらごめんなさい。

隠しNo は <input type="hidden" name="data" value="TEST STRINGS"> と
インラインフレーム内のファイルに記述。
読み込みは <body onload=" "> か <iframe onload=" "> とかのイベントで
document.フレームの名前.フォームの名前.data.value; を呼べば値が取れます。
表示の仕方は document.write() でも innerHTML でも textbox でもお好みで。

頑張れ〜♪
2   名前： かふぇおれ ： 2006/08/11（金） 14:48  ID:Ji0blfRq
失礼しました。
>>1 は Javascript を使用しての一例と思ってください。
3   名前： アカシア ： 2006/08/11（金） 14:48  ID:j0ABupIE
かふぇおれ様　ありがとうございます。ところで

onload=""の""の間に何を入れるのかわかりません。
iframe onload= は親フレームの<iframe src=　〜　>の中に入れるのですよね。
body onload= の場合はiframe に読み込まれるそれぞれのページの<body 〜>の中に入れるのですよね。
どちらにしても""の間に何を入れるのか分かりません。

持っている本の中に
例１）
<form><input type="Text" id="TextForm "value="フォームの値"></form>

<script>
<!--
document.write("<br>") ;
document.write(document.getElementById("TextForm").getAttribute("value")) ;
//-->
</script>
　がありましたのでそのままを同ページの中で書き込みましたが表示されませんでした。
document.getElementById　はNull またはオブジェクトではありません。
と表示されました。

しかしもう一つ
例２）
<p id="xxxx"></p>

<script>
<!--
document.write("") ;
document.write(document.getElementsByTagName("p")[0].id) ;
//-->
</script>

があり、これは同じく同ページ内で表示されました。
教えて頂いた　
　<input type="hidden" name="data" value="TEST STRINGS">
は 例１）の<form>〜</form>部分になるのですよね。

そしてフォーム名を仮に<form name="page>としてiframeのnameをiFrame としたら
　document.iFrame.page.data.value;
ですよね。これをどこに記述するのでしょうか。
<script></script>の中に入れても表示されませんでした。
onload=""の中でしょうか？　一応やってみたのですが無理でした。

例１）例２）共にiframe の中の情報取得ではないのでdocument.iFrame.page.data.value; をその為に記述するのでしょうが、上の
document.write(document.getElementById("TextForm").getAttribute("value")) ; の前に持って行ったりと色々試しましたがうまく行きませんでした。

　ただ、例１は　そのままで表示されなかったのですから当たり前かも知れないのですが･･･。

　もう少し教えて下さい。


4   名前： かふぇおれ ： 2006/08/11（金） 14:48  ID:Ji0blfRq
よく考えてみたら…

＞非表示のＮｏが打ってあるページが iframe に読み込まれた時、
インラインフレームに読まれるファイルは指定されているのだから、
わざわざファイル内からNoを持ってくる必要は無い気がするのですが…。

受け取り側
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>インラインフレームから受け渡しテスト</title>
<script type="text/javascript">
<!--
function getData(){
document.getElementById ("test").firstChild.data = fre01.F1.data.value;
}
// -->
</script>
</head>
<body>
<iframe src="test01.html" name="fre01" width="300" height="100">受け渡しのサンプルファイルが入ります</iframe>
<input type="button" value="受け取る" onClick="getData()">
<div id="test">受け取ったデータをここに表示</div>
</body>
</html>


インラインフレームの中用（test01.html）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>送りテスト</title>
</head>
<body>
受け渡しのサンプル
<form name="F1">
<input type="hidden" name="data" value="TEST STRINGS">
</form>
</body>
</html>


# DOCTYPE が間違っているかも。
5   名前： かふぇおれ ： 2006/08/11（金） 14:48  ID:Ji0blfRq
…すれ違ってしまったようですね（ｗ

サンプルはイベントを onClick="" にしています。
アカシアさんの希望に添うと、これを受け取り側の <body onload="getData()"> でいける…かも。（未検証、もしかするとインラインフレームの読み込みを確認してから所得しなければいけないかも）
6   名前： アカシア ： 2006/08/11（金） 14:48  ID:j0ABupIE
　かふぇおれ様ありがとうございます。

　うまく行きました。かふぇおれ様のをそのままコピペしたのですから当然ですが･･･。
それと確かに云われてみればそうなんですが、iframe の中で表示ページを変えたかったので親フレームの指定した場所にその都度タイトルやポエムやら、もちろんNo等を表示させたかったのです。

iframe の枠を画面として利用したかったのでその中には文字を入れたくなかったのです。

　他に方法もあるのかも知れませんが、思いつかなかったのです。

とにかく望んでいた結果にして頂いてありがとうございました。
7   名前： アカシア ： 2006/08/11（金） 14:48  ID:j0ABupIE
かふぇおれ様
>>６を送ったあとに>>５を見ました。

　大丈夫です。<iframe>の中にonload＝"getDate()"
をいれたら望んでいた通りに動いています。

　わざわざありがとうございます！！
8   名前： アカシア ： 2006/08/11（金） 14:48  ID:j0ABupIE
何度もすいません。

　表示されるTEST STRINGS　の文字色は変えられないのでしょうか？

　<div id="test">受け取ったデータをここに表示</div>

　の間に

　<font color="#ff4500">_</font>

　とか入れると動作しなくなります。　　
9   名前： かふぇおれ ： 2006/08/11（金） 14:48  ID:Ji0blfRq
firstChild.data ですから。
大きさやスタイルを指定するのなら、CSSでいかがでしょう。
<style type="text/css">
<!--
.gettxt {  font-size: 14px; font-style: italic; font-weight: bold; color: #ff4500}
-->
</style>

そして該当する <div> の属性に class="gettxt" を足してあげる、調節はご随意に。
見栄えに関しての指定は CSS を使う事が推奨されています。
10   名前： アカシア ： 2006/08/11（金） 14:48  ID:qBApS/j5
　昨日お礼送ったはずなのに掲載されていない･･･。

では改めてありがとうございました。
　
こういうものを　firstChild.data というのだと初めて知りました。

またそういう時はstyleを使えばいいというのも勉強になりました。

　ありがとうございました。
　
11   名前： アカシア ： 2006/08/11（金） 14:48  ID:Kf7EQXu9
すいません。

　その後、WINにfirefox opera をダウンロードしてみたらIEしか表示されませんでした。あとNetscapeも。
　もしかと思ってMACでも確認したらこちらは全部ダメでした。
　えー、safari とfirefoxです。
どうもWindowsのIEしか表示されないのですけど、そんなものなんでしょうか？

　バージョンは最近ダウンロードしたのでMACのIE5.5とsafari以外は最新版だと思います。
一覧へ戻る