- 締切済み
子ページから親ページのものを実行したい
<body> <p> <input type="button" id="sample1" value="サンプル１" /> <input type="button" id="sample2" value="サンプル２" /> </p> </div> <script src="js/jquery.min.js"></script> <script src="js/jquery.backstretch.min.js"></script> <script> $.backstretch("sample01.jpg", {speed: 500}); $("#sample1").click(function() { $.backstretch("sample01.jpg"); }); $("#sample2").click(function() { $.backstretch("sample02.jpg"); }); </script> </body> --------------------- 上の記述ですが jqueryで背景が切り替わるサンプルをいただいてきました。 これに子ページを読ませました。 子ページ側に <p> <input type="button" id="sample1" value="サンプル１" /> <input type="button" id="sample2" value="サンプル２" /> </p> このボタンを貼りつけて、 親ページの背景を切り替えたいのですが、 子ページにはどのように記述すればよいのでしょうか。 どなたかお教えいただけませんでしょうか 何卒宜しくお願い致します
- afro_blue
- お礼率33% (1/3)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yambejp
- ベストアンサー率51% (3827/7415)
openerをつかってみては？
関連するQ&A
- Jquery と JqueryUIについて
現在、Jquery と JqueryUIを使ってプログラムを書いています。上手く動作しないので以下について教えてください。 やりたいことは、ボタンを押すと文字があらわれたり消えたりするという動作を実現したいと思っていますが、今は、ボタンと文字が表示されるのみで、ボタンを押しても全く動きません。 現在書いているコードは以下のとおりです。 ---- <html> <head> <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="js/jquery-ui-1.8.17.custom.min.js"></script> <script> $(function() { $('#button').click(function(){ $('#sample-text').show(); }); }); </script> </head> <body> <input type="button" id="button" value="ボタン"> <p id="sample-text">Hello World!</p> </body> </html> ------------------- Jqueryのバージョンは、最初、UIとの互換性を考え、1.3.2を使っていましたが、動かないため、現在は新しいバージョンで試してみたところです。(１．４．４でもだめでした） JSファイルの場所は、上記htmlファイルと同じ階層のjsディレクトリ内です。 また、補足ですが、これが上手くいけば、script内の show メソッドのかわりに ｔoggleを使いたいと考えています。 上記コードで間違っている部分がわかる方がいらっしゃいましたら教えてください。 よろしくお願いいたします。
- ベストアンサー
- AJAX
- jsについて
jsのプログラムで質問があります。 p id1を押したらテスト1が表示されますが、p id2を押したら1が表示されたまま2が表示されてしまいます。 2を押したら1を隠して2を表示させたいのですが、やり方を教えてください。 3も、同じようにしたいです。 <p id="p1">テスト１</p> <p id="p2">テスト2</p> <p id="p3">テスト3</p> <input type="button" id="button1" value="ボタン1" /> <input type="button" id="button2" value="ボタン2" /> <input type="button" id="button3" value="ボタン3" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(function() { // 初期表示を非表示にする $('#p1').hide(); // 初期表示を非表示にする $('#p2').hide(); // 初期表示を非表示にする $('#p3').hide(); $("#button1").click(function() { // 表示する $("#p1").show(); }); $("#button2").click(function() { // 表示する $("#p2").show(); }); $("#button3").click(function() { // 表示する $("#p3").show(); }); }); </script>
- ベストアンサー
- JavaScript
- <input> のbuttonで関数を実行したい
<input> 要素のbuttonを押すと※の処理が実行されるようにするには、どの部分を直すべきかご指摘いただけませんか。 よろしくお願いします。 -aaa.html <html> <!DOCTYPE> <body> <input id="ccc" type="button" value="スタート"> <script src="bbb.js"></script> </body> </html> -bbb.js document.getElementById("ccc").onclick = function buttonClick(){※}
- ベストアンサー
- JavaScript
- jQuery 動的にボタンが増えた時
<html> <head> <title>js sample</title> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> jQuery(document).ready( function() { $(".button_cls_1").click(function(){ alert('hello world! button 1'); }); $(".button_cls_2").click(function(){ alert('hello world! button 2'); }); }); </script> </head> <body> <input class="button_cls_1" type="button" value="テスト１" /> <input class="button_cls_2" type="button" value="テスト２" /> </body> </html> 上記のようなスクリプトでbutton_cls_1、button_cls_2が動的に増えた時に どのように書いたらいいかわかりません。 button_cls_1、button_cls_2、button_cls_3、button_cls_4の時もあれば button_cls_1、button_cls_2の時もあります。
- ベストアンサー
- JavaScript
- スクレイピングした内容をvalue値に入れたい
下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】 上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果 → 東京 ************************************** 【出来なかったこと】 これを、<input type="text" name="tx" value="東京"> のような形でフォーム内に取り入れることを考えています。 しかしながら、下記のようにうまくいきません。 ●●だめ その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果 → 表示されず ●●だめ その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果 → 表示されず 【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。
- ベストアンサー
- JavaScript
- jquery.cookie.jsの使い方が分かりません。
jquery.cookie.jsの使い方が分かりません。 Web経験浅く、質問の仕方や内容に不足や不備があるかもしれませんが、ご容赦ください。 入力フォームでcookie.jsを使いたいのですが、どのようにスクリプトを書けばよいのか分かりません。 単純に、入力フォームに入力したデータを保存したいだけなのですが・・・。 いろいろ調べてみたいのですが、分かりやすいソースサンプルを見つけることが出来ず、困っております。 どなたか教えて下さいませんでしょうか？ ちなみに、ソースサンプルは以下の通りです。 ------------------------------------------------------------------ <html> <head> <title>テスト</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript"> ????????????ここのスクリプトをどうしたらよいのか分かりません。 </script> </head> <body onload="getck()"> <form name="input"> 性別：<input type="radio" name="sex" value="男性" />男性／ <input type="radio" name="sex" value="女性" />女性<br /> 名前：<input type="text" name="name" /><br /> 住所：<input type="text" name="add" /><br /> <input type="button" value="記録" onClick="setck()" /><br /> <input type="button" value="呼び出し" onClick="getck()" /><br /> </form> </body> </html> ------------------------------------------------------------------ 上記ソースではボタンクリックで呼び出しとしていますが、実際には、入力したフォームのページ（入力ページ1）とは別のフォームページ（入力ページ2）で、入力データを再利用する作りとなります。 要するに、入力ページ2を呼び出すと、入力ページ1で入力したデータが入力されている、という状態を求めております。 なので、<body onload="getck()">としてあります。 （テストも兼ねたサンプルソースなので、1ファイルで全てチェックできるようにしています） 説明が分かりにくいところもあるかと存じますが、何とぞご教示いただけますよう、宜しくお願い申し上げます。
- ベストアンサー
- AJAX
- jQuery Cycle Plugin のナビ
img01.jpg～03.jpgをフェードインフェードアウトで繰り返し表示しているのですが ここに手動追加？でナビゲーションを付けたいです。 #navi 部分のbutton02.jpg にマウスオーバーで img02.jpgを button03.jpg にマウスオーバーで img03.jpgを フェードイン。 マウスアウトでフェードアウトさせて、そこからまた自動でローテーション。 という事をやりたいのですが、自力ではできませんでした。 ご教授の程、よろしくお願いいたします。 <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.cycle.min.js"></script> <script type='text/javascript'> $(document).ready(function() { $('div#main').cycle({ fx:'fade', speed:500, timeout:4000 }); }); </script> <div id="main"> <img src="img/img01.jpg" /> <img src="img/img02.jpg" /> <img src="img/img03.jpg" /> </div> <div id="navi"> <ul> <li><a href="#"><img src="img/button02.jpg" /></a></li> <li><a href="#"><img src="img/button03.jpg" /></a></li> </ul> </div>
- ベストアンサー
- JavaScript
- 複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
- Operaにおけるscriptのエスケープ？
ボタンを押したらjQueryが使えるページを新規で開くように以下のようなソースを書いてみました。 ----------------------------------------------------------------------------------------- <input type="button" value="test" onclick="test()" /> <script type="text/javascript"> function test(){ var newWindow=window.open(); newWindow.document.open(); newWindow.document.writeln('<p>test</p>'); newWindow.document.writeln('<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"><\/script>'); newWindow.document.writeln('<p>test</p>'); newWindow.document.writeln('<p>test</p>'); newWindow.document.writeln('<p>test</p>'); newWindow.document.close(); } </script> ----------------------------------------------------------------------------------------- ところが、これだとOperaではうまくいきません。 「要素を検証」してみたところ、</script>以下がwritelnされていないようです。 src="～" の～部分を消してみると以下はきちんと書き込まれるのですが、それだとjsファイルを読み込むことができません。 </script>以外にもエスケープさせねばいけない所があるのでしょうか？ それとも原因は他にあるのでしょうか？ 教えていただければありがたく思います。 よろしくお願いします。
- 締切済み
- JavaScript
- 入力欄を動的に増減させる
jquery.addInputAreaAdd Starhundret プログラミング, jQueryプラグイン の基本の入力欄を動的に増減させるデモ用のHTMLファイルを作りましたが、 入力欄が増減できません。 http://d.hatena.ne.jp/sutara_lumpur/20120509/1336556562 どこの記載が間違っているのでしょうか。 <html lang="ja-JP"> <head> <script type="text/javascript src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $('#list1').addInputArea(); </script> </head> <body> <ol id="list1"> <li class="list1_var"> <input type="text" size="40" name="list1_0" id="list1_0"> <button class="list1_del">Delete</button> </li> </ol> <input type="button" value="Add" class="list1_add"> </body> </html>
- ベストアンサー
- JavaScript
