Q&A
> サブディレクトリ上に作られたテストサイトでは追加したJavaScriptで問題無く動いていますが、何故か本番用ディレクトリのみで正常に動かず
本番だけクロスドメインになっている、ということはありませんか？
JavaScript初心者です。
WordPressで作られたWEBサイト内に、Lity.js（https://sorgalla.com/lity/）というモーダル実装用のライブラリを用いて実装しているクリックするとiframeモーダルで開かれる動画があるのですが、iframe内の動画の状態に応じて、動的に要素を追加したり、削除したりするために追加したJavaScriptが本番環境のみで適用出来ない為困っております。
現行サイトはエックスサーバーのレンタルサーバー上で運用されており、サブディレクトリ上に作られたテストサイトでは追加したJavaScriptで問題無く動いていますが、何故か本番用ディレクトリのみで正常に動かず、
iframe内を動的に操作するJavaScriptを阻害する何らかの理由が本番環境のみにあるのか、原因がわかりません。
▼iframe箇所
<div class="lity-iframe-container" style="max-height: 937px;"> <iframe frameborder="0" allowfullscreen="" allow="autoplay; fullscreen" src="https://●●.co.jp/recruit/wp-content/themes/ttt/img/home/Company_introduction.mp4"> #document <html> <head> <meta name="viewport" content="width=device-width"> </head> <body> <video controls="" autoplay="" name="media"> <source src="https://●●.co.jp/recruit/wp-content/themes/ttt/img/home/Company_introduction.mp4" type="video/mp4"> </video> </body> </html> </iframe> </div>
▼追加したJavaScript
$(function () { $(document).on('lity:ready', function (event, instance) { //Lity.jsライブラリの動画を開いて準備出来たら実行 if (navigator.userAgent.match(/Android.+Mobile/)) { // Androidのみ除外 } else { //Android以外は実行 window.setTimeout(function () { var video_elem = $('.lity-iframe-container iframe').contents().find('video'); var iframe = $('.lity-iframe-container iframe').contents(); var img_dir = "https://" + window.location.hostname + "/recruit/wp-content/themes/ttt/img/common/"; $(video_elem)[0].play(); // mac＆iphoneで3秒後に再生ボタン表示 $(video_elem).on('pause', function () { //動画を停止した際に、再生ボタン画像を表示しcss付与 $(video_elem).after('<img class="pause-video" src=' + img_dir + 'video_arrow.png>'); $(video_elem).next('img').css({ 'position': 'absolute', 'display': 'block', 'width': '25.600vw', 'height': '19.200vw', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%,-50%)', 'z-index': '10000', 'cursor': 'pointer' }); }); $(video_elem).on('play', function () { //動画を再生した際に、再生ボタン、もう一度再生ボタンを削除 $(video_elem).next('.pause-video').remove(); $(video_elem).next('.ended-video').remove(); }); $(video_elem).on('ended', function () { //動画再生が終了した際に、もう一度再生ボタン画像を表示しcss付与 $(video_elem).next('.pause-video').remove(); $(video_elem).after('<img class="ended-video" src=' + img_dir + 'video_once.png>'); $(video_elem).next('img').css({ 'position': 'absolute', 'display': 'block', 'width': '25.600vw', 'height': '25.600vw', 'top': '50%', 'left': '50%', 'transform': 'translate(-50%,-50%)', 'z-index': '10000', 'cursor': 'pointer' }); }); $(iframe).on("click", ".pause-video", function () { //再生ボタンクリックで動画再生 $(this).prev('video')[0].play(); }); $(iframe).on("click", ".ended-video", function () { //もう一度再生ボタンクリックで動画再生 $(this).prev('video')[0].play(); }); $(iframe).on("mouseenter", '.pause-video', function(){ //再生ボタンホバーで透明化 $(this).css('opacity', '0.5'); }); $(iframe).on("mouseleave", '.pause-video', function(){ $(this).css('opacity', '1'); }); $(iframe).on("mouseenter", '.ended-video', function(){ //もう一度再生ボタンホバーで透明化 $(this).css('opacity', '0.5'); }); $(iframe).on("mouseleave", '.ended-video', function(){ $(this).css('opacity', '1'); }); }, 3000); } }); });
実現したいこと
追加したJavaScriptが本番環境でも動くようにしたい
発生している問題・エラーメッセージ
Uncaught TypeError: Cannot read properties of undefined (reading 'play') at common.js:83:43 （匿名） @ common.js:83 setTimeout（非同期） （匿名） @ common.js:77 dispatch @ jquery.min.js:2 y.handle @ jquery.min.js:2 trigger @ jquery.min.js:2 （匿名） @ jquery.min.js:2 each @ jquery.min.js:2 each @ jquery.min.js:2 trigger @ jquery.min.js:2 h @ lity.min.js:5 c @ jquery.min.js:2 add @ jquery.min.js:2 always @ jquery.min.js:2 x @ lity.min.js:5 y @ lity.min.js:5 dispatch @ jquery.min.js:2 y.handle @ jquery.min.js:2
上記、playを指定している要素が定義されていない、とあるのだと思いますが、テスト環境や、他のお名前.comサーバーやスターサーバーではエラー文が表示されず、本番のみに表示されます。
試したこと
他のレンタルサーバーで問題無く動くかサイトデータを移行し確認したところ、
お名前.comサーバーや、スターサーバーでは問題無く動いておりました。
補足情報
jQuery v3.6.1
WordPress 6.0.2
その他、関係あるかわかりませんが、テスト環境では問題のなかった部分で本番環境のみサーバー上に置いてあるフォントのwoffファイルが読み込まれないという問題もあったため、
htaccessにて下記のコードを記載し、フォントを表示することが出来ています。
htaccess
1<IfModule mod_headers.c> 2 Header set Access-Control-Allow-Origin "*" 3</IfModule> 4<FilesMatch ".(eot|ttf|otf|woff)"> 5 Header set Access-Control-Allow-Origin "*" 6</FilesMatch>
提供している情報が不足しているかもしれませんが、
お心当たりがある方がいらっしゃればご教授いただければ幸いです。
よろしくお願いいたします。
(1) CORS
初めに想起したのはmaisumakunさんと同じCORS問題です。
ただ、コンソールに出力されたエラーが「発生している問題・エラーメッセージ」ですべてなら別問題と思います。
その認識で合っていますか。
(2) TypeError
> Uncaught TypeError: Cannot read properties of undefined (reading 'play')
TypeErrorが発生しうる場所が3個所ありますが、どこでしょうか。
undefined になりうるのは $(video_elem)[0] もしくは $(this).prev('video')[0] ですが、出力されたDOMツリーでテスト環境と異なる部分(期待外のDOM)がありませんか。
まずはDOMツリーを確認すべきだと思います。
他のドメインを同一サーバー上でいくつか運用しているため
クロスドメインになっているということでしょうか？
すみません、クロスドメインになっているかの判断が付かず、、
テスト環境と本番環境では●●.co.jpという所は一緒なのですが、
本番環境ではwww.がURLの頭に付く形になっています。
▼本番環境のURLです。
https://www.●●.co.jp/ttt/recruit/
・WordPress設置場所
/home/xs●●●●/●●.co.jp/public_html/ttt/recruit
▼テスト環境のURLです。
https://●●.co.jp/ttt/test/recruit/
・WordPress設置場所
/home/xs●●●●/●●.co.jp/public_html/ttt/test/recruit
▼グループ会社サイトAのトップページ（今回変更中）
https://www.●●.co.jp/ttt/
▼グループ会社サイトBのトップページ
https://▼▼.com/
▼本体会社サイト
https://www.●●.co.jp/
今回変更しているドメインは、上記本体会社サイトと同一のドメインです。
もしクロスドメインになっている場合は、iframe内の操作は出来ないのでしょうか？
>think49様
ご回答いただきありがとうございます。
コンソールエラーで表示されているのは記載したものが全てです。
iframe内で出力されたDOMで本番とテストの差分を調べてみましたが、
URLにtestが付くか付かないかの差しかありませんでした。
しかしその他、ソースコード全体の差分を探すと下記の差がありました。
▼テスト環境のみに表示されているもの
<script type="text/javascript">
(function() {
var request, b = document.body, c = 'className', cs = 'customize-support', rcs = new RegExp('(^|\\s+)(no-)?'+cs+'(\\s+|$)');
request = true;
b[c] = b[c].replace( rcs, ' ' );
// The customizer requires postMessage and CORS (if the site is cross domain).
b[c] += ( window.postMessage && request ? ' ' : ' no-' ) + cs;
}());
</script>
▼本番環境のみに表示されているもの
<link rel='dns-prefetch' href='//●●.co.jp' />
Q1. 「<iframe>タグが書かれたhtmlファイル」と「iframeのリンク先」が同一ドメイン上にありますか。
Q2. <iframe src="https://●●.co.jp/recruit/wp-content/themes/ttt/img/home/Company_introduction.mp4">でmp4ファイルを読み込んでいますが、Company_introduction.mp4は動画ファイルですか。html文書ファイルですか。
var video_elem = $('.lity-iframe-container iframe').contents().find('video')とあるので、video要素があるhtml文書でないと整合性がとれません。
リンク先が動画ファイルなのであれば、video要素で直接読み込めばいい気がしますが…。
@rukimu さん
> しかしその他、ソースコード全体の差分を探すと下記の差がありました。
そのコードだけでは全てはわかりませんが、"CORS" や "cross domain" のコメントがあるので、関係ある可能性はあります。
think49様
>>Q1「<iframe>タグが書かれたhtmlファイル」と「iframeのリンク先」が同一ドメイン上にあります>>か。
A.はい、同一ドメイン上にあります。
>>Q2
>>content/themes/ttt/img/home/Company_introduction.mp4">でmp4ファイルを読み込んでいま>>すが、Company_introduction.mp4は動画ファイルですか。html文書ファイルですか。
A.Company_introduction.mp4はmp4形式の動画ファイルになります。
>>リンク先が動画ファイルなのであれば、video要素で直接読み込めばいい気がしますが
上記仰る通りでわざわざ同ドメイン内の動画をiframeでモーダル実装せずに、video要素で直接読み込めば解決出来るかと思います。。
外部のコーダー様が実装したものでテスト環境での見た目や挙動の確認がokが出ているものだったため、出来ればこのまま本番で表示出来れば良いなと考えておりましたが。。
iframeは諦めるしか無さそうでしょうか
> A.Company_introduction.mp4はmp4形式の動画ファイルになります。
であれば、それはhtml文書ではないのですから、
$('.lity-iframe-container iframe').contents().find('video');
のvideo要素ノードを検索する処理が必ず失敗するのではありませんか。
think49様
最終的にモーダル部分の構造を作り直し
iframeを用いない形にして解決しました。
色々とご教授いただきありがとうございました。
自己解決
