質問: 現在、Gadgets APIを利用したWebアプリケーションを作成しています。 gadgets.io.makeRequest()を利用して取得したHTMLコンテンツをベースとなるにjQuery:html()を利用して 読み込む形をとっています。 (リンク押下時にはベース側は更新されない動作となり、の中身を変えることで画面遷移を実現しています。) 現在実装中の仕組みを簡易にした以下の例では、読み込みボタン押下でhttp://xyz.net/content_get_api/から 取得したHTMLコンテンツをに表示する処理となります。 ``` 【ベースとなるページ(http://abc.net/)】 読み込みボタン ``` ``` 【取得するHTMLコンテンツ(http://xyz.net/content_get_api/)】 HOGEHOGE ``` この場合、HTMLコンテンツの$(document).ready()は呼ばれない動作となります。 (そもそもベース側表示の時点で呼ばれており、その後ベース側の更新は走らないため、これが正常動作と考えています。) そこで質問ですが、main_boxにコンテンツ設定後に$(document).ready()を強制的に呼ぶ方法はありませんでしょうか? $(document).ready()を使わず、関数定義し直して呼び出す方法が一番正攻法であるとは思うのですが、 コンテンツ数等の都合上、現実的ではない作業量となってしまうためこのような手法を探しています。
回答: 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(""); iframeObj.attr("srcdoc", res.data); $j("#main_box").append(iframeObj); }, null); } ``` srcdocは対応していないブラウザもあるので注意が必要です。