id:worldtravel
ポイントあり80pt回答受付終了
コンピュータウェブ制作

javascriptについて


先程こちらの質問をしたのですが
http://q.hatena.ne.jp/1277879479

ページ全体が入れ替わってしまいました。
一部だけが入れ替わるようにする方法を教えて下さい。

よろしくお願いします。

回答の条件
  • 1人2回まで
  • 登録：
  • 終了：2010/06/30 20:10:04
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答（3件）

id:Cherenkov No.1

回答回数1504ベストアンサー獲得回数493

ポイント35pt

ヒントが少ない、最低限のコードを示した方がいいです。

iframeの中に入れたいということでしょうか。

iframeのidがhogeだとして以下のようにすればいいと思います。

var iframe = document.getElementById("hoge");
var doc = iframe.contentWindow.document || iframe.contentDocument;

var script = document.createElement('script');
script.src = "http://example.com/foo.js";
doc.body.appendChild(script);
id:worldtravel

ありがといございます。

iframeを使うことで思い通りに動作しました。

これと同じ事を、iframeではなく、divなどにすると

ページ全体が変わってしまうのですが、これはしょうがないのでしょうか。

2010/06/30 17:36:45
id:ko8820 No.2

回答回数1221ベストアンサー獲得回数69

ポイント11pt

http://www.kantenna.com/pg/2008/06/jquery.php

DIV表示したいものをHTMLで埋め込んで非表示にしておいて

表示、非常時をコントロールすることによって

入れ替わってるように見せかけるとかじゃだめなんでしょうか？

これだとテキスト、画像にかかわれず部分的な入れ替えが可能です。

id:worldtravel

ありがとうございます。

フォームがあります。

アクセスしてきた人が色々と設定して「更新」ボタンを押すと

src属性にパラメータを付けて処理を渡し、結果を表示したいので

予め用意しておくことは出来ません。

2010/06/30 19:51:15
id:kebo987654 No.3

回答回数38ベストアンサー獲得回数10

ポイント34pt

単に外部ファイルの内容を動的にdiv要素に読み込みたいということだけなら

スクリプトファイルを読み込むことにこだわる必要はないかと思います。（意図が違ってたらごめんなさいm(_ _)m）

以下はdiv要素に.txtファイルを読み込むサンプルです。

※Ajaxを使うのでhtmlファイルと読み込み先ファイルの文字コードはUTF-8にしておくべきです。

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="content-script-type" content="text/javascript" />
	<meta http-equiv="content-style-type" content="text/css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
	<title>- test -</title>
</head>
<body>
	<div id="dest1">
		初期の内容
	</div>
	<input type="button" value="divにxxxx.txtをロード" onclick="$( '#dest1' ).load( 'xxxx.txt' )">
</body>
</html>
id:worldtravel

ありがとうございます。

私の説明がわかりにくくてご迷惑おかけします。

ブログパーツを例に考えるとパーツのタグが下記のようになっていて、

<script src="hoge.com?id=xxx"></script>

このid部分を動的に変更してその他具をページ内に表示したいのです。

最初からブログパーツから返される結果を表示したいのではなく

タグを入れ替えた結果ブログパーツから返される結果を表示したいと考えていました。

今更なのですが、他の方法で対処することに決めました。

皆さん、ありがとうございました。

2010/06/30 20:09:13

コメント（11件)

  • id:Cherenkov
    Cherenkov 2010/06/30 17:39:35
    ページ全体が変わってしまうのはjsの処理がそうなってるからだと思います。
    jsファイルを見ないとなんともいえません。
    もちろんdivだけ対象にすることもできるでしょう。
  • id:worldtravel
    worldtravel 2010/06/30 19:23:50
    ありがとうございます。
    色々とテストをしていて気付いたのですが、
    色々とやってもFireFoxでしか思い通りに動きませんでした。
    テストした内容は下記の通りです。

    問題があるようでしたら教えて下さい。
    よろしくお願いします。


    ▼test.html

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/Javascript">
    function hoge(){
    var iframe = document.getElementById("test");
    var doc = iframe.contentWindow.document || iframe.contentDocument;
    var script = document.createElement('script');
    script.src = 'test.js';
    doc.body.appendChild(script);
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="hoge()">テスト</a><br />
    <iframe id="test" src=""></iframe>
    </body>
    </html>


    ▼test.js

    document.write("テスト");
  • id:Cherenkov
    Cherenkov 2010/06/30 19:35:28
    最初に戻って、本来何をしたいのか考えましょうか。
    本当にscriptのsrcを書き換えることによって、画像を変える必要があるのですか？
    この場合iframeは適切ではなさそうです。
    document.writeは古いやり方です。目的を整理しましょう。

    リンクをクリックした場合にdivにある画像を切り替えたいとか教えてもらえればサンプルを書きます。
  • id:Cherenkov
    Cherenkov 2010/06/30 19:47:17
    img～は例えでしたね。失礼しました。
    動的にscriptのsrcを変更するとはどのような状況でしょうか。
    ブログパーツのようなものですか？
  • id:worldtravel
    worldtravel 2010/06/30 19:48:43
    ありがとうございます。
    画像を切り替えたいわけではありません。

    imgタグのsrc属性はjavascriptで入れ替えると直ぐに画像が切り替わります。

    同じようにscriptのsrc属性を変えるだけで、
    画像を切り替えるように簡単にできないのかな。という質問です。

    test.js では「テスト」と表示させたいだけですが、
    本来は例えばクリックした時間によって表示内容を変えたりします。

    表示する内容もimgタグを含んだ数十のhtmlタグが含まれています。
    単に「テスト」のような単純な内容ではありません。

    リンクをクリックした際に、<script src="test.js"></script>
    によって表示されている内容をそっくり他の内容に入れ替えたいのです。

    理想としては iframe ではなく、 divを希望しています。


    例えば初期状態でこうなっているとします。
    時刻を表示していると仮定して下さい。
    <div><script src="date.js"></script></div>

    次にリンクをクリックすることにより
    date.js を calendar.js に切り替えると
    時刻が消えて、カレンダーを表示するようにしたいのです。

    よろしくお願いします。
  • id:worldtravel
    worldtravel 2010/06/30 19:49:40
    コメントを書いているときに、お返事を頂けていたようですので追記します。
    > ブログパーツのようなものですか？
    はい、ほぼそれに近いと言っても良い物です。
  • id:worldtravel
    worldtravel 2010/06/30 19:56:27
    すみません。
    フォームがあり、ユーザーが色々と設定した結果を反映させたいのです。
    <div><script src="date.js"></script></div>

    となっているところを

    <div><script src="calendar.js?year=2010&mon=12"></script></div>

    としています。（あくまでも例で､実際はもっと沢山のパラメータを付けています）

    calendar.js は実際にはphpで処理を行ってjsとして吐き出しています。
  • id:worldtravel
    worldtravel 2010/06/30 20:10:00
    他の方法で対処することにしました。
    皆様、お忙し所ありがとうございました。
  • id:Cherenkov
    Cherenkov 2010/06/30 20:14:52
    そうですか、
    「スクリプトファイルを読み込むことにこだわる必要はないかと思います」には同意した上ですでに役に立たないサンプルを書いたので乗せておきます。

    #index.html
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/Javascript">
    function loadScript(){
    var script = document.createElement('script');
    script.src = 'test.js';
    document.getElementById('date').parentNode.appendChild(script);
    }
    </script>
    </head>
    <body>
    <a href="#" onclick="loadScript()">click</a><br />
    <div><script id="date" src="date.js"></script></div>
    </body>
    </html>


    #date.js
    document.write(new Date);


    #test.js
    var date = document.getElementById('date');
    date.parentNode.innerHTML = '<span>test</span>';
  • id:kebo987654
    kebo987654 2010/06/30 20:17:36
    パラメータを付けなければいけなかったんですね。見落としていました。。。
    他の方法で対処するとのことですが、
    $( '#dest1' ).load( 'xxxx.txt', { param1 : "パラメータ" } );
    と書けば一応パラメータも渡せます。
    蛇足でしたすみませんorz
  • id:worldtravel
    worldtravel 2010/06/30 20:58:27
    ご丁寧にありがとうございました。

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