Q&A
> 外部からのアクセス時（初回アクセス時）
とあるので、外部からアクセスするたびに表示されることになるので
要件に合いません。
実現したいこと
現在WordPressを利用してウェブサイトの構築を行っております。
ローディング画面を実装したのですが、現状はページが更新されるたびに処理が発生しております。
そこで、外部からのアクセス時~~（初回アクセス時）~~のみローディング画面を発生させたいです。
古い記事ではあるのですが、下記記事を参考に
jQueryで「jquery.cookie.js」を使ってページの初回アクセスのみ処理を変える方法
を読み、jquery.cookie.jsを用いて、記事のサンプルをそのまま利用しても機能しない状態です。
また、私自身javascriptの知識がないに等しいため、紹介記事等を参考に組んでおります。
どなたか初回アクセス時のみ以下の処理を行うorローディング画面を発生させる方法をご教授いただけないでしょうか。
よろしくお願いいます。
該当のソースコード
<script type="text/javascript"> var time=new Date().getTime(); $(function() { var h = $(window).height(); $('#loader-bg ,#loader').height(h).css('display','block'); }); //全ての読み込みが完了したら実行 $(window).on('load',function () { var now = new Date().getTime(); if (now-time<=3000) { setTimeout('stopload()',5000-(now-time)); return; } else { stopload(); } }); //5秒たったら強制的にロード画面を非表示 $(function(){ setTimeout('stopload()',5000); }); function stopload(){ $('#loader-bg').delay(900).fadeOut(800); $('#loader').delay(600).fadeOut(300); } </script>
現在は上記コードでローディング画面の発生・終了までは処理できております。
よろしくお願いいたします。
---追記---
Jqueryのバージョンや、Cookie.jsを使用した際のコードを書いたほうがいいとのご指摘をいただいたので、
追記させていただきます。
【ブラウザ】
GOOGLE Chrome
（バージョン: 67.0.3396.99（Official Build） （64 ビット））
【jQuery】
jquery-3.3.1.min.js
参考サンプルを記述したもの
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.cookie.js"></script> <script type="text/javascript"> $(function(){ if($.cookie("access")){ $('#first').css({display:'none'}); } $(window).load(function(){ $.cookie("access",$('body').addClass('access')); }) }); </script>
以上よろしくお願いいたします。
---追記---
外部からのアクセス時（初回アクセス時）のみ
と書いてありますが、私の説明不足でした。
主にページ内の内部リンクを対象と考えております。
トップページに直接アクセスした際にはローディング画面を表示。
サブページ等からトップページにアクセスした際にはローディング画面を非表示
と考えております。
私の記載内容がまとまっておらず、ご迷惑おかけしましたことおお詫び申し上げます。
回答4件
0
おそらく提示コードは「ローディングを表示する」のみかと推察されます。
jquery.cookie.jsを用いて、記事のサンプルをそのまま利用しても機能しない状態です。
についてやってみたコードの提示もされた方がjquery.cookie.jsを使う場合のアドバイスももらえそうに思います。
あとできれば確認したブラウザですね。jQueryのバージョンも。
既に提示の記事では実現できているようですし、どこかが足りていないか、何か実装方法の違いがあるか だと思います。
他の案としては「localStorage」を使う案があります。
処理の流れ：
・ローカルストレージ「表示した」フラグがNULLかどうか確認
・NULLでなければ何もしない
NULLであればローディング表示し、ローディング「表示した」フラグに何かセット
コードサンプル(未検証)
前提：ローディング表示処理は別途、loading()という関数にまとめておくこと。
localstorage
js
1//localStorage.getItem("myCat"); 2$(function() { 3 if(localStorage.getItem("access") == null){ 4 loading(); 5 localStorage.setItem("access","on"); 6 } 7}); 8function loading(){ 9 //ローディング実行する処理 10} 11//ロード画面終了処理
Cookie.jsを使うときもほぼ同じです。
getItemのところを!$.cookie("access")に、setItemのところを$.cookie("access","on")にかえればできそうに思います。
投稿2018/07/09 02:41
編集2018/07/09 07:36総合スコア80875
0
ベストアンサー
僕の解釈ですが、
「外部サイト（検索とかブックマーク）からアクセスしたときはローディングを表示して、
サイト内リンクでトップページに戻ったりするときは表示しない」
ということであってますか？
JavaScriptには**遷移元の情報（referrer）**を取得することが出来るので、
自分のサイト以外からのアクセスの場合はローディングを入れるといいと思います！
JavaScript
1document.referrer; 2// Google検索からならhttps://www.google.co.jp/ 3// ブックマークやURL直打ちなら空
// 追記
あっていたようで良かったです！
あと、ドメイン名を特定するならdocument.referrerよりもwindow.location.hostnameのほうが良いですね。
例えば、自分のサイトのURLがhttp://www.example.com/だった場合...
JavaScript
1// 自分のサイトからのアクセスなら「www.example.com」 2const host = window.location.hostname; 3 4// 自分のサイトからのアクセスでなければ... 5if (host !== "www.example.com") { 6 // 続く処理 7 ... 8}
if文の中に処理を書けば、外部からアクセスした場合のみ処理を実行するようになります。
投稿2018/07/09 07:24
編集2018/07/09 08:01
総合スコア830
Yasha_Wedyue様
>「外部サイト（検索とかブックマーク）からアクセスしたときはローディングを表示して、 サイト内リンクでトップページに戻ったりするときは表示しない」
はい！こちらの認識で合っています！
【外部からのアクセス時（初回アクセス時）】というのは外からウェブサイトに着た時を対象としています。
私の書き方が悪かったようで、ご迷惑をおかけしました。
大変申し訳無いのですが、「document.referrer;」を利用した記述にカスタマイズを行いたく、参考になるウェブ記事などありますでしょうか。
私の方でも探しているのですが、いまいち理解できていない部分が多く迷走しております。
お手数ですがよろしくお願いいたします。
mts10806様
わかりにくい要件定義をしてしまい申し訳ありません。
同じ人が同じブラウザでもブラウザを閉じたりPC再起動したりしても、
外部からアクセスするたびにローディング表示されても良いということでしょうか？
最初の1度だけという意味かと思ったのですが。
mts10806様
はい、外部よりアクセスした際には表示することをイメージしております。
「外部よりアクセスした際には”必ず何度でも”ローディング表示」ということですよね。
ではcookie.jsやLocalStorageでは実装できなくもないですが容易ではないですね。
「対象のWebサイトから離脱した」というのを正確に取得した上で破棄する必要があります。
document.referrerとlocationからチェックするのが吉です。（ある程度パターンだしして対応する必要はありますが）
Yasha_Wedyue様
追記していただいた内容を下記でテストしてみたのですが、
機能しませんでした。
私が書いている【該当のソースコード】を落とし込む際にはまた複雑になってくるのでしょうか。
知識・技術不足でご迷惑おかけしております。
※「ドメイン.com」の部分は実装時は正規の表記にしています。
<script type="text/javascript">
// 自分のサイトからのアクセスなら「www.example.com」
const host = window.location.hostname;
// 自分のサイトからのアクセスでなければ...
if (host !== "ドメイン.com") {
// 続く処理
alert('テスト');
}
</script>
mts10806様
はい、何度でもローディングを表示させたいです。
トップ ⇢ サブ ⇢トップの場合は非表示にしたいです。
hostの中身をconsole.logなどで確認してみてもらえますか？
Yasha_Wedyue様
console.log('テスト');
で処理を走らせようとしたのですが、何も確認できないのが現状です。
なにか別のscriptが干渉している等でしょうか。
私の記述方法としてはお間違いないでしょうか？
お手数ですがご確認いただけると幸いです。
全く同じコードをローカルで試して、空の文字列が返って来ているのを確認していますよ。
何も返って来ていないということはそもそも記述した処理が走ってないということなので、
書く場所がおかしいのか他のスクリプトが干渉しているのか…それは分かりませんが
動く場所に記述するようにしてください。
0
このページを参考にしてmogemoge1203さんのような効果をねらいましたが、うまくいきませんでした。
解決済みのようですが、参考になればと思い投稿しました。
私は次のように実装しました。
当該HP
var pon = 1; const myURL = document.referrer; if ( myURL === 'http://jp.modelfes.com/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/mf/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/mf/access/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/mf/caution/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/mf/faq/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/mf/contact/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/know/about/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/know/event/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/know/terms/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/exhibition/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/exhibition/general/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/exhibition/invitation/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/dealer/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/dealer/company/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/dealer/hanken/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/enter/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/enter/player/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/press/') { pon = pon+1; } else if (myURL === 'http://jp.modelfes.com/press/day/') { pon = pon+1; }; if (pon === 1) { alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。'); console.log(myURL); }
初心者なので、これが精一杯でした。
投稿2018/09/18 04:12
総合スコア14
ceeport様
ご丁寧なご回答ありがとうございます。
全ページからのアクセス判断を行っているということでしょうか？
私自身初心者なためこちらも参考にさせていただきたいと思います。
ありがとうございます！
質問主さんの質問ではないのですが、回答させてください。
配列にURLを格納してArray.forEachで回してやればもうちょっとスマートにかけそうです。
const referrer = document.referrer;
const urlList = [
"jp.modelfes.com/",
"jp.modelfes.com/mf/",
...
];
urlList.forEach(function(url) {
if(url !== referrer) {
alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
console.log(referrer);
}
});
pon という変数を他の場所でも使うのであれば、
let pon = 1;
urlList.forEach(function(url) {
if(url === referrer) {
pon++;
}
});
if(pon === 1) {
alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
console.log(referrer);
}
こんな感じでどうでしょうか。
Yasha＿1wedyueさん
ありがとうございました。
>const referrer = document.referrer;
>const urlList = [
>"jp.modelfes.com/",
>"jp.modelfes.com/mf/",
>...
>];
>
>urlList.forEach(function(url) {
>if(url !== referrer) {
>alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
>console.log(referrer);
>}
>});
このスクリプトも、
>let pon = 1;
>urlList.forEach(function(url) {
>if(url === referrer) {
>pon++;
>}
>});
>
>if(pon === 1) {
>alert('ただいま日本語訳ページは一部工事中です。ご不便をおかけします。');
>console.log(referrer);
>}
このスクリプトもそれぞれ試しましたが、「NS_ERROR_XPC_SECURITY_MANAGER_VETO: 」というメッセージが出てうまくいきませんでした。
うまく動く形を教えていただけたらありがたかったです。
そのエラーは見たこと無いのですが、調べてみるとFirefoxの拡張機能に起因するエラーのようですね。
ちょっと解決方法わかりません…
0
全ページからのアクセス判断を行っているということでしょうか？
はい、そのとおりです。面倒ですが・・・
投稿2018/09/18 04:21
総合スコア14
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/09 06:21
2018/07/09 07:28