documentに対してJQueryのonでinviewを登録していますが動作しません。
inviewではなくclickを使用した場合は機能しているため、onの呼び出し方が間違っているわけではないはずです。
どう修正すればinviewが機能するかお教えいただけないでしょうか。
処理順序
・index.jsのinjectScriptで'jquery.min.js'、'jquery.inview.min.js'、'mnpElement.js'をhtml内にscriptとして書き込む
・mnpElement.jsから関数「inViewTest」を実行。関数内でreadystateがcompleteになるまで待機
・documentに対してクラス「inviewTest」のinviewを登録
・クラス「inviewTest」をページ下部に作成
コード
//mnpElement.js
var inViewTest=function() { if(document.readyState!="complete") { setTimeout(inViewTest, 100); return; } debugger; //クラス「inviewTest」のinviewを登録しているはず $(function(){ $(document).on('inview',".inviewTest", function(event, isInView) { debugger; console.log("call"); }); }); //クラス「inviewTest」をページ下部に作成 var testDiv=document.createElement("iframe"); testDiv.setAttribute("width","100"); testDiv.setAttribute("height","200"); testDiv.className="inviewTest"; document.body.appendChild(testDiv); } inViewTest();
//index.js
//html内にscriptとして渡されたjsを書き込みます。 //理由はページ内のグローバルオブジェクトにアクセスするためです。 //なおこの処理を行わずにinViewTestを呼び出した場合でも結果は同じです function injectScript(files, node) { var th = document.getElementsByTagName(node)[0]; if(th==null||th==undefined) { setTimeout(() => { injectScript(files,node); },10) ; return; } files.forEach(file => { var s = document.createElement('script'); s.setAttribute('type', 'text/javascript'); s.setAttribute('src', file); th.appendChild(s); }); } injectScript( [ chrome.extension.getURL('jquery.min.js'), chrome.extension.getURL('jquery.inview.min.js'), chrome.extension.getURL('mnpElement.js'), ], 'head');
参照
■jquery.inviewのgithub
https://github.com/protonet/jquery.inview
■jQuery INVIEW is not working with a class added by another function
https://stackoverflow.com/questions/45652952/jquery-inview-is-not-working-with-a-class-added-by-another-function
あなたの回答
tips
プレビュー