【JavaScript】Intersection-Observer-Apiを使い、特定の要素が画面に入ったら「id」を取得

August 08, 2022

特定の要素が画面に表示されたら、その要素の id を取得し、POST で views.py に値を渡す方法について。

<div id="a" class="sample">Sample</div>
<div id="b" class="sample">Sample</div>
<div id="c" class="sample">Sample</div>
<div id="d" class="sample">Sample</div>
<div id="e" class="sample">Sample</div>

<form id="idSetForm" action="{% url '' %}" method="POST">
    {% csrf_token %}
</form>

window.addEventListener("load" , function (){
    let array = [];
    const options = {
        rootMargin: '-50px',
        threshold : 0.5        // 2022/08/09 threshold を追記しました。
    }
    const check = document.querySelectorAll('.sample');

    const observer = new IntersectionObserver(idCheck, options); // 2022/08/09 options を追記しました。
    check.forEach(check => {
        observer.observe(check);
    });

    function idCheck(entries){

        entries.forEach(entry => {
            if (entry.isIntersecting) {
                let attr = entry.target.getAttribute("id");
                array.push(id);
                observer.unobserve(document.getElementById(attr)); // 要素の監視を解除。

//                要素の監視を解除しない場合。               
//                if ( !array.includes(id) ) {
//                array.push(id);
//                }                
            };
        });
    };

    window.addEventListener('beforeunload', function(e) {
        submit(array);　//ページ遷移時に転送
    }, false);

});

function submit(array){

    let form_elem   = "#idSetForm"; //formを取得するか、javascript で作って転送。

    let data    = new FormData( $(form_elem).get(0) );
    let url     = $(form_elem).prop("action");
    let method  = $(form_elem).prop("method");
    data.set('id_list', JSON.stringify(array));

    for (let v of data.entries() ){ console.log(v); }

    $.ajax({
        url: url,
        type: method,
        data: data,
        processData: false,
        contentType: false,
        dataType: 'json'
    }).done( function(data, status, xhr ) {
        if (data.error){
            console.log("ERROR");
        }
        else{
            console.log("SUCCESS");
        }

    }).fail( function(xhr, status, error) {
        console.log(status + ":" + error );
    });

}

views.pyに届いた id_list は、 ‘id_list’: [’[“a”,“b”,“c”]’] のように id のリストが文字列になっているのでリストに変換。

import ast

class idCheckView(views.APIView):
    def post(self,request, *args,**kwargs):      
        id_list = ast.literal_eval(request.data["id_list"])
        for id in id_list:
            print(id)