「お昼の放送」の思い出

javascriptの動的読み込みについて教えてください

解決済

  • 質問者：kahata
  • 質問日時：
  • 回答数：3件

javascriptの動的読み込みについて教えてください

いつもお世話になります。
jqueryを勉強中のものです。

少しややこしいのですが、
以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。
menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？
よろしくご指導お願いします。

frame.html
-----------------------------------------------------------
<html>
<head>
<title>Dynamic Load Test</title>
</head>
<frameset name="frame" cols="180,*">
<frame name="menu" src="menu.html">
<frame name="MainPanel" src="main.html">
</frameset>
</html>
-----------------------------------------------------------

menu.html
-----------------------------------------------------------
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
function test(){
jQuery.get("./load.html",function(data){
alert(data);
$("#target_id",window.parent.MainPanel.document).html(data);
});
}
// --></script>
</head>
<body>
<button onClick="test();">試験</button>
</body>
</html>
-----------------------------------------------------------

main.html
-----------------------------------------------------------
<html>
<head>
</head>
<body>
<h1>main.html</h1>
</body>
<div id="target_id"></div>
</html>
-----------------------------------------------------------

load.html
-----------------------------------------------------------
<h1>load.html</h1>
<script type="text/javascript"><!--
function hello(){
alert("こんにちわ");
}
// --></script>
<button onClick="hello();">hello</button>
-----------------------------------------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： 0909union
  • 回答日時：

＞で<div id="target"></div>の部分だけにload.htmlを読み込めないかと考えたからです




ＤＯＭの仕様と言うべきか、ブラウザの仕様と言うべきか、hellow()は記憶域にロードされていないからです。つまり、グローバル変数になっていません。例えば、
<button onClick="alert('aaaa'); hello();">hello</button>
とすれば、アラートは実行されますが、hello()は記憶域にないため、不明なオブジェクトの実行となりエラーになっています。ステータスバーにエラーのアイコンが出ているかと思います。

ＨＴＭＬオブジェクト（ＤＯＭ）でもgetElementById()で取得できない状態となっています。

No1, 2の回答者のような操作が正しい解答かと思います。

もし行いたいのであれば、サーバーサイドスクリプトで行うようなaspxファイルにて達成できます。

No2の補足であるようなやり方は、結局、No2の回答者のやり方と一緒です。フレームのＴＯＰからのロードなのでスクリプトの変数が最初からロードされています。最初からmain.htmlに関数として宣言するやり方と一緒です。

逆に言えば、
<button onClick="ここにJavaScriptを全て書き込む">hello</button>

とすれば、実行可能ですが、そのオブジェクト単位の動作となります。
    • good
    • 0
    • 件
通報する
この回答へのお礼

詳しい解説を有難うございます。
大変勉強になり、理解が深まりました。
このようなことは本質的に無理で、Javascriptのオブジェクトは最初から配置しておくべきことがよくわかりました。

通報する
お礼日時：2010/03/17 19:51

No.2

  • 回答者： U-ta_m
  • 回答日時：

ご質問の趣旨とはズレた回答をしてしまったようで申し訳ないです。



ご参考になるかは分かりませんが、
私は親ファイルにスクリプトを記述し、
parent.xxx();
で呼び出しちゃいますね。

動的にロードしたい理由にもよりますが、
適切に引数を与えれば挙動は変えられますので。

この回答への補足

ご返事有難うございます。

> 動的にロードしたい理由にもよりますが、......
このようなことを思いついた理由は、普通はmenu.htmlに

<a href="load.html" target="MainPanel">load.html</a>

と書いてjavascriptも含んだhtmlファイル全体をmainにloadしますが、これだとmain全体が置き換わりますのでajaxで<div id="target"></div>の部分だけにload.htmlを読み込めないかと考えたからです。

少し姑息な方法ですが、menu.htmlを以下のようにするとhelloボタンが作動することが判りました。
menu.html
-----------------------------------------------------------
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
function test(){
var html ="<iframe frameborder=\"0\" width=\"100%\" src =\"load.html\"></iframe>";
//alert(html);
$("#target_id",window.parent.MainPanel.document).html(html);
}
// --></script>
</head>
<body>
<button onclick="test();return false;">試験</button>
</body>
</html>
-----------------------------------------------------------

それにしても、jQuery.getでmianにhello()を読み込んでいるのにこの関数にアクセスできない理由が今一理解できません。
webに詳しい方の解説を頂ければ幸いです。

補足日時：2010/03/17 16:35
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： U-ta_m
  • 回答日時：

load.htmlの



<script type="text/javascript"><!--
function hello(){
alert("こんにちわ");
}
// --></script>

を<head>と</head>の間に記述されては如何でしょうか。

この回答への補足

ありがとうございます。
早速試しましたがだめでした。

frameにせずに以下のような単一htmlでは同じload.htmlでうまくいくことを確認しています
よろしくお願いします。

---------------------------------------------------------------------
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript"><!--
function test(){
jQuery.get("./load.html",function(data){
alert(data);
$("#target_id").html(data);
});
}
// --></script>
</head>
<body>
<h1>main.html</h1>
</body>
<button onClick="test();">試験</button>
<div id="target_id"></div>
</html>
---------------------------------------------------------------------

補足日時：2010/03/16 22:14
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

お礼というより補足の補足ですが、ご回答の意味がload.htmlの<script>タグをmain.htmlの<head>に移すということであれば勿論うまくいきますが、これは<script>の静的ロードですので、今回の質問の趣旨はmenuよりmainに<script>を動的にロードしたいと言う意味です。
何かよい工夫はないでしょうか？
よろしくお願いします。

通報する
お礼日時：2010/03/17 05:17

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

おすすめ情報

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報