• ベストアンサー

HTMLの内容をテキストエリアに表示する

いつもお世話になっています。タイトル通りなのですが a.htmlというファイルにたとえば 「あいうえお」 という日本語が記述されているとします(ブラウザで表示するとあいうえおが表示される） そして何かボタンをクリックするとb.htmlのサブウィンドウが表示され そのページにあるテキストエリアに「あいうえお」が表示され テキストエリア内の文字列を編集しボタンをクリックすると a.htmlの内容が一時的でも更新されるようにしたいと思っています。 このような動作をjavascriptのみで行うことは可能でしょうか？ 感覚的には掲示板で書き込んだ内容を修正するときのようなものです。 ｊｓｐで似たような動作をするものを作成しましたが サーバーを介さずにそのような動作をさせたいと思っていますが 不可能でしょうか？ b.htmlで編集した内容がa.htmlに保存されなくてもかまいません。 そのときだけでも変化していればいいのです。 言葉が足らずわかりにくいと思うのですが 何卒よろしくお願いします。

質問者が選んだベストアンサー

  • ベストアンサー
  • foreach
  • ベストアンサー率51% (43/84)
回答No.2

結論を先に書きますがJavaScriptのみで実装出来ます。 まず、a.htmlの「あいうえお」が記載されている箇所をDIVタグ（idをつける）で囲みます。 b.htmlを開いた際に、呼び出し元（親）のDIVタグ内のHTMLを参照します。 具体的に書くとb.html側で parent.document.getElementById('*id名*').innerHTML と書いてあげれば、a.htmlのDIV内を参照することが可能です。 b.htmlのonload等でb側のテキストエリアに代入してあげれば理想通りになるかと。 b.htmlで編集した内容をa.htmlに戻す方法も手順を逆にするだけです。 b.htmlの更新ボタンをクリックされたら閉じる前にa.htmlのDIV内を変更してあげればOKでしょう。

noahlife
質問者

お礼

的確な情報ありがとうございます！実現できました。 javascriptもほんとなかなか奥深いですね・・・。 ありがとうございました。

その他の回答 (1)

  • mqm
  • ベストアンサー率44% (97/219)
回答No.1

http://zerobase.jp/blog/entry-275.html などはいかがでしょうか

noahlife
質問者

お礼

すごいですねこのページ。 参考にさせていただきました＾＾ ありがとうございます＾＾

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • テキストエリアにあわせた文字サイズ変更

    Ｊａｖａｓｃｒｉｐｔ自体うまく動かすことができず、 サンプルを探しても見つからず、困っております。 やりたいことは、 Aのテキストエリアに入力した文字を「OK」ボタンクリックと同時に Bという別のテキストエリア（エリアの枠は固定）にリサイズ表示させたいと思います。 テキストエリア自体を文字数により大きくするサンプルはありましたが その逆のテキストエリアのサイズに文字をあわせるものが見つかりません。 申し訳ありませんが、おしえていただけますでしょうか。

  • テキストエリアでの処理に関して

    あるテキストエリアの中で、OnDbclickイベントでダブルクリック した場合にサブウィンドウを開き、サブウィンドウの中であるＤＢから 情報を取得し、親ウィンドウの隣のテキストエリアに値を表示するような事をしていますが、ダブルクリック以外でもそのテキストエリアに入力があったらＤＢを検索するような仕組みを考えています。 基本的には文字数制限をし、６文字入力された時点でＤＢへ検索しに 行くような形にしたいと考えています。 そもそも同じテキストエリアでダブルクリックはサブウィンドウ、 入力後は他の処理というような事が可能なのでしょうか。。。 どういった記述をすれば良いか教えて下さい。 よろしくお願いします。

  • テキストエリアの内容を印刷できるようにしたい

    宜しくお願いします。 JAVAスクリプトで作った見積もりのページがあります。 該当部分の個数を選択して、下に総計を表示させるのですが 『選択内容を表示』というボタンを押すと 更にその下にあるテキストエリアに選択した内容と総計が 表示されるようにしています。 そこで、質問なのですが、 そのテキストエリアの下に『上記内容を印刷』という ボタンをつけて、テキストエリア内の部分だけを 印刷できるようにしたいのですが、可能でしょうか？ お分かりになる方がいましたら、教えてください。

    • ベストアンサー
    • HTML
  • テキストエリアの文字を切り替える

    意味が通じにくいかもしれませんが、１つのボタンを押すことでフォーム内テキストエリアの中身をどんどん切り替えていくって言うのはどうすればいいでしょうか？ ┌―――――― ｜[内容] ｜ └―――――― 　【ボタン】 例えばまず最初にボタンを押したら[内容]が[文章A]に、またボタンを押したら[文章B]、さらにボタンを押したら・・・といった具合に１回ボタンを押すごとにテキストエリアの中身をどんどん切り替えて行きたいのですが・・・。 私の力では検索などを使用してもやり方を見つけることが出来ません。どうかよろしくお願い致します。

  • DOMによる、テキストエリアの内容の書き換え

    以下コードを記述し、test.htmlで保存しました。 「ボタンがクリックされたとき、テキストエリアボックスの内容が書き換わる」 と言うことを想定し、作成してみました。 ところが、ボタンをクリックしても、テキストエリアが書き換わりません。 elm[0].Valueでは、駄目なのでしょうか。 ボタンをクリックしたとき、関数までは動いていることは確認できたのですが。 (alertで確認済み) ご教授お願いします。 ==========以下内容====== <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>テキストエリア書き直し</title> </head> <body> <h1>テスト</h1> <p>テキストエリアの書き換え</p> <script type="text/javascript"> <!-- function syutoku(){ var elm=document.getElementsByName('textarea1'); elm[0].Value="書き直し"; //alert(elm[0]); } --> </script> <hr> <p>テキストエリアを書き直します。</p> <form name="form1"> <p><input type="button" value="ボタン" onClick="syutoku()"></p> <p><textarea cols="40" rows="4" name="textarea1"> テキスト書き直しエリア</textarea></p> </form> <hr> </body> </html>

  • HTMLでのテキストエリアで入力した文字を。。。

    JSP/サーブレットの勉強をしていますがわからなくなったので質問お願いします。 HTMLのフォームのテキストエリアで記入した文字を改行の状態もそのままにしてjspで表示したいのですがどうすればできますでしょうか？

  • テキストエリアにHTMLデータを入れて表示

    テキストエリアにHTML入力して、submitをクリックしたら、入力されたデータをHTMLとして表示するということをしたいだけなのですが、うまくいきません。 例えば、 『<a href="http://www.yahoo.co.jp">yahoo</a>』 と入力すると、 一応リンクにはなっているのですが、ダブルクオーテーション（”）がエスケープ（？）されて、「￥」がついてしまうためかリンクが変になってしまいます。 これをこのまま表示させるにはどうしたらいいのでしょうか？ 初心者質問で申し訳ありません。 よろしくおねがいします。

    • ベストアンサー
    • PHP
  • 【FireFox】サブウィンドウ表示とテキストボックス値

    メインのウィンドウにテキストボックスとボタンがあり、 ボタンをクリックするとjavascriptによりサブウィンドウ が開くHTMLがあります。 しかし、FireFoxに限り、ボタンを押してサブウィンドウ を開くとメインのHTMLのテキストボックスに入力していた 値が消えてしまいます。 ================ main.html ===================== <html> <head> <script Language="JavaScript"><!-- function openSubWin(){ window.open("sub.html","window","width=300,height=300"); } // --></script> </head> <body> <form action="#" name="myform"> <input type="text" name="no"> <button id="button1" onclick="openSubWin();" >サブウィンドウ</button> </form> </body> </html> ================== サブウィンドウ ================ <html> <body> サブウィンドウ </body> </html> IEでは問題ありませんでした。 何か解決方法はありますでしょうか？ 宜しくお願いします。

    • ベストアンサー
    • HTML
  • テキストエリアで読み込んだら<br>が表示されてしまう

    現在、登録フォームを作っているんですけども(mdbで保存してます) その登録フォームの中には「登録」、「編集」の独立したプログラムを作りました。 登録した内容を「編集」で更新したりしてるんですけれども、「登録」で記入した内容に<br>が含まれている と、編集フォームのテキストエリアの中にそのまま<br>が表示されてしまいます。 (mdbから読み込んでるので当たり前なのですが・・) 「登録」のページには下記の記述のように、<br>に変換するようにして、mdbに保存させているんですが 「編集」ではこの<br>を表示させたくないんです。そこをどう記述したらいいのかわかりません。<br>を表示させないようにして、手動で改行できるようにしたいのですがどうしたらいいのでしょうか・・・。 hp_comment = Replace(hp_com,Chr(13) & Chr(10),"<br>")& vbCrLf ASPの掲示板で質問されていた内容なんですが回答もなく気になったので質問させていただきます。 どなたかご指導よろしくお願いいたします。

  • プルダウンでテキストエリア表示Javascript

    JavaScriptをはじめて扱う初心者です。 このサンプルのテキストエリア（複数行）をプルダウンで内容を変更できるようにしたいと思っています http://www3.plala.or.jp/moananja/iroiro/Material/Calculator/Calc3.html プルダウンで項目Ａを選択すると 　AAA 　AAA 　AAA 項目Ｂを選択すると 　BBB 　BBB とテキストエリアに代入されるような機能を付けたいのですが、どのように書いたらよいでしょうか？ ネットで検索して、テキストエリアに代入する方法は下記で見つけたのですが、上のサンプルスクリプトと繋げ方が分かりませんでした ご教授よろしくお願いいたします http://q.hatena.ne.jp/1190481115

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する