jQueryで特定のURLの時のみ表示

お世話になります。jQuery初心者です。
特定のURLの時のみ画像を表示にしたいのですが、うまくいかずに行き詰っています。
CSSで display: none; になっている部分を変えたいだけなのですがうまくいきません。
※Iframeは変えられません。外部の画像を読み込むので。

いろんな方のHPを見て試しましたがうまくいきません。
お力をお貸しください。よろしくお願いします。

【条件】
もしURLが http://example.com/ なら、displayをblockにして画像表示。
もしURLが 上記以外なら、そのままで画像は非表示。

【HTML】
<iframe src="画像URL" class="slide2019" scrolling="no" frameborder="no" style="width: 100%; height: 500px; display: none;"> </iframe>

【jQuery】
jQuery(window).bind("load", function(){

// 現在ページのURL取得
var url = window.location.href;

// 現在ページが http://example.com/ なら実行
if(url == 'http://example.com/ '){
jQuery('.slide2019').css('display','block');
}

});

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2019/09/17 17:57

特に問題となる箇所が見当たりません

気になる点として、このままではページURLが微妙に変化しただけで動作しなくなりますので、
判定条件をもうすこし緩和して、
URL のホスト名やパス部分のみで判定するなり、
正規表現で部分一致判定しては如何でしょうか。

例)
https://example.com/ ← ssl 化
http://example.com/?param=123 ← クエリ付き
http://example.com/#foobar ← フラグメント付き

参考)
https://developer.mozilla.org/ja/docs/Web/API/Lo …
window.location.host // ホスト名のみ
window.location.pathname // パス部分のみ

この回答へのお礼

ご回答ありがとうございます。

>>特に問題となる箇所が見当たりません
そうですか。Wordpressでできたサイトに書き込んでいるからでしょうか？
それか私のデバッグの仕方が悪いのか。。。ChromeのDeveloperモードで "console" に打ち込んでいるのですが変化が見られなくて。。。

お礼日時：2019/09/17 21:04

No.2 回答者： fujillin 回答日時： 2019/09/18 14:31

こんにちは

＞CSSで display: none; になっている部分を変えたいだけなのですがうまくいきません。
どのような環境でテストなさっているのでしょうか？

ほぼ実装環境でテストしているものと仮定して、ブラウザ側にjavascriptのエラーは発生しているでしょうか？
発生しているなら、そこから原因を辿ってゆくのが早そうに思います。
エラーが出ていない場合は、条件分岐で「表示処理」が行われていない可能性が大きいと思います。
単純な文字列比較ですが、実際の内容を把握するために、console.logやalertなどで変数urlの内容を確認してみるのがよさそうに思います。
想像するところ、本当の実装環境ではないので、取得のurlが比較対象と異なってしまっているなどというところがオチではないでしょうか？


ところで、この機能の実装ってよく意味がわかりません。
「非表示のままになる」ケースっていったいどのようなケースなんでしょうか？
運営者が意図的にそのようなページを作成することはもちろん可能ですが、ご提示のような制御をする必然性が見当たりません。
表示するページでははじめから表示に、表示しないページではiframe無しにしておけば済んでしまうことですので・・・
それ以外の要因で、表示/非表示が切り替わるようなことが思いつきません。
判断の対象が、Referer などであればまだわかりますが、ページ自身のURLなので・・・
それとも、ページ番号をURLクエリ部なので送ると、それに応じたページが表示されるといった動的なページなどでしょうか？
（その場合でも、サーバ側で制御してしまえば必要なさそうに思われます）

この回答へのお礼

ご回答ありがとうございます。実装解決いたしました。
細かくご回答いただいたようなのですが、私はサーバー側で制御等ができないので。。。

>>「非表示のままになる」ケースっていったいどのようなケースなんでしょうか？
これはWordpressでつくったサイトにスライダーを実装した際のものなんです。
Headerの中に入れ込んだため、ほかのページを開いても常にどこのページにもスライダーが表示されてしまう。という現象を解決するために使用しました。
「普通Headerに入れないよね？」というお考えもあるかと思いますが、構造上の関係でHeaderに入れざるを得なくなったのです。

お礼日時：2019/09/18 23:29