javascriptに関する質問です。(初心者向け)

前へ 次へ
このQ&Aのポイント
  • ユーザーのローカルPC時計の0秒に合わせて自動リロードする方法を教えてください。
  • 現在、ユーザーが訪問した瞬間から60秒経過するごとにページを変更していますが、時計の0秒に合わせてページを更新したいです。
  • 既存の一定時間経過でのリロードの方法ではなく、ユーザーのローカル時計を参照してリロードする方法を知りたいです。
回答を見る
  • ベストアンサー

javascriptに関する質問です。(覚えたての初心者です)

javascriptに関する質問です。(覚えたての初心者です) ただいまホームページで、1分毎にiframe内のページを自動リロードさせているのですが、 これを、アクセスしたユーザーのローカルPC時間の0秒に合わせて自動リロード、に変更 したいと考えています。 具体的に申しますと、 自分で育てている野菜を紹介するホームページなのですが、今まではユーザーが訪問した 瞬間を「0秒目」と考えて、そこから60秒経ったら、大根→はくさい→野沢菜→きゅうり…と iframe内のページを変更しておりました。 これを、「ユーザーのPC時計の0秒目に合わせてページを更新」させたいのです。 (理由は、「毎分でいろんな野菜をご紹介中！」とキャッチフレーズを付けているので 中途半端な時間よりも、ユーザーの時計に合わせたタイミングで写真を切り替えたいと 考えている為です） 現在、下記のようなjavascriptで表現しています。 <HTML> <HEAD> <TITLE>大根のご紹介！</TITLE> <SCRIPT TYPE="text/javascript"> <!-- var jikan = "60000"; function ReloadAddr(){ window.location.reload(); } setTimeout(ReloadAddr, jikan); //--> </SCRIPT> </HEAD> <BODY> //大根の写真や紹介文など </BODY> </HTML> これを、どのように変更すれば解決出来ますでしょうか？ インターネットで様々なサンプル集を見て回ったのですが、上記のような 「一定時間でリロード」という方法は載っているのですが、 「ユーザーのローカル時計が0秒になったらリロード」というサンプルを 見つける事が出来ませんでした… もし宜しければ、サンプルが載っているサイト様をご紹介頂くだけでも構いません。 それでは何卒宜しくお願い致します。

質問者が選んだベストアンサー

  • ベストアンサー
回答No.2

毎分０秒に合わせる為に１秒毎にチェックを入れると 重くなりますので、開いた際に現在秒を取って それが６０秒になる際にリロードをする方がいいのでは ないでしょうか。 function ReloadAddr(){ window.location.reload(); } now = new Date(); sec = now.getSeconds(); var inter = 60 - sec; setTimeout(ReloadAddr, inter*1000); 未テスト＆＃１さんの処理を流用 また、iframe内ページの表示を制御する場合は 親からiframe内ページに対して制御を行う方がいいように思います。 親から制御する場合は、同様に最初に現在秒を取って ６０秒になる時にiframe内をリロードし、あとは60秒おきに リロードすればほぼ０秒にリロードさせる事は可能です。 function ReloadiAddr(){ document.iframe名.location.reload(); } now = new Date(); sec = now.getSeconds(); var inter = 60 - sec; setTimeout( function(){ ReloadiAddr(); setInterval(ReloadiAddr, 60000); }, inter*1000); こんな感じでしょうか。 iframeの呼び出し方どうだったろうか・・・ document.iframe名.****でいけたはず 同じく未テスト まぁ、イメージではこんな感じです。

di-keichu
質問者

お礼

ご回答ありがとうございます。 当初の希望通り、0秒目のリロードが出来るようになりました！ ただ、教えて頂いた「親ページからiframeをリロードする」点は 書いて頂いたソースのコピペでは上手くいきませんでした… iframeのタグは <iframe id="yasai" name="yasai" src="yasai.php"></frame> としているので、書いて頂いた ＞document.iframe名.location.reload(); の部分を、 document.yasai.location.reload(); もしくは、 document."yasai".location.reload(); かなぁと思い挑戦してみるも、どちらも自動リロードは出来ませんでした。

di-keichu
質問者

補足

すみません、補足が該当するコメントでしたのにお礼の欄に掲載してしまいました。 宜しくお願い致します。

その他の回答 (1)

  • MRT1452
  • ベストアンサー率42% (1392/3296)
回答No.1

単に思いつきで書きますが。 ・時間間隔を1分→1秒 ・実動関数内で秒を取得(getSeconds()) ・ifで秒が０かチェックし、0ならばwindow.location.reload();を呼び出す。 スクリプトが頻繁に動く事になりますが、秒を確認するのであれば、毎秒チェックする形にしないと、取れないかと。 現在の内容ではチェックできる最小の時間単位は分なので。 var jikan = "1000"; var ldate; var sec; function ReloadAddr(){ 　ldate= new Date(); ←現日時の取得 　sec = ldate.getSeconds();　　←秒の取得 　if (sec == 0){　　←０秒チェック 　　window.location.reload(); 　} } setTimeout(ReloadAddr, jikan); ※文法チェック、テスト等は全くしてません。

di-keichu
質問者

お礼

お礼欄をお借りします。 このたび、全て解決の運びとなりましたのでご報告いたします。 まず、0秒目のリロードは解決し、その後、No2さんのお教え頂いた 「親ページでのリロード」は、getElementByIdを利用する事で 実行出来ました。 このたびはありがとうございました。

  1. カテゴリ
  2. パソコン・スマートフォン
  3. ソフトウェア
  4. ホームページ作成ソフト

関連するQ&A

  • iframe内をリロードできますか？

    たとえば <HTML> <head> <script language="javascript"> <!-- function a1reload(){ "iframe内をリロードする文章" } //--> </script> </head> <body> <iframe src="a1.html" id="a1iframe"><br> <a href="javascript: a1reload()">ここをクリック</a> </body> </HTML> こんな感じでiframe内をリロードできないでしょうか？ お願いします。

  • JavaScript で指定した月日に別のページにジャンプさせるには？

    JavaScriptを使って「指定した月日に違うページを表示させる」事はできますか？Java Scriptのサンプル等を紹介してくれているHPなどではよく「数秒後に違うページにジャンプする」というのがありますが、日にちを指定して、その日になったら別の違うページを表示させたいと思っています。月日を指定することで別ページにジャンプさせることができるJavaScriptがあれば教えてください。初心者ですので、難しいことは分かりません。できればサンプルソースで変更箇所を教えて頂く形でお願いしたく、よろしくお願いいたします。

  • javascript でタイムラグを表示させて表示したい

    表示したいホームページが5つありますが、同時呼び出しは無理でした。 そこで、javascriptを使って、0.3秒or1秒置きに呼び出したいのですが、 javascriptは全く分からないためどなたか、教えていただけないでしょうか？ ---現在のhtml---- <iframe src="sample/iframe_q.php?q=1" width="200" height="150"> <iframe src="sample/iframe_q.php?q=2" width="200" height="150"> <iframe src="sample/iframe_q.php?q=3" width="200" height="150"> <iframe src="sample/iframe_q.php?q=4" width="200" height="150"> <iframe src="sample/iframe_q.php?q=5" width="200" height="150"> --------------- 0.3秒したら、1つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、1つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、2つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、3つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、4つ目の<iframe>を実行して、表示する。 更に、0.3秒したら、5つ目の<iframe>を実行して、表示する。 という具合です。 何卒、宜しくお願い致します。

  • Javascriptについて

    ページA　ページB　があって ページＡにiframeでページＢを埋め込んだり、ページＢ単体で表示したい場合、 それぞれで使用したいJavaScriptはそれぞれで読み込んでも良いですか？ 同一のJavaScriptそれぞれのページで読み込む。 <script type="text/javascript" src="xxx.js"></script>

  • javascript

    javascript全くの初心者です。 CLASSに与えた値を条件によって変更することは出来ますか、色々やってみましたが出来ません。以下の例では男を女に変えたいのですが、ご面倒お掛けしますが宜しくお願い致します。 <html> <head> <title>sample</title> <div class = "test">男</div> </head> <script type="text/javascript"> function delAttr() { 　test= "女"; } </script> <body> <script type="text/javascript"> if test = "女" delAttr(); </script> </body> </html>

  • jqueryとjavascriptの競合？

    どなたかお知恵をお貸しくださいませ。 jqueryとjavascriptを混在させたページを作っています。 ファイルは全て同一サーバー内です。 ◆希望ページ構成 <body> <div class="wrap"> 　<div class="header"></div> 　<div class="main">**フロートで左に配置 　　<iframe></iframe> 　</div> 　　//１． 　　//jqueryの「iframe-auto-height」プラグインを使って、 　　//読み込まれた内容に応じてiframeの高さを変えるようにしたい。 　<div class="menu">**フロートで右に配置</div> 　　//２． 　　//jqueryの「portamento」プラグインを使って、 　　//画面が縦長になりスクロールしてもこの「メニュー」が 　　//画面に追従してフロートするように（常に画面上に現れている様に）したい。 　　//３． 　　//このメニュー内のリンクから「iframe」内の内容を切り替えたい。 </div> </body> ■　「１．」「２．」のjqueryは、同時にちゃんと動作しました。 　　が、「３．」を加えると「１．」が動きません。 　　「２．」は常に正常に動作します。 　　「１．」と「３．」が競合しているようなのですが、 　　私はみなさんが提供してくださっているスクリプトを“切り貼り”して 　　使わせて頂いている程度の知識しかなく、この問題をどうすれば回避し、 　　希望のページを作れるのか分からず、どなたかお詳しい方にご教示頂ければ、と思った次第です。 　★「３．フロートするメニューボックスの中のリンクから、 　　　表示する内容に応じて高さが可変するiframeの内容を切り替える」 　　　にはどのようにすればよいでしょうか？ ◆HTML記述 <head> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.iframe-auto-height.plugin.1.5.0.min.js"></script> ///　１．「iframe-auto-height」用。これは<head>内だけでなく、</body>の前部分に置いても動作しました。 <script type="text/javascript"> <!-- function ifr(jpURL){ panel.location = jpURL; } // --> </script> 　///３．「リンクでiframe内を切り替える」用。 </head> <body> ～ ～ <iframe src=".html" name="panel" width="620" height="1500" class="auto-height" scrolling="no" frameborder="0"></iframe> 　///　『切り替え』用に「name」を付け、『autoheight』用に「class」を付けています。 　///　フロートの確認用に便宜的に「height」を書いていますが、『autoheight』が動作する際 　///　は「height」は無視されています。 <script type="text/javascript"> jQuery('iframe').iframeAutoHeight(); </script> 　///　『autoheight』用スクリプト ～ ～ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> <script src="http://portamento.js"></script> <script> $('#menu').portamento({gap: 100}); // set a 100px gap rather than the default 10px </script> 　///　『フロートボックス』用読み込み＆スクリプト 　　　　 </body> 内容は以上となります。 何卒よろしくお願いいたします。

  • セキュリティ保護の警告が出ないようにするには

    ローカルで動作させるページを作っているのですが、 JavaScriptを使用したところ、 「セキュリティ保護のため、このコンピュータにアクセスする可能性のあるスクリプトや ActiveX コントロールを実行しないよう、Internet Explorer で制限されています。オプションを表示するには、ここをクリックしてください...」 というメッセージ（情報バー）が表示され、 「ブロックされているコンテンツを許可」を押しても押しても延々と出続けます。 原因は、obejctタグを使ってiframeのように別なページを表示させていることにあります。 その「別なページ」にもJavaScriptを使っているため、 上記の許可ボタンを押しても画面がリロードされ、別なページのJavaScriptを実行する前に警告が出てしまう…という訳です。 ソース（概略）は以下の通りです。 [index.html] <head> <script type="text/javascript" src="./script.js"></script> </head> <body> <object data="./contents.html"></object> </body> [contents.html] <head> <script type="text/javascript" src="./script.js"></script> </head> <body> <p>text</p> </body> セキュリティレベルを甘くせずに、 またobjectをiframeで代用せずに、 この警告を出さないようにすることは可能なのでしょうか？ ご回答よろしくお願い致します。

  • javascript 「折りたためるリスト」

    javascript初学者です。 「折りたためるリスト」について、皆さまにお教え頂きたいことがあり投稿しました。 以下のプログラムのような「折りたためるリスト」があると仮定します。「野菜すべて」をクリックすると、「大根、にんじん、レタス」が表示される折りたためるリストです。 通常、折りたたまれたリストを表示した後にリロードすればリストがたたまれてしまいますが、リロードしてもなおリストがたたまれず、「大根、にんじん、レタス」が表示された状態のままにするにはプログラムをどのように改良すればよいでしょうか。 （例：大根とにんじんにチェックを付けた後にリロードすると、リストがたたまれてしまうため何にチェックが付いているのかわからなくなってしまいます。リロードしてもリストが閉じることなく、リストを表示したままにしたい、と一生懸命やっているのですが、私のjavascriptの知識では解決できないのです(涙)。） なにぶんjavascriptが苦手でどうにもお手上げ状態です。 大変お手数をお掛けしますが、どうぞよろしくお願いいたします。 「折りたためるリスト」プログラム ----------------------------------------------------------------------- <html> <body> <input id="all" name="test1" type="checkbox" value="1"><a href="URL" onclick="oritatami('1');return false">野菜すべて</a><br> <div id="1" style="display:none"> 　　<input name="test1" type="checkbox" value="10">大根<br> 　　<input name="test1" type="checkbox" value="11">にんじん<br> 　　<input name="test1" type="checkbox" value="11">レタス<br> </div> <script type="text/javascript"> function oritatami(id){ obj=(document.all)?document.all(id):((document.getElementById)?document.getElementById(id):null); if(obj) obj.style.display=(obj.style.display=="none")?"block":"none"; } </script> </body> </html> -----------------------------------------------------------------------

  • javascriptの分岐について質問です

    ＨＰのトップページ（/index.html）にアクセスされた時に相手のブラウザがjavascriptに対応しているか非対応かでページを自動で分けたいのですが自分で調べたところ２つの方法を見つけました。 ◆＜SCRIPT LANGUAGE="JavaScript"＞ ＜!--- To hide JavaScript from old browsers var delay = 1 function nextPage() {timerId = setTimeout("changePage()", delay)} function changePage() {location = "JAVA scriptを使ったページのアドレス"}// ---＞ ＜/SCRIPT＞ ※以上のコマンドをＨＴＭＬのHEADタグの中に入れます。 （＜＞は全て半角に直してください） ※次にBODYタグの最後あたりにonLoad="nextPage()"と記入すれば完成です。 これは本文内に次の一行を入れるだけです。 ＜META HTTP-EQUIV="refresh" CONTENT="1; URL="JAVA scriptを使っていないページのアドレス"＞ という方法と ◆<!--<head>～～</head>に貼り付けてください <meta http-equiv="refresh" content="10;url=javaoff.htm"> <SCRIPT LANGUAGE="JavaScript"> <!-- location.href="javaon.htm"; //--> </script> ソース中の赤文字の部分はご自分で変更してください という方法です。どちらも試してみたのですが、javaのオフの仕方が分からないのでそっちは確認しておりませんがjava対応で見てみるとどちらの方法も何秒かごとにカチッと画面を再び読み込み同じページ（javaバージョン）に戻ることを繰り返します。ちなみにメインのjavaを使っているページがindex.htmlでjavaを使っていない方はno-index.htmlで、どちらも同じ階層です。そしてindex.htmlの方に上記のソースを書いています。ファイル名はindex.htmlとno-index.htmlと変えていますがどこがおかしいのか分かりません。お分かりの方助言をお願いいたします。

  • JavaScriptでページを一度だけリロード

    とあるページにアクセスした際、JavaScript(jQuery)を使って一度だけページをリロードしたいと思っております。 <script language="JavaScript"><!-- function reload() { if (window.name != "test") { location.reload(); window.name = "test"; } } // --></script> 上記のような記述で試みたのですが、リロードしてくれません。 他に対応できる方法がございましたら、ご教授いただけますと幸いです。 以上、よろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する