以下のページの各教室へのリンクの部分がソースを見ても出てこないのは何故でしょうか?
http://www.kobetsu.co.jp/map/
また、Chromeの要素を検証で見ると当該部分のソースが見れるのですが、何故でしょうか?
別ファイルにJavaScriptで記載してるとかそういうことなのでしょうか?
色々なサイトを見ながらHTMLを独学中です。
初歩的な質問で恐縮ですが、ご教示のほど何卒宜しくお願い申し上げます。
No.3ベストアンサー
- 回答日時:
JavaScriptでこのような処理をするのは間違っていません
JavaScriptが絶対に動かない環境まで考慮するのなら
その前にFlashやCSS、ページ幅等を気にしないとおかしく現実的ではありません
それに最近では検索エンジンは大方のスクリプトを実行できるのでクロールもされます
それから、Chromeのコンソールで表示されるソースは「現在」のドキュメントソースです
どこを見ればJavaScriptで書き出していることがわかるかという問いですが、
そりゃあもう元ソースに無いものが現れているという時点で99.9%JavaScriptによるものでしょう
具体的にどうやれば辿っていけるのか私が実際にやった例を挙げると、
まずJavaScriptで書き出されていると思われる部分
今回だと「東京23区内」とか書かれている右の辺りを右クリックして要素を検証します
そうしてソースと比較するか、カンで、
<div id="index_13_0" class="loading"></div>
の中に新しく要素が作られていることがわかります
つまり"index_13_0"というidをターゲットにして埋め込んでいるのかなと推測できます
次にsourcesタブを開き、「Ctrl+Shift+F」を押して検索ウィンドウを開きます
「Ctrl+F」ではダメです、今見えている対象ではなく全ソースから検索する場合は必ずShiftも押してください
そうして「index_13_0」と入れ検索してみます
JavaScriptファイルにヒットして欲しいのですがhtmlしかヒットしません
もしかすると数値の部分は可変で
「"index_"+i」のような処理になっているのかと推測し、
次に「index_」と入れ検索してみます
またhtmlにしかヒットしません
ここで、他にスクリプトからターゲットにできて、各場所で共通な部分として、あとはClassがあることがわかります
そうして今度は「loading」で検索してみます
たくさん候補がでますが、自分のところのデータ管理スクリプトを他ドメインにおいておくことは考えにくいので、「kobetsu.co.jp」ドメインでスクリプトファイルのものだけに注目します
そうすると「map.php.js」というのが目に付くと思います
それを開くと2行めと6行目がヒットしています
jQueryプラグイン用の記述がされていて、
2行目は「loading」Classをもつ要素に「Loading...」と表示させ、
6行目で各要素に何かやっていることがわかります
そして6行目をクリックすると該当部分は
$(".loading").each(function(){
$(this).load("query/list.php?q="+$(this).attr("id"));
});
となっています
これはAjaxで、「query/list.php?q=(各要素のid)」から取得したデータを各要素に書き出す処理です
これで一応わかったわけですが、ついでにNetworkタブを開きます
そして「コンソールを出したまま」一旦ページを再読み込みさせます
次に「Ctrl+F」を押して検索ウィンドウを開きます
そして「list.php」と入れて検索します
そうするとヒットするので
「東京23区内」の内容だと思われる「list.php?q=index_13_0」をクリックします
そうしてResponseタブにすると期待していたデータが出てきます
大体こういった流れです、一番の味噌は「Ctrl+Shift+F」です
No.2
- 回答日時:
firefoxでしたら、見たい部分を選択して、コンテキストメニュー(右ボタン)で「選択した部分のソースを見る」で、
またFirebug ( https://addons.mozilla.jp/firefox/details/1843 )で、HTMLソースを見ると、それに適用されているスタイルシートも同時にわかるでしょう。--HTMLやCSSを適当に編集して変化も確認できます。javascriptもわかります。
・JSView( https://addons.mozilla.jp/firefox/details/2076 )
・Web Developer ( https://addons.mozilla.jp/firefox/details/60 )
・Html Validator ( https://addons.mozilla.jp/firefox/details/249 )
・Open With ( https://addons.mozilla.jp/firefox/details/11097 )
など、開発者向けツール ( https://addons.mozilla.jp/firefox/extensions/dev … )にあるものを使えば、サイトの構成を知ることができるでしょう。
javascriptでこのような重要なリンクを書き出すのはとてもまずいです。javascriptを停止、あるいは利用できないユーザーエージェントには理解できませんし、検索エンジンもクロールできません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- 政治 IAEAの処理水報告書の文言「この報告書はその方針を推奨するものでも承認するものでもない」 6 2023/08/24 22:58
- Windows 10 パソコン初期化の件です 2 2022/06/05 11:05
- Visual Basic(VBA) 複数ページあるPDFファイル内の文字列等の情報をキーにPDFをグループ分け分割したい。 2 2022/06/25 09:51
- Chrome(クローム) 自作のホームページの画像でパソコンのChromeで見るとコナンの映像だけ写らなくて、マイクロソフトE 3 2022/06/09 18:00
- HTML・CSS HTMLとCSS(ブラウザ関連)について質問です。 1 2023/03/07 08:07
- PHP PHPの変わった閉じタグの必要性と意味を教えてください。 1 2022/08/28 15:15
- Visual Basic(VBA) Edge操作のアプリが例外発生に 1 2023/03/12 21:22
- その他(プログラミング・Web制作) Pythonのライブラリ、randomについて 3 2022/09/20 14:30
- SEO googleサーチコンソールで、重複URLが多数発生、その修正方法について 2 2023/06/23 16:15
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Dreamweaverのコードカラーが黒...
-
Doxygenでの更新履歴(@history...
-
c言語の改修されたソースから改...
-
VBAで#Regionに変わるものは無...
-
c# 動的に書き換わるHTMLを取...
-
Visual Source Safe?
-
ライブラリにない関数の定義
-
htmlのタブの色変更について
-
サイトがとのようなソフトで作...
-
VisualBasicがインストールされ...
-
htmlソースを見れなくするには?
-
レストラン、英語のメニュー表記
-
プログラム時のヘッダコメント...
-
htmlソース文の 各行 改行位置...
-
マウスポインタが手の形になら...
-
cssのclear:both;を利用した場...
-
ポートスキャン
-
コメントが閉じてないというエ...
-
ソースを表示させない方法はあ...
-
tcl/tkでファイルの秘匿化
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
VBAで#Regionに変わるものは無...
-
プログラム時のヘッダコメント...
-
【VC++6.0(MFC)】Access Violat...
-
ソースの追加行数と変更行数
-
Dreamweaverのコードカラーが黒...
-
レストラン、英語のメニュー表記
-
JSPの実行結果をHTMLに変換
-
#ifdef多用でソースが見づらい
-
ソースの表示を無効にする方法。
-
generatorとは?
-
VBAでhtmlソースから特定の文字...
-
c言語の改修されたソースから改...
-
「INT86(・・・・・・);」 っ...
-
コメントが閉じてないというエ...
-
jsファイルの中身を確認したい…
-
borderの下線が表示されない
-
画像と文字が重なって表示される。
-
VisualBasicがインストールされ...
-
htmlでソースを表示させたくな...
-
innerHTML で表示変更した時の...
おすすめ情報