質問するログイン新規登録

回答編集履歴

2

chousei

2019/05/31 06:27

投稿

yambejp
yambejp

スコア118110

answer CHANGED
@@ -34,4 +34,20 @@
34
34
  <input type="button" id="google" value="google">
35
35
  <input type="button" id="reload" value="reload">
36
36
  <span id="anime"></span>
37
+ ```
38
+
39
+ # performance.navigation.typeの利用
40
+ performance.navigation.typeの振り分けを考えました
41
+ ```javascript
42
+ <script>
43
+ var flg=window.performance.navigation.type;
44
+ window.addEventListener('pageshow', function(e){
45
+ list=["first","reload","back"];
46
+ console.log(list[flg]);
47
+ flg=2;
48
+ });
49
+ </script>
50
+ <a href="https://www.google.com">google</a>
51
+ <a href="#">hash</a>
52
+ <input type="button" value="reload" onclick="location.reload()">
37
53
  ```

1

chousei

2019/05/31 06:27

投稿

yambejp
yambejp

スコア118110

answer CHANGED
@@ -2,4 +2,36 @@
2
2
 
3
3
  例えばクッキーを利用してbeforeunload時にフラグをたてておき
4
4
  10秒程度値を保持、pageshowでフラグがあればページバックとみなす
5
- など適当なロジックを組むとよいでしょう
5
+ など適当なロジックを組むとよいでしょう
6
+
7
+ # sample
8
+ リロードや、5秒以内に返ってきた場合アニメしない
9
+ ```javascript
10
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
11
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
12
+ <script>
13
+ $(function(){
14
+ $('#reload').on('click',function(){
15
+ location.reload();
16
+ });
17
+ $('#google').on('click',function(){
18
+ location.href="https://www.google.com";
19
+ });
20
+ });
21
+ $(window).on('pageshow',function(){
22
+ var anime=$.cookie('anime');
23
+ console.log(anime);
24
+ if(typeof anime=="undefined"){
25
+ $('#anime').text('anime...').delay(2000).queue(function(){
26
+ $(this).text("").dequeue();
27
+ });
28
+ };
29
+ });
30
+ $(window).on('beforeunload',function(){
31
+ $.cookie('anime',1,{expires:1/24/60/60*5});
32
+ });
33
+ </script>
34
+ <input type="button" id="google" value="google">
35
+ <input type="button" id="reload" value="reload">
36
+ <span id="anime"></span>
37
+ ```