プルダウンメニューについてです。
http://javascript.eweb-design.com/0701_pdm.html
こちらのサイトを参考につくっています。
<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT language="JavaScript">
<!--
// プルダウンメニュー
flag = false;
function pullDown() {
if(flag) ID.style.visibility = "hidden";
else ID.style.visibility = "visible";
flag = !flag;
}
//-->
</SCRIPT>
</HEAD>
<BODY bgcolor="#ffffff">
<A href="javaScript:pullDown()">メニューを表示する</A><BR>
<DIV id="ID" style="position:absolute;visibility:hidden;">
<A href="http://www.yahoo.co.jp/">■Yahoo!</A><BR>
<A href="http://bb.yahoo.co.jp/">■Yahoo! BB</A><BR>
<A href="http://shopping.yahoo.co.jp/">■Yahoo! Shopping</A><BR>
<A href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</A><BR>
</DIV>
<BR><BR><BR><BR>
</BODY>
</HTML>
説明がうまくできないのですが、、”メニューを表示する”をクリックしたときにドロップダウンメニューを開くと同時にページを開きたいと思っています。(”メニューを表示する”のページを作りたい。)
どうしたらよいでしょうか?よろしくお願いします。
No.4ベストアンサー
- 回答日時:
IE8でも成功!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>html5</title>
<script type="text/javascript" charset="utf-8">
var flag = false;
var frame;
window.onload = function () {
frame = document.getElementById("frame");
frame.contentDocument.open("text/html");
frame.contentDocument.write(
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<meta http-equiv="Content-Script-Type" content="text/javascript">\n' +
'<title>html5</title>\n' +
'</head>\n' +
'<body>\n' +
'<div id="ID" style="visibility:hidden;">\n' +
'<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>\n' +
'<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>\n' +
'</div>\n' +
'<script type="text/javascript" charset="utf-8">\n' +
'var target=document.getElementById("ID");' +
'try{' +
'window.addEventListener("message", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);}' +
'catch(e){' +
'window.attachEvent("onmessage", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);}' +
'</scr' + 'ipt>\n' +
'</body>\n' +
'</html>\n'
);
frame.contentDocument.close();
}
function pullDown(){
if(flag) document.getElementById("ID").style.visibility = "hidden";
else document.getElementById("ID").style.visibility = "visible";
frame.contentWindow.postMessage(flag,location.protocol+"//"+location.hostname);
flag = !flag;
}
</script>
</head>
<body>
<div>
<a href="javaScript:pullDown()">メニューを表示する</a>
</div>
<div id="ID" style="visibility:hidden;">
<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>
<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>
</div>
<iframe id="frame">
</iframe>
</body>
</html>
No.3
- 回答日時:
これで、どうです。
(※HTML5 クロスドキュメントメッセージングです。)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title>html5</title>
<script type="text/javascript" charset="utf-8">
var flag = false;
var frame;
window.onload = function () {
frame = document.getElementById("frame");
frame.contentDocument.open("text/html");
frame.contentDocument.write(
'<!DOCTYPE html>\n' +
'<html>\n' +
'<head>\n' +
'<meta charset="UTF-8">\n' +
'<meta http-equiv="Content-Script-Type" content="text/javascript">\n' +
'<title>html5</title>\n' +
'</head>\n' +
'<body>\n' +
'<div id="ID" style="visibility:hidden;">\n' +
'<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>\n' +
'<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>\n' +
'</div>\n' +
'<script type="text/javascript" charset="utf-8">\n' +
'var target=document.getElementById("ID");' +
'window.addEventListener("message", function(ev) {' +
'if(ev.data=="true")target.style.visibility="hidden";' +
' else target.style.visibility = "visible";' +
'},false);' +
'</scr' + 'ipt>\n' +
'</body>\n' +
'</html>\n'
);
frame.contentDocument.close();
}
function pullDown(){
if(flag) document.getElementById("ID").style.visibility = "hidden";
else document.getElementById("ID").style.visibility = "visible";
frame.contentWindow.postMessage(flag,location.protocol+"//"+location.hostname);
flag = !flag;
}
</script>
</head>
<body>
<div>
<a href="javaScript:pullDown()">メニューを表示する</a>
</div>
<div id="ID" style="visibility:hidden;">
<a href="http://www.yahoo.co.jp/">■Yahoo!</a><br>
<a href="http://auctions.yahoo.co.jp/">■Yahoo! Auctions</a><br>
</div>
<iframe id="frame">
</iframe>
</body>
</html>
おっとIE8は、attachEventにかえなきゃ...無駄か
No.1
- 回答日時:
意味がまったく伝わってきませんが。
>”メニューを表示する”のページ
って何ですか?何のためのページですか?同時にやることに意味があるんですか?
どこに開くんですか?新しいタブ/ウィンドウ?
ドロップダウンメニューは開いたページと関係あるんですか?
ぜんぜんわからない。
この回答への補足
同じウィンドウに”メニューを表示する”のページを表示し、同時にドロップメニューも表示させるようにしたいのです。現在のコードですと、”メニューを表示する”をクリックするとドロップダウンメニューが表示されるだけなので…。
わかりずらくてすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
iframeの中から親ページをスム...
-
javascriptでクリックしたリン...
-
JavaScriptでのEnterキーとAlt+...
-
SCRIPT5007: 未定義または NULL...
-
getElementsByNameで要素が取得...
-
フレームサイズの変更について
-
初心者javascript ウィンドウサ...
-
乱数を一定時間毎に表示させた...
-
ナンバーズ 4 の数列をランダム...
-
htaでVBSのソースを書いたらエ...
-
プログラミング初心者です。ど...
-
数日前等の日付を表示したいの...
-
フォーカス移動抑止について
-
onkeydownの連続?
-
JavaScriptでiframeの内容を「...
-
一定時間ごとに背景画像の切り...
-
チェックボックスONでテキスト...
-
JavaScriptによるページURLの取...
-
インラインフレームの、リンク...
-
【jquery】EasyUIのSubGridにMy...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
function の return 値を表示し...
-
SCRIPT5007: 未定義または NULL...
-
JavaScriptでiframeの内容を「...
-
getElementsByNameで要素が取得...
-
キーを押している間の時間を計...
-
フォーカス移動抑止について
-
JavaScriptでの西暦下2桁での表...
-
自動ジャンプでフォームデータ...
-
出荷予定日を表示するJavaスク...
-
クリックすると別の文章を表示する
-
リンク移動先のURLを取得
-
乱数を一定時間毎に表示させた...
-
JavaScript でキーを送る
-
idHOGEで取得したinnerText(数...
-
ボタンのID名を取得するには?
-
htaでVBSのソースを書いたらエ...
-
Javascriptの出力結果をhtmlボ...
-
bodyタグのfocus
-
AjaxでDBから取得したデータを...
-
JavaScriptでのEnterキーとAlt+...
おすすめ情報