概要
あるWEBページ(ページAとします)にアクセスした瞬間に別のページ(ページBとします)にジャンプさせたくて、META、Javascriptなどを使ってみました。
しかしどうしても最初のページAが画面上に見えてしまいます。
瞬時にジャンプさせるにはどうしたらいいでしょうか?
詳細
ページAにアクセスしたときに、
瞬時にページBにジャンプさせたくて、
WEBサイトで情報を得て、以下の2種類をページAに記載してみました
3秒後にジャンプする手法 META方式
<META http-equiv="Refresh" content="3;URL=jump.html">
3秒後にジャンプする手法 Javascript方式
<BODY onLoad=setTimeout("location.href='jump.html'",3000)>
上記の2種の方法は「3秒後にジャンプ」なので、秒数の引数を
0秒に変更してみました。
しかし、どちらの手法を用いても一秒ほど、最初にアクセスするページAが表示されたのちに
ページBが表示されます。
出来うることならば(いや、絶対に)ページAにアクセスした瞬間にページBが表示され、
操作者に
「あ、今、ページAにアクセスしてから自動的にページBに飛んだな」
ということを察知してほしくありません。
どうしたらページAにアクセスした瞬間にページBが表示されるでしょうか?
<細かい話をします>
こういう質問をすると、そもそもの
「ページAアクセス時に瞬時にページBにジャンプする方法」
に回答せずに、
「なぜAからBにジャンプさせねばならんの? だったら最初からページBのURLを提示して
”ページBにアクセスしてください”
というようにWEB閲覧者にお願いすればいいじゃないの?
それを、Aにアクセスしたと見せかけて、Bにアクセスさせる、というのは何か悪意が感じられなあ!
質問の背景が怪しいですね!!!!!」
などとカラんでくる方がいらっしゃいます。
まあ、別にこちらは悪いことをしているわけでもなければ、WEB閲覧者をだまそうとしているわけでもないのでお答えします。
ページAは自分(質問者)が用意したサイト内のページです。
そしてページBは外部のWEBサービスを使って作ったページです。
最初から外部のページBのURLを提示してもいいのです。
しかし、そのページのアクセス解析(アクセス日時、IPアドレス、回数など)をしたいのです。
多分、回答されるご貴兄は
「じゃあ、ページBのアクセス解析をすりゃあいいじゃんか!
なんでジャンプなんかさせるんだ?
おかしいじゃないか!」
と思われることでしょう。
ところがページBは外部のWEBサービスですので、アクセス解析タグが置けません。
そこで、自分の作ったサイト内のページAにアクセス解析タグを置いて、ページAを経由させて自動的にページBに進ませることでアクセス解析を可能にしたい、ということです。
こういうと多分回答されるご貴兄は
「外部のWEBサービスだってやりようによってはアクセス解析できるよ
わざわざジャンプなんかさせなくてもいいんだよ!」
とおっしゃるかもしれません。
しかし、自分の作ったサイトで使っているアクセス解析になれているので、その方法でアクセス解析をしたいのです。
というわけで、ページAのURLをクリックしたあと、ページAは表示されずに、瞬時にページBを表示させたいです。
妥協できる点があるとすれば以下のやり方かな? と思います。
1 ページAにアクセスした後にページBにジャンプするさい、「ページAを経由している」ということを察知されたくないので、ページAの画像は極力(いや、絶対に)表示したくない
そのためならばページAのURLクリック後、ページBが表示されるまでの時間が「瞬時」ではなくて「1,2秒経過後」であってもそれは容認する
2 最初にアクセスするページAがどうしても見えてしまう、というならば
「ページAの表示内容、画像、テキストを白紙にする」
「ページAの表示内容、画像、テキストをページBと同一(もしくは極力似させる)」
という手法でごまかす方法もあるかもしれません。
これは
「ページAを表示させずに瞬時にページBにジャンプ」
がどんな手法をもってしても不可能である場合は容認しますが、できればやりたくありません
詳しい方、お願いします。
A 回答 (7件)
- 最新から表示
- 回答順に表示
No.7
- 回答日時:
ホームページ作成ソフトで出来ることに限定すると、
ご提示の <meta> と onload しか手段はありません。
目的は以下の二点と仮定して、代案を考えてみました。
* 自身のサイトにアクセスログを残す
* リンク元ページから、透過的に pageB を表示する
お勧めは案1ですが、案2/案3も実績がある方式です。
### 案1. HTTP 302 転送設定をする
サーバーに pageA を pageB へ転送(リダイレクト)する設定を行います。
転送にはいくつか種類がありますが、ご質問の内容ならば HTTP 302 が適しています。
簡易的な操作で実現できるサーバもあるようですが、
一般的には .htaccess という設定ファイルで行います。
例) .htaccess の記載内容
RewriteEngine On
ReawriteRule ^/xxx/pageA\.html hxxx://xxx/pageB.html [R,L]
よく使われる設定ですので、ご契約しているレンタルサーバーに説明が用意されていないか探してみましょう。
可能であれば有料サポートを頼むのもよいでしょう。
参考) レンタルサーバーによる説明例
https://www.onamae-server.com/guide/rs/p/56
https://help.sakura.ad.jp/206054622/
### 案2. pageB にビーコン画像を埋め込む
pageB に以下のような記述を行います。
<img src="//自身のサイト/beaconA.png" width=1 height=1>
利用者が pageB を表示すると
ブラウザが beaconA 取得のために通信が生まれるので、
自身のサイトでアクセスログ取得ができます。
beaconA は画面表示させないために 1x1 の透明画像とでもしてください。
この案では pageA が不要になるので、
pageA へのリンクをすべて pageB にする手間が発生します。
### 案3. リンク元からビーコン URL を呼ぶ
案2 のようにビーコンを使いますが
pageB へのリンクとなる <a> すべてにスクリプトを組み込み、
ビーコン URL への通信が完了してからリンクを行います。
<script>
// ビーコンURL との通信が成功した後で目的の URL へリンクする
function jump(a){
_ fetch('//自身のサイト/beacon.jon').then(res=>window.location = a.href);
_ return false;
}
</script>
<a href="/xxx/pageB.html" onclick="return jump(this)">
No.6
- 回答日時:
>それはホームページビルダーなどのホームページ作成ソフトでも、
>実現できる手法でしょうか?
出来ないですね。
つまりWebアプリの話じゃなくて、コンテンツの中のHTMLとJSだけで
なんとかしたいという話?
とするとここまで殆ど噛み合って無いと思う。
iframeに次の画面を嵌め込むとかいろいろ考えられるけど
その後の操作が不自然になるからやめた方が良さそう。
ご回答ありがとうございます。
>出来ないですね。
出来ないんですね
>つまりWebアプリの話じゃなくて、コンテンツの中のHTMLとJSだけで
なんとかしたいという話?
この意味がよくわかりませんが、当方は
「ホームページ作成ソフト(ホームページビルダーに類するような)で出来ることでこの問題を解決したい」
と思っています。
>とするとここまで殆ど噛み合って無いと思う。
かみ合ってないんですね。
ここまで、というのはどこからどこまででしょうか?
回答1から回答6までの話でしょうか?
それとも貴殿が回答した回答5と6だけの話でしょうか?
No.4
- 回答日時:
こんにちは
いずれの方法にしろ、直接ページBを表示するときに比べて、時間はかかるようになります。
(一旦、ページAにアクセスしているため)
方法はいろいろありますけれど、htaccessが使えるなら、htaccessでのリダイレクトを。
https://www.profuture.co.jp/mk/column/20177
https://dejima.s-cubism.com/know-how/22128
使えない場合は、phpなどサーバサイドの言語で。
それも使えなければ、ご質問に挙げられているrefreshやスクリプトによる方法になりますが、こちらの場合はユーザの通信環境によって(次のURLを表示するまでに)若干のタイムラグを生じます。
>最初にアクセスするページAが表示されたのちに
>ページBが表示されます。
ページBを読みに行って解釈を終えるまでの時間は、ページAが表示されることになります。
ユーザの通信環境がものすごく良ければ、ほとんどチラつき程度にはなるでしょうけれど・・・
そんなに良い環境ばかりを期待はできないので、この方法の場合は、ご質問のように「白紙のページ」にしておくのが良いのではないでしょうか?
あるいは「リダイレクトしています」という旨の表示にしておくとか。
ご回答ありがとうございます。
>https://www.profuture.co.jp/mk/column/20177
こちら、アクセスできませんでした
>https://dejima.s-cubism.com/know-how/22128
難しそうですね、勉強してみます。
>そんなに良い環境ばかりを期待はできないので、この方法の場合は、ご質問のように「白紙のページ」にしておくのが良いのではないでしょうか?
当座はこの方法でしのごうと思います。
>あるいは「リダイレクトしています」という旨の表示にしておくとか。
質問文に書いた通り、この方法は容認できない方法です。
No.3
- 回答日時:
そもそも、htmlとjavascriptだけで実現したいということでしょうか?
phpとか、サーバーサイドの言語は使えない環境という前提でしょうか?
ご回答ありがとうございます。
>そもそも、htmlとjavascriptだけで実現したいということでしょうか?
>phpとか、サーバーサイドの言語は使えない環境という前提でしょうか?
質問者が
「ページAは自分(質問者)が用意したサイト内のページです。」
云々としているWEBページは、自前のサーバを用意しているわけではありません。
WEBサイト無料レンタルサービスに申し込んで、借りたサーバ容量に対して、、いわゆるホームページ作成ソフト(ホームページビルダーなどに類するソフト)で作成したWEBページをFTPでアップロードしている、という形態です。
こういう状態です。
>WEBサイトで情報を得て、以下の2種類をページAに記載してみました
も、WEBサイトで検索したプログラム文を見よう見まねで打ち込んだだけなので、たとえそれなりにジャンプ機能が実行できているとしても、それが
「正しいやり方で間違いなくできている」なのか
「本当は正しいやり方ではなく、やっとこさ出来ている」なのかは
判別しかねます。
といったところです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(パソコン・スマホ・電化製品) とある情報が知りたく、検索して表示されたリンクをクリックしてページを見て、そこに知りたい情報の説明の 3 2022/11/26 18:55
- Word(ワード) Word のマクロについての質問です。 ボタンを押すと登録したブックマーク先にジャンプする機能(リン 3 2023/08/16 12:17
- その他(ブログ) bloggerのレイアウト→ページリストに入りきらない(テーマ:contempo light) 1 2023/05/12 11:06
- PDF こんなPDF作れますか? 6 2022/05/13 11:14
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- Android(アンドロイド) 標準ブラウザがAndroidシステムWebviewのブラウザになってるAndroid端末を教えてくだ 2 2022/12/02 12:35
- その他(パソコン・スマホ・電化製品) Webページ印刷時にヘッダー・フッターをつけたい 1 2022/04/25 21:35
- Chrome(クローム) PCの Google Chrome が頻繁に「ページが応答していません」となり作業が進みません。 1 2023/05/25 20:43
- ノートパソコン ページ番号の入れ方について 3 2023/02/16 17:11
- その他(インターネット接続・インフラ) ブラウザにIPアドレス入力した時 1 2022/06/16 19:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Strutsでページネーションを実...
-
リロードした時にページの一番...
-
検索した際に、詳細のページも...
-
javascriptでスライドするペー...
-
動画の自動再生を止めたいので...
-
「戻る」を押しても戻らないweb...
-
白紙の次ページを削除できない...
-
静止画画像をクリックすると音...
-
Google サイトでPDFの特定のペ...
-
Wordで文字を打ってEnterを押す...
-
cgi-binディレクトリにアクセス...
-
Webデザインや広告制作について...
-
WebARENAのDBサービス
-
Excelで印刷するときのフッター...
-
サーバーの負荷について
-
携帯のwebページを開いていて、...
-
PDFファイルについて
-
Excelで偶数ページにのみページ...
-
WordPressに関しまして。WordPr...
-
「全面リニューアル」の意味
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Webサイト内に埋め込んだmp4動...
-
スマホでボタンがhoverの状態か...
-
HTMLのリンクの色をクリックす...
-
画面のどこかをクリックすると
-
サイト内投票ボタン(いいね等)...
-
excel VBA でjava のボタンを押...
-
被リンクZからメールが来ました
-
Strutsでページネーションを実...
-
WEBページのジャンプ。素早く行...
-
javascriptであれこれ
-
一回払いのみの被リンクサービ...
-
ドリームウィーバーを使ってペ...
-
被リンクを無料で増やすための...
-
ページ内リンクでアコーディオ...
-
リンク先を新しいタブで開けな...
-
閲覧者に「お気に入り」に追加...
-
リンククリックとリンクコピー...
-
リンク登録代行業者に依頼され...
-
検索結果で、トップページより...
-
iFrame内の変数を、親フレーム...
おすすめ情報