$(document).ready(function(){ setTimeout("location.reload()",1000*5); });
これだと全体をリロードしてしまうと思うのですが、irame部をのぞいた形で
オートリロードすることは可能でしょうか?
自分なりに考えてやったことは、<body>にidをつけて、idがmainのものをリロードさせようとしましたが、これだと無理な上、よく考えたらmainの中にiframeが含まれるため、意味がなかったです。
$('#main')[0].contentDocument.setTimeout("location.reload()",1000*5);
iframeだけ除外することはできないのか、
また他にいい方法はないでしょうか?
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
ベストアンサー
そもそもreloadを前提とした処理はおすすめできません
一部コンテンツが更新されるならその箇所だけajaxでデータをもらって
更新すればよいのではないでしょうか?
投稿2017/12/27 00:13
総合スコア114572
0
解決済みですが、Ajaxで置換はこんなかんじで書けます。参考になればと思います。
js
1/** 2 * Autoload constructor 3 * 4 * @param string renew リロードで書き換える場所を示す、セレクター文字列 5 * @param object settings Ajaxパラメーター 6 */ 7var Autoload = function(settings) 8{ 9 // 書き換えたい場所のセレクター 10 this.renew = '#container .main'; 11 this.settings = settings = settings === undefined ? {} : settings; 12 13 if (settings.url === undefined) { 14 this.settings.url = location.pathname; 15 } 16 if (settings.type === undefined) { 17 this.settings.type = 'GET'; 18 } 19 if (settings.cache === undefined) { 20 this.settings.cache = false; 21 } 22 if (settings.dataType === undefined) { 23 this.settings.dataType = 'html'; 24 } 25 if (settings.timeout === undefined) { 26 this.settings.timeout = 60000; 27 } 28}; 29 30/** 31 * Autoload constructor 32 * 33 * @param void 34 * @return object jqXHR $.ajax()の戻り値 35 */ 36Autoload.prototype.reload = function() 37{ 38 var me = this; 39 40 return $.when($.ajax(me.settings)) 41 .fail(function(xhr, status) { 42 //alert('通信に失敗しました!'); 43 console.log('通信失敗!', xhr, status); 44 }) 45 // メインコンテンツ置換 46 .done(function (response) { 47 // body内を適当なID div#replace--mark--hereで囲む 48 response = response.replace(/<body.+?>/i, '<body><div id="replace--mark--here">').replace('</body>', '</div></body>') 49 50 var $new = $(response).filter('#replace--mark--here').find(me.renew); 51 var $old = $(me.renew); 52 53 if ($new.length > 0 && $old.length > 0) { 54 $old.replaceWith($new); 55 console.log('置換成功!', me.renew); 56 } 57 else { 58 console.log('置換失敗!', me.renew, $new, $old); 59 } 60 }); 61}; 62 63// インスタンス生成 64var autoload = new Autoload(); 65// 置換 66autoload.reload(); 67 68/* 69// クエリパラメータがある場合 70var autoload = new Autoload({ 71 data : {param1 : 'パラメータ1',,,} 72}); 73 74// 書き換える場所を一時的に変更する場合 75autoload.renew = '#app'; 76//*/ 77 78/* なにか追加したい場合は下記のように書けます 79autoload.reload() 80 .then(...) 81 .always(...) 82 .done(...); 83*/
投稿2017/12/27 12:56
総合スコア1652
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
ajaxで悩んでたところの救世主です!
ありがとうございます!
2017/12/28 05:47
置換の部分が一番必要だろうと思ったので。参考になったということでよかったです。
ページをAjaxで取得して「$(HTML文字列)」とすると「meta,meta,title,link,script,div#app,script」のようにパースされ、<body>直下のコンテンツだけに絞り込まないとならないので、replace() で新しい div#replace--mark--here でくくってやって filter() で絞り込んでから find() で検索できるようにしています。
その他にもいろいろやり方はあるのですが、他のプロジェクトや他のページでの移植性を考えると、なんかトリッキーですが一番汎用性が高いかなと思いました。。。
ソースコードには書いてありませんが、Iframeを除外する方法として「セレクターで除外する」か、replaceWith() する時に filter(iframe除外).relaceWith() のようにすると、置換コンテンツ内に <iframe> があっても除外できます。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。