ちょっと変わったマニアな作品が集結

jQueryのanimate()を利用してスマホサイトを作っています。

アニメーションした後に次のページに遷移させて、
ブラウザの戻るボタンで元のページに戻ったときに、
アニメーションが終わった後の状態が表示されます。

どうやらキャッシュを表示させているようなので、Webで検索して
window.onunlord = function(){}
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">
などを試しましたが、iPhoneのSafariだけ、どうやってもキャッシュを読みます。

どなたか解決方法をご教示頂けませんでしょうか。

jQueryのバージョンは1.10.2です。
宜しくお願い致します。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

キャッシュというよりは、前のページを完全に再現しているような気がします。


CGIなどで出力しても、(クエリがあっても)やはり完全に同じ内容が出力されますので、回避は難しいのではないでしょうか。
    • good
    • 1
この回答へのお礼

ご回答有難うございます。

色々試しましたところ、確かにキャッシュというよりは、
スクリプトを実行しきった最後の状態をHTMLとして持っているような感じですね。

onpageshowを使ってなんとか回避できました。

お礼日時:2013/09/19 13:41

私は iPhone を持っていないため、確認できないのですが…



この文は、綴りが間違っています。
> window.onunlord = function(){}

以下のように修正したら、もしかしたらうまくいくかもしれません。(lord ではなく load)
> window.onunload = function(){}

念のため確認ですが、この文は <script> で囲って使う物ですので、以下のようにしてくださいね。
<script>
window.onunload = function(){}
</script>


また、前に回答している方のおっしゃる通り、これはキャッシュではないです。
Back Forward Cache というブラウザの機能だそうです。
    • good
    • 0
この回答へのお礼

ご回答有難うございます。

焦って綴りを間違えてしまいました。お恥ずかしい限りです。
コードの方には間違っていませんでしたが、やはり効果がないようでした。

http://rick-brain.sblo.jp/article/57893714.html

こちらのサイトを参考に、onpageshowを使って回避できました。

お礼日時:2013/09/19 13:45

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qsafariの「戻る」操作時のリロードを止めたい

助けてください。
MacBookAirでSafariを使っています。Verは今日現在最新です。
Safari上で「戻る」操作をした時、戻った先のページがリロードされるのが大変不便で止めたいと思っていますが、環境設定等を見てみても、それらしい設定が見つかりません。ネットでも探してみましたが、キーワードが適切でないのか、なかなか見つかりません。どうか助けて下さい。

Aベストアンサー

先に結論として、「見に行ったページにリロードするような処理が仕込まれている場合どうにもなりません」がまず大原則だと思ってください。

キャッシュはまさにそのような一々サーバーに情報を読みに行かずに済むためのものですので、戻る・進むボタンでは基本的にキャッシュが表示されるのですが、いろいろな要素でサーバーに問い合わせに行ってしまいます。
一番大きい原因としては表示させるページそのものに、表示した時に最新情報を受け取りに行くように仕込まれているパターンですね。
細かいことは省きますが、例えばjavascriptなどを使用しているとonloadという部分は表示された時の動作を記述するのですが、そこでサーバーに更新をかけるようなプログラムが書かれてるとユーザーのほうではどうにもできません。

基本的には常に最新情報を表示させたい・見たいという需要の方が圧倒的に強いので、このようなページが多いです。
キャッシュが正常に動いていてなおリロードが常に動くようであれば、質問者様の見たいページはそのような仕様になってしまっているということになります…

Qブラウザの「戻る」ボタンを押した時にリロードさせる

ブラウザの「戻る」ボタンを押して前のページに戻った時に1回だけページを
リロードさせたいのですが、IEでは下記のようにすれば上手く出来ました。

<script type="text/javascript">
<!--
window.onunload = function(){location.reload();}
-->
</script>

しかしながら、上記では他のブラウザ(Firefox・Opera・Safai・Google Chrome等)では
リロードされません。

全てのブラウザで上手くリロードさせる方法はないでしょうか。

宜しくお願い致します。

Aベストアンサー

window.onbeforeunload = function(){location.reload(true);}

QBackボタンが押されたら

JavaScriptでBackボタンが押されたら前のページに
戻るのではなくて前のページのURLへジャンプしたいと考えています。

Backボタンが押されたことをどうやって判定すればいいのでしょうか?

よろしくお願いします。

Aベストアンサー

Backボタンを押したかどうかをスクリプト側で把握できるようなイベントハンドラは、おそらくありません。
(そういった、ブラウザ自体の制御に関するイベントとして取得できるのは、ヘルプを呼んだことを示すイベントハンドラが在るくらいでしょうか)

