質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2788閲覧

window.matchMediaの条件分岐で、一度だけページをリロードさせたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2017/01/10 23:06

編集2017/01/11 18:33

解決させたいことは、window.matchMediaの条件分岐で、else ifやelseの時に、ページを一度リロードさせたいです。
単純に、 location.reload();だけいれると、無限ループします。

ソースコードを修正しました。

if (window.matchMedia('screen and (max-width:767px)').matches) { $(function() { //faq ページ $('#faq-ttl-tab1-1').prependTo('#faq-cont-tab1-1'); $('#faq-ttl-tab1-2').prependTo('#faq-cont-tab1-2'); $('#faq-ttl-tab1-3').prependTo('#faq-cont-tab1-3'); $('#faq-ttl-tab2-1').prependTo('#faq-cont-tab2-1'); $('#faq-ttl-tab2-2').prependTo('#faq-cont-tab2-2'); $('#faq-ttl-tab2-3').prependTo('#faq-cont-tab2-3'); $('#faq-ttl-tab2-4').prependTo('#faq-cont-tab2-4'); $('#faq-ttl-tab2-5').prependTo('#faq-cont-tab2-5'); $('#faq-ttl-tab2-6').prependTo('#faq-cont-tab2-6'); $('#faq-ttl-tab2-7').prependTo('#faq-cont-tab2-7'); $('#faq-ttl-tab2-8').prependTo('#faq-cont-tab2-8'); $('#faq-ttl-tab2-9').prependTo('#faq-cont-tab2-9'); $('#faq-ttl-tab2-10').prependTo('#faq-cont-tab2-10'); $('#faq-ttl-tab2-11').prependTo('#faq-cont-tab2-11'); $('#faq-ttl-tab2-12').prependTo('#faq-cont-tab2-12'); $('#faq-ttl-tab2-13').prependTo('#faq-cont-tab2-13'); $('#faq-ttl-tab2-14').prependTo('#faq-cont-tab2-14'); $('#faq-ttl-tab2-15').prependTo('#faq-cont-tab2-15'); $('#faq-ttl-tab2-16').prependTo('#faq-cont-tab2-16'); $('#faq-ttl-tab2-17').prependTo('#faq-cont-tab2-17'); $('#faq-ttl-tab2-18').prependTo('#faq-cont-tab2-18'); $('#faq-ttl-tab2-19').prependTo('#faq-cont-tab2-19'); $('#faq-ttl-tab2-20').prependTo('#faq-cont-tab2-20'); $('#faq-ttl-tab3-1').prependTo('#faq-cont-tab3-1'); $('#faq-ttl-tab3-2').prependTo('#faq-cont-tab3-2'); $('#faq-ttl-tab3-3').prependTo('#faq-cont-tab3-3'); $('#faq-ttl-tab3-4').prependTo('#faq-cont-tab3-4'); $('#faq-ttl-tab3-5').prependTo('#faq-cont-tab3-5'); $('#faq-ttl-tab3-6').prependTo('#faq-cont-tab3-6'); $('#faq-ttl-tab4-1').prependTo('#faq-cont-tab4-1'); $('#faq-ttl-tab4-2').prependTo('#faq-cont-tab4-2'); $('#faq-ttl-tab4-3').prependTo('#faq-cont-tab4-3'); $('#faq-ttl-tab4-4').prependTo('#faq-cont-tab4-4'); $('#faq-ttl-tab4-5').prependTo('#faq-cont-tab4-5'); //mamebus ページ $('#mamebus-ttl-tab1-1').prependTo('#mamebus-cont-tab1-1'); $('#mamebus-ttl-tab2-1').prependTo('#mamebus-cont-tab2-1'); $('#mamebus-ttl-tab3-1').prependTo('#mamebus-cont-tab3-1'); //mamexshop ページ $('#mamexshops-ttl-tab1-1').prependTo('#mamexshops-cont-tab1-1'); $('#mamexshops-ttl-tab2-1').prependTo('#mamexshops-cont-tab2-1'); $('#mamexshops-ttl-tab3-1').prependTo('#mamexshops-cont-tab3-1'); $('#mamexshops-ttl-tab4-1').prependTo('#mamexshops-cont-tab4-1'); $('#mamexshops-ttl-tab5-1').prependTo('#mamexshops-cont-tab5-1'); $('#mamexshops-ttl-tab6-1').prependTo('#mamexshops-cont-tab6-1'); $('#mamexshops-ttl-tab7-1').prependTo('#mamexshops-cont-tab7-1'); $('#mamexshops-ttl-tab8-1').prependTo('#mamexshops-cont-tab8-1'); $('#mamexshops-ttl-tab9-1').prependTo('#mamexshops-cont-tab9-1'); }); $(window).on('load', function() { $('.tab-content-wrap .child').css({ display: 'none' }); $('.accordion-content-wrap .child').css({ display: 'none' }); $(".tab-content-wrap li").removeClass('hide'); }); } else if (window.matchMedia('screen and (min-width:768px)').matches) { // pc 親 $(window).on('load', function() { //クリックしたときのファンクションをまとめて指定 // .hide $('.tab-content-wrap > ul > li').not(':first').addClass('hide'); $('.tab-menu-wrap > li').click(function() { //.index()を使いクリックされたタブが何番目かを調べ、 //indexという変数に代入します。 var index = $('.tab-menu-wrap > li').index(this); //コンテンツを一度すべて非表示にし、 $('.tab-content > li').css('display', 'none'); //クリックされたタブと同じ順番のコンテンツを表示します。 $('.tab-content > li').eq(index).css('display', 'block'); //一度タブについているクラスselectを消し、 $('.tab-menu-wrap > li').removeClass('select'); //クリックされたタブのみにクラスselectをつけます。 $(this).addClass('select') }); }); } else { }
if (!navigator.userAgent.match(/(iPhone|Android|iPad)/)) { var i = 0; function checkWidth() { var windowsize = $(window).width(); if (windowsize > 768 && i==0){ i = 1; } else if (windowsize <= 768 && i==1) { location.reload(); i = 0; } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); }

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

リロードさせたい意図は何でしょうか?
リロードでなければ解決できないことなのでしょうか?
例えば、挿入箇所のDOMを消去したり、ロード時のHTMLの状態を特定の変数に保存しておき、
条件分岐のタイミングで現在の状態からまるごと置き換えてリセットすることも出来ます。

一応、正攻法でいくなら、「一度リロードしたこと」をリロード後の画面に保持すればいいので、
アドレスにパラメータを付与した状態で、再読込させることでしょうか。

再読込をしてない場合だけ、location.hrefの書き換えを行うようにします。

javascript

1var url = location.href; 2var isReload = url.indexOf('reload=true') > 0; 3 4// 再読込してない場合だけ下記の処理を行う 5if(!isReload) { 6 location.href = url + '?reload=true'; 7}

投稿2017/01/11 01:50

編集2017/01/11 02:04
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/01/11 18:31

リロードさせたい理由は、768px以下で、prependToされますが、768px以上になったときに、 prependToされる前のタグ内が空になるため、リロードさせて戻したいです。
退会済みユーザー

退会済みユーザー

2017/01/11 18:33

ソースコード上記に修正しました。
yamato_hikawa

2017/01/12 08:51

上記にも記載しましたが、それはリロード以外のアプローチでできそうですね。 もう少し方法を検討した方がいいのではないかと思います。
guest

0

リロードさせたい理由は、768px以下で、prependToされますが、768px以上になったときに、prependToされる前のタグ内が空になるため、リロードさせて戻したいです。

load, DOMContentLoaded イベントのタイミングで「768px以下」の処理を実行すればいいのではないでしょうか。
767px 判定処理後に window load, DOMContentLoaded イベントを定義していますが、これを逆にすれば期待通りに動作すると思います。

Re: s4d さん

投稿2017/01/12 09:14

think49

総合スコア18156

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問