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

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

ただいまの
回答率

89.21%

スクロールが一番下に来るたびに発火するjavascript

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 1,542

tajix_japan

score 83

下記【index.html】はスマホにあります。
仕様としては、読み込みと同時にサーバ側のhttp://example.com/next0001.phpを自動で呼び出します。
(document.getElementById('test').click(); にてfunction loadText0001()を呼び出す)

やりたい事
このページをスクロールすると自動的にサーバ側の next0002.php  next0003.php  next0004.php と連続して取得していきたいというのが趣旨です。

そこで改良型【index.html】を作りました。

【期待したこと】
スクロールが一番下にいくと、$(window).scroll(function() で規定したswitchが起動し、次のページを表示させ続けるはずです。

【結果】
スクロールが最初に一番下に行ったとき無事に
switch (hoge){
case 1:
document.getElementById('test0002').click();
break;
が発火し、http://example.com/next0002.php を読み込みました。

しかしながら、そのままスクロールしてnext0002.phpの表示部分の最下部に来ても次の
switch (hoge){
case 2:
document.getElementById('test0003').click();
break;
が発火せず、http://example.com/next0003.php を読み込むことができません。

$(window).scroll(function() { は最初の発火で仕事を辞めたようです。

break; の部分を削ってみましてが状況は変わりません。

これをnext0003.php next0004.php とスクロールの度に発火させるにはどうすればいいでしょうか?

よろしくお願いいたします。

スマホ側

【index.html】

<html>
<script src="jquery.min.js"></script>
<script src="jquery.xdomainajax.js"></script>
<script type="text/javascript">
<!--
var xmlHttp0001;
function loadText0001(){
  xmlHttp0001 = new XMLHttpRequest();
  xmlHttp0001.onreadystatechange = checkStatus0001;
  xmlHttp0001.open("GET", "http://example.com/next0001.php", true);
  xmlHttp0001.send(null);
}
function checkStatus0001(){
  if (xmlHttp0001.readyState == 4 && xmlHttp0001.status == 200){
 var data0001 = xmlHttp0001.responseText;
document.getElementById("id_0001").innerHTML = data0001; 
  }
}
// -->
</script>
<form>
<input id="test0001" type="hidden" onClick="loadText0001()">
</form>
<script>
document.getElementById('test0001').click();
</script>
<div id="id_0001"></div>
</html>

改良型【index.html】

<html>
<script src="jquery.min.js"></script>
<script src="jquery.xdomainajax.js"></script>

<script type="text/javascript">

<!--
var xmlHttp0001;
function loadText0001(){
  xmlHttp0001 = new XMLHttpRequest();
  xmlHttp0001.onreadystatechange = checkStatus0001;
  xmlHttp0001.open("GET", "http://example.com/next0001.php", true);
  xmlHttp0001.send(null);
}
function checkStatus0001(){
  if (xmlHttp0001.readyState == 4 && xmlHttp0001.status == 200){
 var data0001 = xmlHttp0001.responseText;
document.getElementById("id_0001").innerHTML = data0001; 
  }
}
// -->


<!--
var xmlHttp0002;
function loadText0002(){
  xmlHttp0002 = new XMLHttpRequest();
  xmlHttp0002.onreadystatechange = checkStatus0002;
  xmlHttp0002.open("GET", "http://example.com/next0002.php", true);
  xmlHttp0002.send(null);
}
function checkStatus0002(){
  if (xmlHttp0002.readyState == 4 && xmlHttp0002.status == 200){
 var data0002 = xmlHttp0002.responseText; 
document.getElementById("id_0002").innerHTML = data0002; 
  }
}
// -->


<!--
var xmlHttp0003;
function loadText0003(){
  xmlHttp0003 = new XMLHttpRequest();
  xmlHttp0003.onreadystatechange = checkStatus0003;
  xmlHttp0003.open("GET", "http://example.com/next0002.php", true);
  xmlHttp0003.send(null);
}
function checkStatus0003(){
  if (xmlHttp0003.readyState == 4 && xmlHttp0003.status == 200){
 var data0003 = xmlHttp0003.responseText;                       // E
document.getElementById("id_0003").innerHTML = data0003; 
  }
}
// -->



</script>
<form>
<input id="test0001" type="hidden" onClick="loadText0001()">
</form>
<script>
document.getElementById('test0001').click();
</script>

<div id="id_0001"></div>
<div id="id_0002"></div>
<div id="id_0003"></div>




<script>
$(window).scroll(function() {
     var current = $(window).scrollTop() + window.innerHeight;
     if (current < $(document).height() - 50) return; // 最下部でなければ抜ける
     if ($(this).data('loading')) return; // ロード中は抜ける
     $(this).data('loading', true); // ロード中にする
     // ----- 実行処理 -----
        var hoge = Sample3_form.X.value; 
        hoge = parseInt(hoge); 
switch (hoge){
case 1:
document.getElementById('test0002').click();
    break;
case 2:
document.getElementById('test0003').click();
    break;
case 3:
document.getElementById('test0004').click();
    break;
}
});
</script>
</html>

サーバー側

【example.com/next0001.php】

<html>

内容0001

<center>
<form name="Sample3_form">
<input name="X" id="test0002" type="button" value="1" onClick="loadText0002()">
</form>
</center>

【example.com/next0002.php】

<html>

内容0002

<center>
<form name="Sample3_form">
<input name="X" id="test0003" type="button" value="2" onClick="loadText0003()">
</form>
</center>

【example.com/next0003.php】

<html>

内容0003

<center>
<form name="Sample3_form">
<input name="X" id="test0004" type="button" value="3" onClick="loadText0004()">
</form>
</center>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

0

'loading' が true になった後ロードが完了しても false にならないからでは?

$(this).data('loading', true);

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/14 17:06

    有難うございます。
    下記のようにしてみましたがやはり3ページ目の読み込みをすることができませんでした。他にお気づきのことが御座いましたら教えてください。よろしくお願いいたします。


    <script>
    $(window).scroll(function() {
    var current = $(window).scrollTop() + window.innerHeight;
    if (current < $(document).height() - 50) return; // 最下部でなければ抜ける
    if ($(this).data('loading')) return; // ロード中は抜ける
    $(this).data('loading', true); // ロード中にする
    // ----- 実行処理 -----
    var hoge = Sample3_form.X.value;
    hoge = parseInt(hoge);
    switch (hoge){
    case 1:
    document.getElementById('test0002').click();
    break;
    case 2:
    document.getElementById('test0003').click();
    break;
    case 3:
    document.getElementById('test0004').click();
    break;
    }
    $(this).data('loading', false); // 処理が終わったらフラグをたおす
    });
    </script>

    キャンセル

  • 2017/01/14 17:12

    Sample3_form.X.value; の取得する値が毎回一緒になるとか。(複数同名のnameがあれば、先頭が返されるような気が)

    キャンセル

  • 2017/01/15 22:14

    有難うございます。
    いろいろやってみましたが動きません。
    とりあえず簡単なページ遷移で行こうと思っています。
    ご指導有難うございました。

    キャンセル

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

  • ただいまの回答率 89.21%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる