ウェブページにレシピを掲載しています。
週5回日替わりでメニューを載せていますが、
毎週、「お手軽20分レシピ」などとテーマわけをして、
紹介しており、そのテーマに沿った一口メモをポップアップウィンドウで表示させらるようテキストリンクをはっています。
現在このリンク先のURLは手動で修正していますが、面倒ですし、できれば深夜0:00にJavascriptで自動修正したいと思います。
が、Javascriptのなかに<a>タグをどのように張り込めばいいのかわかりません。非常に基本的な質問で心ぐるしいのですが、ネットで検索をかけても、同様の機能を使うユーザは多くないようで、ページが見つかりません…。ご教示ください。
No.6ベストアンサー
- 回答日時:
補足読みました。
前回(#8)のスクリプトをそのまま生かしたい場合は、
document.write(" target=_blank>今日のレシピ</a>");
この行を、
document.write(" target=recipe onClick=window.open('','recipe','width=400,height=300')>今日のレシピ</a>");
こうすれば、希望通りの動作が得られるのではないかと思います。 こうすると、リンクタグ内に追加したJavaScriptでブランクのウィンドウを開き、そのウィンドウにリンクで指定したページを読み出すようになるはずです。
ただ、こうするよりも、関数でウィンドウを開く動作を指定しておいて、その関数をリンクから呼び出す方が、スマートなソースになると思います。
この場合は、head内のスクリプトは、以下のようにします。
<script type="text/javascript">
<!--
rcp = new Array();
rcp[1]="****1.html";
//~ 中略 ~
rcp[30]="****30.html";
rcp[31]="";
function TDR(){
al=new Date();
dd=al.getDate();
window.open(rcp[dd],"recipe","scrollbars=1,resizable=1,width=400,height=300");
}
// -->
</script>
この関数を呼び出すリンクについては、
<a href="#" onClick="TDR(); return false;">今日のレシピ</a>
これでよいはずです。 あとは、はじめに定義しているrcp[]という配列に、順次その日付のときに表示させたいHTMLファイルのURLを記述すれば、動作してくれると思います。
こちらの方が簡素で良いと思います。
これでいかがでしょうか?
上記2番目のNewArrayを使ったやり方で頼もしく動作したので、さっそく本番にデータあげてしまいました!ありがとうございました。
毎週月曜の朝、手作業で更新していたので、これでかなりらくになります!!
No.5
- 回答日時:
失礼ついでにもう一つ。
#2の方の回答の補足にあるソースを改造するのであれば、
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function ra(n){
this.length=n;
for(i=0;i<n;i++)this[i]="";
}
function dinrcp()
{
var dt = new Date();
dt = dt.getDate();
document.write("<a href=");
document.write(rcp[dt]);
document.write(" target=_blank>今日のレシピ</a>");
}
rcp = new ra(31);
rcp[1]="****1.html";
//~ 中略 ~
rcp[30]="****30.html";
rcp[31]="";
//-->
</SCRIPT>
</head>
<body>
<script language="JavaScript"><!--
dinrcp();
// -->
</script>
</body>
</html>
こんな感じではいかがでしょうか。
それぞれの日のリンク先のURLは、配列の画像のURLを格納している部分("****1.html"の部分)に記入してください。
こちらの場合は、リンク先のURLを手動で書き換える必要がありますが、配列の中でHTMLファイルのURLを指定できるので、HTMLファイルの名前を自由に付けることが可能になります。
たびたび失礼しました。 参考になれば幸いです。
この回答への補足
lead1976さんありがとうございます。
一口メモ(今週のテーマ)ページへリンクさせるための、テキストリンクの表示には、成功しました。
が、一口メモ(今週のテーマ)のページは、400*300pxというとても小さいサイズで作っているため、Javascriptにポップアップウィンドウのサイズを指定するスクリプト追加したいのです…。
単純に"function dinrcp() "にwindowopenのスクリプトを追加するだけだと、ページにアクセスしたときに一口メモページが開かれてしまいます。
何度も申し訳ないのですが、よろしくお願いします…。
No.4
- 回答日時:
横槍気味に失礼します。
JavaScriptの関数で新しいウィンドウを開くように指定して、その開く先のページのURLを、リンクをクリックした時点の日付で変更する方式ではいかがでしょうか。
JavaScriptでリンクを書き出す場合、DHTML的手法を使わない限り、日付をまたいだときに、そのリンクのリンク先はページをリロードしない限りは変更されませんし、ポップアップウィンドウを利用したいというのであれば、HTMLのリンクのみでtarget指定を変えるなどしてやるよりも、JavaScriptでやった方がスマートにできると思います。
練習がてらに作ってみたのですが、もしポップアップに表示させるHTMLファイルの名前が#3の方の回答の補足にあるように年月日の連番をつけて管理されているのであれば、
<script type="text/javascript">
<!--
function TDR(){
al=new Date();
ddch=al.getDate(); //曜日にあわせたチェック用の日付を取得します。
wkd=al.getDay(); //曜日を取得します。
if (wkd==0){ al.setDate(ddch-2);} //今日が日曜日だった場合、2日前の日付に変更。
else if (wkd==6){ al.setDate(ddch-1);} //今日が土曜日だった場合、2日前の日付に変更。
yy=al.getFullYear(); yy.toString();
mm=al.getMonth()+1; mm.toString();
dd=al.getDate(); dd.toString();
if (10>mm) {mm="0"+mm;}
if (10>dd) {dd="0"+dd;}
linkURL="r_memo"+yy+mm+dd+".html";
window.open(linkURL,"recipe","scrollbars=1,resizable=1,width=500,height=500");
}
// -->
</script>
これを記述しておき、body要素のリンクを
<a href="#" onClick="TDR(); return false;">今日</a>
としてスクリプトを呼び出せば、多分お望みどおりの挙動になると思います。 読み出すHTMLファイルは、「r_memoYYYYMMDD.html」の形式で管理してください。
なお、このスクリプトでは、週5日の日替わりということのようなので、土日に更新がないものと勝手に解釈して、土日にアクセスした場合には金曜日のレシピを出すように仕掛けを入れてあります。 更新のない日がこれとは違う場合は、適宜修正してください。 ちなみに、スクリプト中で取得される曜日は、0から6までの連番で、日曜=0、月曜=1…土曜=6です。 また、こういう機能が不要であれば、コメント文がついている行をすべてそっくり削除してください。
失礼しました。
No.3
- 回答日時:
自動修正のリンク先はどうしたいのですか?
20030519.htmみたいな感じでいいんでしょうか?
そういう感じだったら簡単に出来ますけど、
複雑なファイル名にしたい場合は自動的に修正
するのは難しいと思うので、最低でも連番みたい
な感じになると思います。そこらへんを具体的に
教えていただけると回答もしやすいのですが・・
この回答への補足
ありがとうございます。
リンク先のURLは更新日をファイル名に挿入して、"r_memoYYMMDD.html"といったものにできればと思いますが、数字以外の文字列をファイル名に使用するのはむずかしいのでしょうか…? 日付だけを入れたものでもとくに問題はないので、おしえていただければ幸いです。
No.2
- 回答日時:
Javaスクリプトの知識はどの程度でしょうか?
ちょこっと改造ぐらいはできると考えてアドバイスさせて頂きます。
http://www.usagi-js.com/sample/jssample2.htm
↑
ここのサイトの[間によってページを変更する]を改造すればいけそうですね。サンプルでは1日24時間を1時間ごとに1回計24回変更していますので、そこを改造してちょ!
又、このページにはヒントがいっぱいのサンプルがあるので参考にして作って下さい。
参考URL:http://www.usagi-js.com/sample/jssample2.htm
この回答への補足
ありがとうございます。
わたしいままでほとんどコピペもどきの使い方でしか使ったことないので、このarrayと、変数の指示のどこをどう書き換えたらよいものかわかりません…。
ちなみに画像の自動差し替えには次のようなスクリプトを使用しています。
***
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function ma(n){
this.length=n;
for(i=0;i<n;i++)this[i]="";
}
function dinimg()
{
var dt = new Date();
dt = dt.getDate();
document.write("<img src=");
document.write(im[dt]);
document.write(" width=180 height=96 border=0>");
}
im = new ma(31);
im[ 1]="dinner/4252.jpg";
im[ 2]="dinner/4253.jpg";
im[ 3]="dinner/4253.jpg";
im[ 4]="dinner/4253.jpg";
im[ 5]="dinner/4253.jpg";
im[ 6]="dinner/4254.jpg";
im[ 7]="dinner/4255.jpg";
im[ 8]="dinner/4256.jpg";
im[ 9]="dinner/4257.jpg";
im[ 10]="dinner/4257.jpg";
im[ 11]="dinner/4257.jpg";
im[ 12]="dinner/4258.jpg";
im[ 13]="dinner/4259.jpg";
im[ 14]="dinner/4260.jpg";
im[ 15]="dinner/4261.jpg";
im[ 16]="dinner/4262.jpg";
im[ 17]="dinner/4262.jpg";
im[ 18]="dinner/4262.jpg";
im[ 19]="dinner/4263.jpg";
im[ 20]="dinner/4264.jpg";
im[ 21]="dinner/4265.jpg";
im[ 22]="dinner/4266.jpg";
im[ 23]="dinner/4267.jpg";
im[ 24]="dinner/4267.jpg";
im[ 25]="dinner/4267.jpg";
im[ 26]="dinner/4268.jpg";
im[ 27]="dinner/4269.jpg";
im[ 28]="dinner/4250.jpg";
im[ 29]="dinner/4250.jpg";
im[ 30]="dinner/4251.jpg";
im[ 31]="";
//-->
</SCRIPT>
</head>
<body>
<script language="JavaScript"><!--
dinimg();
// -->
</script>
</body>
</html>
***
これをかきかえて使えないでしょうか?
お手数おかけします…。
No.1
- 回答日時:
ふと思ったのですがJavaスクリプトでもし可能だとしてもJavaスクリプトではローカルのシステム時計で判断しますよね?
ということはサイトを見に来たユーザさんが故意に時間を変えることで閲覧できてしまいますが問題ないですか?
さっそくありがとうございます。
ローカルの時計をつかった表示でかまいません。
わざわざ時間をすすめてみるということは、
それだけ熱心なユーザさんということで、
こちらとしても歓迎すべきことかと…。
レシピ自体も過去のストックからの二次掲載ですし。
よろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 空白で入力フォームのボタンをクリックしたら、ブラウザの上部からjavascriptで 表示されるアラ 1 2022/05/20 11:16
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- JavaScript jqueryとJavaについて 2 2022/05/16 22:39
- WordPress(ワードプレス) ワードプレスで、投稿一覧ページにタグを表示する方法 投稿につけたタグを、記事一覧ページにもカテゴリと 1 2023/05/10 21:41
- その他(プログラミング・Web制作) このWEB用語、WEB文章、意味が分かりますか? 理解できない人が多いようなんですが・・・ 7 2022/10/22 09:13
- JavaScript Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい 5 2023/08/04 01:22
- マンガ・コミック 手塚治虫のアシスタントをしていた人を教えて下さい。 1 2023/07/22 10:10
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- Windows 10 プロファイルエラーについて 2 2022/12/16 09:31
- Word(ワード) Word のマクロについての質問です。 ボタンを押すと登録したブックマーク先にジャンプする機能(リン 3 2023/08/16 12:17
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
window.close()で閉じられない
-
指定時間になったら、WEBサイト...
-
CSSのtransform: translate(-50...
-
エクセルでサイズに合ったもの...
-
htmlでテーブル内にテキストボ...
-
エクセルでサイズ指定でPOP...
-
aタグに直接style=""で:hoverを...
-
Excel で等間隔で縦線を引きた...
-
HTMLフォームのSELECTの幅を一...
-
PDFへてのテキストボックスにて...
-
エクセル 画面表示拡大率によ...
-
テーブルとテーブルの間に、隙...
-
表の幅が広がる
-
INPUT TEXT内の文字位置を指定...
-
ホームページビルダー7で表の枠...
-
ホームページ 背景二枚重ね ...
-
エクセルの行の幅がずれる
-
表の中に表
-
なぜ左に寄っているの?
-
Excelの列や行の幅を表示...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
指定時間になったら、WEBサイト...
-
window.close()で閉じられない
-
HTMLでブラウザを終了させる方法
-
javascriptでタイトルバーを非...
-
『入力文字列 + .html』 に...
-
window.openした時、親ウィンド...
-
小窓を表示させたい
-
location.hrefの使用条件について
-
スクリーン真ん中に移動
-
とても困ってます!!助けてく...
-
クリックで画像表示、さらに画...
-
Javascriptで毎週月曜日深夜0:0...
-
JavaScriptで作られた択一式テ...
-
1つのボタンに2つの機能
-
Scriptタグはheadタグとbodyタ...
-
サブウインドウを開くときのフ...
-
子窓で送信したら、親ウィンド...
-
JavaScriptとアニメーションgif...
-
showModalDialogで動的にページ...
-
ポップアップ (小窓)
おすすめ情報