前提・実現したいこと
jQueryプラグインをiframe内に読み込ませてカスタムスクロールバー(http://manos.malihu.gr/jquery-custom-content-scroller/)を表示させようと思い、コードを書きました。ところがファイルパスはあっているはずなのにカスタムスクロールバーが表示されません。
コンソールを調べてみると下記のエラーメッセージが出ていてスクリプトが実行されていないためだとわかりました。親ページのcss,js(カスタムスクロールバーのプラグイン)は問題なくiframe内に書き込まれています。さらにChromeデベロッパーを見ていくと、Sourcesのiframeにcssファイルは記載があるのですがjsファイルは記載がありませんでした(つまり読み込まれていない?)。Networkを見ると、末尾にcss、jsともファイルが追加されています(読み込まれている?)。
なぜjsが実行されないのか全然分からないのでお助けいただければと思います。
発生している問題・エラーメッセージ
Uncaught TypeError: $(...).mCustomScrollbar is not a function
該当のソースコード
javascript
1var devW = 1279; 2if (winW <= devW) { 3 } else { 4 var iframe = $('#d-frame'); 5 iframe.on('load',function() { 6 iframe.contents().find('head').append('<link rel="stylesheet" href="/assets/css/jquery.mCustomScrollbar.min.css">').append('<style>body{height: 100vh; overflow: hidden;} .scroll-content{ height: auto; overflow: auto; }</style>'); 7 iframe.contents().find('body').append('<script src="/assets/js/jquery.mCustomScrollbar.min.js" charset="utf-8"></script>').append("<script>$('.scroll-content').mCustomScrollbar({mouseWheelPixels: 250,callbacks: false,});</script>").wrapInner('<div class="scroll-content mCustomScrollbar" data-mcs-theme="minimal"></div>'); 8 if (window.name != "any") { 9 iframe[0].contentDocument.location.reload(true); 10 window.name = "any"; 11 } else { 12 window.name = ""; 13 } 14 }) 15 }
html
1 <iframe frameborder="0" scrolling="yes" src="../index.html" id="d-frame"></iframe>
試したこと
js
1if (window.name != "any") { 2 iframe[0].contentDocument.location.reload(true); 3 window.name = "any"; 4} else { 5 window.name = ""; 6}
ページを再読み込みすればiframe内のスクリプトが実行されるかと思ったのですが再度同じエラーが出て、プラグインのjsは機能していませんでした。全然わからなくて積んでいるのでお助けくだされば幸いです。
補足情報(FW/ツールのバージョンなど)
Chrome最新バージョン、Safari 604.1
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/15 12:25