ですが、サイト内の遷移などで、バックボタンを押されては困る場合もあります。
そういうときは、location.replace('目的のページ') で、遷移されることをお奨めします。

【記載例】
<input type="button" onClick="location.replace('a.html');" value="replace">

location.replaceを使って遷移した場合、Backボタンに割り当てられるような履歴情報が残りません。

ただ、このままだと、サイト内をどれだけ移動しようとも、Backボタンが押されると、そのサイトに入る直前のサイトに飛んでしまいます。

ですので、この方法を使うときは、サイトに入った時点で、新規にウィンドウを開き、新しいウィンドウ上にサイトのコンテンツを表示するようにします。

新しいウィンドウを開いた後は、元の(他サイトからの遷移の履歴が残っているほうの)ウィンドウは、閉じてしまっても良いでしょう。

Backボタンを押したかどうかをスクリプト側で把握できるようなイベントハンドラは、おそらくありません。
(そういった、ブラウザ自体の制御に関するイベントとして取得できるのは、ヘルプを呼んだことを示すイベントハンドラが在るくらいでしょうか)

ですが、サイト内の遷移などで、バックボタンを押されては困る場合もあります。
そういうときは、location.replace('目的のページ') で、遷移されることをお奨めします。

【記載例】
<input type="button" onClick="location.replace('a.html');" valu...続きを読む

Qillegal string offset

php5.3では動いていたプログラムをphp 5.4 で動かしたらwarning illegal string offsetが出て困っています。以下のプログラムでwarningが出ないようにするにはどのようにコーディングすればよいのでしょうか?


$a = array('exists' => 'foo');
if ($a['exists']['non_existent']) {
print 1;
}
print 2;
exit;

Aベストアンサー

isset()を使えばいいと思います

QJavaScriptのhistory.back(戻る)の命令が実行しません.

教えて頂きたいことがあります.
JavaScriptのhistory.back(戻る)を下記の通り記述しました.

<A href="Javascript:void(0)" onClick="history.back()" target="_self">
<IMG src="画像ファイル.gif" width="100" height="50" border="0" alt="戻る"></A><BR>

以前から使用している方法で,IE5までは間違い無く
動作していたのですが,PCの環境XPでIE6を使用した所,動作がしなくなってしまいました.
何か問題があるのでしょうか?アドバイスを頂けましたら幸いです.よろしくお願いいたします.

Aベストアンサー

<a href="Javascript:void(0)" onclick="history.back();return false;" target="_self">
onclickにreturn false;を追加してみてください。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

QFORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入力された値を表示する -->
  <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する
  <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る
 </FORM>

● c.php (完了画面)
--------------------------------------------------------------------------------
b.php について質問なのですが、
b.phpにおいて、登録ボタンと戻るボタンを2つつけて、
それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・?
<FORM method="POST" action="c.php">と書いてしまうと、
戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね??
こういう場合ってJavaScriptとかで遷移先を指定するんですか・・?
もしそうでしたら、JavaScriptがよくわからないので
できればサンプルコード示していただけると助かります・・・。
  

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入...続きを読む

Aベストアンサー

はじめまして。

<INPUT type="submit" name="submit" value="登録" onClick="form.action='c.php';return true">
<INPUT type="submit" name="submit" value="戻る" onClick="form.action='a.php';return true">

でいいと思います。(実際、このコードで使っています)
値を渡すには、FORM内にhiddenで、値を設定しておいて、methodをPOSTに設定しておけば、渡せます。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Qテーブルセル余白(例えば左側だけ、上側だけ、など)

こんにちは。
宜しくお願いいたします。

テーブル内のコードに、cellpadding="5" は
セル余白が上下左右のすべて、5ピクセル空きますが、

左側だけ5ピクセル、とか、上側だけ5ピクセル、のように
指定方向のみ、余白を作ることは可能でしょうか。

その場合のHTML記述を教えてください。

また、ここで質問させていただいている「指定方向への余白指定」と
全体余白指定の「cellpadding="XX"」は同時に使って
良いものでしょうか。
素人質問ですみません。
宜しくお願いいたします。

Aベストアンサー

1つのセルだけなら、下記で。
<td style="padding: 5px 10px 20px 30px;">
上の例は、上が 5px。 右が 10px。下が 20px。 左が 30px。
適当に数値変更してください。
cellpadding="5" と style="padding: 5px;"は同じになるはず。
<td style="padding: 5px;">

両方使うとどうなるかは、試して下さい。
cellpadding をここ数年利用していないので・・・

複数個所利用するなら、NO.1さんを参考に HEAD内に下記を入れて試してみましょう。
<style type="text/css">
<!--
td {padding: 5px 10px 20px 30px;}
-->
</style>


人気Q&Aランキング