親ウィンドウの<TD>～</TD>内の書き換え方法

質問

子ウィンドウから親ウインドウの表示を書き換えたいのですがどうすればよいのかわかりません。

<FORM name="FORM_1" ethod="post" action="abc.html">
<TABLE>
<TBODY>
<TR>
<TD id="AA">ここに表示</TD>
</TR>

:
:
:

</TBODY>
</TABLE>
</FORM>

上記が親ウィンドウのコードの一部ですが、「ここに表示」の部分を子ウィンドウから書き換えたいのですが、子ウィンドウから見たこのセルの指定の記述方法が分かりません。

よろしくお願いいたします。

回答No.3

noname#199778 · ベストアンサー

DOMを利用したDHTML的手法については、先の方の回答にある通りでよいと思いますが、この場合、古いブラウザでは動作しないことも考えられます。
できれば、そういったブラウザでも対応できるように仕掛けをしておくのが良いと思いますよ。

具体的には、DOMに対応しているブラウザ向けにはDOMで、layerを採用しているNetscape4.xxではlayerで、そうでないブラウザに関してはフォーム部品で対応するようにするのが良いと思います。 なお、Netscape4.xxのDHTML技術は特殊なものですので、これを除外するのも無理はない対策になると思います。

DOMの方法については、

if (document.getElementById){
window.opener.document.getElementById("AA")="書き換えるHTMLソース";
}

という記述でよいでしょう。 これを関数として定義して実行させれば、DOMを採用しているブラウザではこれを実行し、そうでないブラウザではこれを無視します(エラーにもなりません)。
layerを利用した記述方法は、

if (document.layers){
document.layers["AA"].document.open();
document.layers["AA"].document.write("書き換えるHTMLソース");
document.layers["AA"].document.close();
}

このような感じで良かったと思います。 こちらの記述については、手元で確認を取っていないので、あまり当てにならないかもしれません。 先も述べたように、この記述は特殊な存在ですので、切り捨てて考えて構わないかもしれませんね。

フォーム部品で対応するケースですが、あらかじめフォーム部品を用意しておいて(仮にその部品の名前をbox1とすると)、

window.opener.document.FORM_1.box1.value="表示するテキスト";

でいけるでしょう。 こちらの場合、書き換える内容としてHTMLは使用できません。 プレーンテキストで表示されますので、注意してください。

現実的には、DOMでの方法と、フォーム部品を使った方法を併用するのが良いと思います。 具体的には、

<td id="AA">ここに表示</td>

となっている部分を

<td id="AA">
<script type="text/javascript"><!--
if (!document.getElementById){
document.open();
document.write('<input type="text" name="box1">');
document.close();
}
--></script>
</td>

としておき、子ウィンドウの方のスクリプトは、

function changeTxt(txt){
if (document.getElementById){
window.opener.document.getElementById("AA").innerHTML=txt;
}
else {
window.opener.document.FORM_1.box1.value=txt;
}
}

このような感じにしておけば良いでしょう。 この関数を呼び出す部分は、

<a href="#" onClick="changeTxt('書き換える内容')">リンク</a>

このような具合にしておきます。 上記の関数では、渡された引数をセルに表示させますので、関数を呼び出す部分でこれを指定しておく必要があります。
このようにしておくと、DOMに対応しているブラウザではセルの内容を直接書き換え、DOMに対応していないブラウザではinputを書き出して、そこに内容を書き出します。

参考になれば幸いです。

お礼

lead1976さん、ご解答ありがとうございました。

分かりやすい説明の上、ＤＯＭ未対応のブラウザ対策までコードつき解説していただき、大変助かりました。m(__)m

それにもかかわらず、ドジな私はケアレスミスで動作させるのに手間取り、お礼が送れました。
申し訳ありません。

でも、なんとか思い通りに動くようになりました。
が、IE6.0上でしか確認していません。

他のブラウザもインストールして検証する予定ではありますが、ＤＯＭ非対応の古いブラウザをどうやって入手するかは、これからの課題です。

本当にありがとうございました。

回答No.4

nuruhho44

まだ閉じられていなかったので、追加情報記載しておきます。
参考ＵＲＬのページをご覧ください。とても役立つデータが紹介されてます。
また、ここのブラウザ利用率情報のページの下のほうに、過去のデータが記載されたページへのリンクがあり、そこからネットスケープの旧バージョンがダウンロードできるＵＲＬが記載されていますので、ご利用ください。
ちなみに、私はＮＮ４．８（英語版）をダウンロードして自分のホームページを見たところ、背筋が寒くなり、見なかったことにしてＮＮ４．８は証拠隠滅しました。

参考URL：

http://www.zerotown.com/webdata/index.html

お礼

貴重な情報ありがとうございます。
こんな、ページもあるんですね。

実は書きこみをしてから、検索エンジンで検索するとNN4.xはまだダウンロードできるみたいですね。
よく、調べずにあんな書き方をしてしまって・・・

もちろん、ご紹介いただいたページも利用させていただきます。

ありがとうございました。

回答No.2

nuruhho44

ひょっとして私のことでしょうか？あれはＤＯＭという手法です。私も最近勉強し始めたばかりです。

子ウインドウから親ウインドウへの命令には、通常 window.opener を前に付けるようです。

window.opener.document.getElementById("AA").innerHTML =（渡したい内容）

という形になりますね。HTML文を渡せますので、<FONT>や<B>や<U>を入れて文字を飾ることもできますし、やったことないですが、たぶん<IMG>も渡せると思います。

これの問題点は、ＤＯＭを実装したブラウザでないと効果がないことです。ＩＥ４やＮＮ４ユーザーを切り捨てる覚悟で使ってください。

旧ブラウザにも対応したいのであれば、shige_70さんのおっしゃるような方法になります。同ページのlead1976さんの回答をご参考になさってください。

尚、私は以前この方法でやっておりましたが、ＮＮ７では文字表示がずれ、Ｏｐｅｒａ７では枠が消せませんでした。スタイルシートの解釈がいい加減なＮＮ４ではどうなるのか想像もつきませんが、こちらの方法をお使いの場合も、出来るだけ多くのブラウザで表示確認なさったほうがいいと思います。

お礼

nuruhho44さん、ご解答ありがとうございます。

> ひょっとして私のことでしょうか？
そうです。
hho44さんが以前書きこんでおられたのを見つけけました。

JavaScriptはほとんどコピーして利要する程度で、以前の書きこみから、親ウィンドウのタグを変更するコードに書き換えられませんでした。(^_^;)

ＤＯＭを実装したブラウザでないと動作しない点もまったく知りませんでしたので助かりました。

アドバイスをもとにいろいろ試してみます。

ありがとうございました。

回答No.1

shige_70

通常は、htmlの本文を書き換えることはできません。

どうしてもという場合の方法は、

1) cgi等を利用して、子ウィンドウから書き換えたい内容をサーバに送って、サーバ側で内容を書き換えたhtmlを生成して親ウィンドウに表示します。

2) 見た目に問題はありますが、書き換え対象箇所を<input>や<textarea>にすればJavaScriptで書き換え可能です。

補足

解答ありがとうございます。

確かにご解答いただいた方法でも可能だとは思うのですが、
http://oshiete1.goo.ne.jp/kotaeru.php3?q=727735
で、同じフォーム内でhtmlを部分的に書き換えることが可能だと知った為です。

この解答Ｎｏ．１の方で
onChange="document.getElementById('AA').innerHTML=document.Application.RATE.value;">
とセル内の値を書き換えています。

これを見ていると、子ウィンドウから該当セルを指定する方法がありそうだったので、質問させていただきました。

よろしくお願いいたします。