Q&A
ありがとうございます。
ベース側では2回発火になる点については諦めておりましたが、こちらの方法でHTMLコンテンツサイドでは期待動作になりました。
画面更新させずにJSを再実行する方法として応用が効きそうですね。
オリジナルイベント以外のイベント強制発火は裏口対応なイメージがあるのでノウハウとして覚えておきます。
現在、Gadgets APIを利用したWebアプリケーションを作成しています。
gadgets.io.makeRequest()を利用して取得したHTMLコンテンツをベースとなる<div>にjQuery:html()を利用して
読み込む形をとっています。
（リンク押下時にはベース側は更新されない動作となり、<div>の中身を変えることで画面遷移を実現しています。）
現在実装中の仕組みを簡易にした以下の例では、読み込みボタン押下でhttp://xyz.net/content_get_api/から
取得したHTMLコンテンツを<div>に表示する処理となります。
【ベースとなるページ(http://abc.net/)】 <html> <head> <script type="text/javascript"> function loadContents() { // コンテンツを取得してmain_boxに表示する。 var url = http://xyz.net/content_get_api/; gadgets.io.makeRequest(url, function(res) { $(#main_box).html(res.data); }, null); } </script> </head> <body> <div id="main_box" ></div> <div onclick="loadContents();">読み込みボタン</div> </body> </html>
【取得するHTMLコンテンツ(http://xyz.net/content_get_api/)】 <html> <head> <script type="text/javascript"> $(document).ready(function(){ alert("ready!!"); }); </script> </head> <body> <p>HOGEHOGE</p> </body> </html>
この場合、HTMLコンテンツの$(document).ready()は呼ばれない動作となります。
(そもそもベース側表示の時点で呼ばれており、その後ベース側の更新は走らないため、これが正常動作と考えています。)
そこで質問ですが、main_boxにコンテンツ設定後に$(document).ready()を強制的に呼ぶ方法はありませんでしょうか？
$(document).ready()を使わず、関数定義し直して呼び出す方法が一番正攻法であるとは思うのですが、
コンテンツ数等の都合上、現実的ではない作業量となってしまうためこのような手法を探しています。
回答3件
0
ベストアンサー
main_boxにHTMLコンテンツを入れる前にiFrameに入れてしまうのはどうでしょうか。
iFrameのsrcdoc属性にHTMLコンテンツをそのまま指定してやればいいかと思います。
iFrameを動的に作成 → iFrameのsrcdocにHTMLコンテンツを指定 → iFrameをmain_boxのエレメントとして追加
で$(document).ready({})や$(function() {})が実行されるようです。（少なくとも私の環境では動きました。）
function loadContents() { // コンテンツを取得してmain_boxに表示する。 var url = http://xyz.net/content_get_api/; gadgets.io.makeRequest(url, function(res) { var iframeObj = $j("<iframe />"); iframeObj.attr("srcdoc", res.data); $j("#main_box").append(iframeObj); }, null); }
srcdocは対応していないブラウザもあるので注意が必要です。
投稿2015/12/08 09:57
総合スコア17
0
jQuery#trigger で DOMContentLoaded を発火できますが、「通常の DOMContentLoaded 発火」「jQuery#trigger による DOMContentLoaded 発火」で合計2回発火する事になります。
その挙動を承知の上での希望でしょうか。
JavaScript
1jQuery(document).trigger('DOMContentLoaded');
gadgets.io.makeRequest(url, function(res) {
gadgets.io.makeRequest は非同期読み込みなので普通に考えれば、callback 関数内で handleDOMContentLoaded 関数を呼び出すのが妥当だと思います。
「jQuery#trigger を呼び出す」と「handleDOMContentLoaded 関数呼び出す」で手間は変わらないと思います。
Re: Clorさん
投稿2015/12/08 11:05
総合スコア18194
0
動きますよ？
試しにjQueryを導入したサイトでコンソールを立ち上げて下記を入力してみてください。
JavaScript
1$(document).ready(function(){alert("hoge");})
jQueryは既にロードイベントが終わっている状態で新しく差し込まれても、
よしなに動作するようやってくれる仕様です。
今回の問題は、Scriptタグの入った文字列をinnerHTMLを使ってゴリッと挿入しても動かないことです。
今回の要望を考えると解決は結構難しい問題ですね…
私はJavaScript関係のフレームワークをおすすめします。（ばっくぼーんとか）
他の回答者さんに期待します。
投稿2015/12/08 09:37
総合スコア21412
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/09 00:24