Google 自サイト検索結果オーバーレイ表示で検索実行をjsからsubmitしたい

このQ&Aのポイント
  • Googleの提供する検索窓を自サイトに設置しWEB2.0風にページ上にオーバーレイさせて結果を表示するカスタム検索について質問です。
  • オーバーレイ表示される検索結果を、javascriptのsubmitで実行したいのですが、表示されません。
  • submit自体は実行しているようなのですが、どなたか分かる方お願いします。
回答を見る
  • ベストアンサー

Google 自サイト検索結果 オーバーレイ表示で検索実行をjsからsubmitしたい

Googleの提供する検索窓を自サイトに設置しWEB2.0風にページ上に オーバーレイさせて結果を表示する"カスタム検索"について質問です。 以下がそのサービスが吐き出すコードです。(idっぽいのは一部XXXとかにしています) <form action="" id="searchbox_XXX:XXXcwe" onsubmit="return false;"> <div> <input type="text" name="q" size="40"/> <input type="submit" value="検索"/> </div> </form> <script type="text/javascript" src="​http://www.google.com/coop/cse/brand?form=searchbox_cwe&lang=ja...​ <div id="results_xxx:xxxcwe" style="display:none"> <div class="cse-closeResults"> <a>&times; 閉じる</a> </div> <div class="cse-resultsContainer"></div> </div> <style type="text/css"> @import url(​http://www.google.com/cse/api/overlay.css);​ </style> <script src="​http://www.google.com/uds/api?file=uds.js&v=1.0&key=xxx-xxx...​ type="text/javascript"></script> <script src="​http://www.google.com/cse/api/overlay.js"​ type="text/javascript"></script> <script type="text/javascript"> function OnLoad() { new CSEOverlay("xxx:xxx", document.getElementById("searchbox_xxx:xxx"), document.getElementById("results_xxx:xxx")); } GSearch.setOnLoadCallback(OnLoad); </script> これで"検索"をクリックするとオーバーレイ表示されます。 これを"検索"ボタンクリックではなくjavascriptのsubmitで実行したいのです。 例えば <script language="javascript"> function submitG() { document.myForm.submit(); } </script> ↑submitG()を実行しても検索結果を表示してくれません。 submit自体は実行しているようなのですが。。 どなたか分かる方お願いします。

  • tkmkok
  • お礼率87% (128/146)

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

document.myFormはどこにあるの? 異なるドメインの場合は、↑を修正しても効かない可能性あり。

tkmkok
質問者

お礼

>document.myFormはどこにあるの? すいません。実際は・・・ <form name="myForm" action="" id="searchbox_XXX:XXXcwe" onsubmit="return false;"> といった感じです。その上で機能しません。 "異なるドメインの場合は"というのはクロスドメイン問題でしょうか。 その場合、実行させるにはどのような措置が必要でしょうか。。

関連するQ&A

  • googleのカスタム検索

    googleのカスタム検索をホームページに設置しようと思っています。 アカウント取得して、設置しようとしているのですが、 ボタンを画像にしたり、ボックスの幅を変更できないのでしょうか? <div id="cse-search-form" style="width: 100%;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1'); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('011829881965112279581:kkxhjvjwxl4'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); var options = new google.search.DrawOptions(); options.enableSearchboxOnly("http://xxx.com"); customSearchControl.draw('cse-search-form', options); }, true); </script> <link rel="stylesheet" href="http://www.google.com/cse/style/look/default.css" type="text/css" /> 色々調べたのですが、イマイチ要領を得ることができませんでした。 教えてくださいお願いします。

  • 自作Googleの検索ボックスの薄い文字の作り方(サンプル付き)

    いつも勉強させていただいております。 今回は質問をさせていただけないでしょうか。 よろしくお願いします。 http://hochi.yomiuri.co.jp/ Google Custom Searchという薄い文字があると思います。 結構おしゃれで、自分のHPにも付けようと思っています。 ソースをみると下記のようになっています。 <!-- Google CSE Search Box Begins --> <form id="searchbox_004729702764462794933:_lbkzyf7pac" action="http://hochi.yomiuri.co.jp/contents/cse/searchResults.htm"> <label for="q">サイト内検索</label> <input name="q" id="q" type="text" size="20" /> <input type="submit" name="sa" value="探す" /> <input type="hidden" name="cx" value="004729702764462794933:_lbkzyf7pac" /> <input type="hidden" name="cof" value="FORID:9" /> </form> <script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=searchbox_004729702764462794933%3A_lbkzyf7pac"></script> <!-- Google CSE Search Box Ends --> "searchbox_004729702764462794933:_lbkzyf7pac"の文字列は何か登録をしないと、もらえないのでしょうか? 他のHPを見ても、この文字列だけ違っているようです。 ご存知の方がいたら教えていただければと思います。

  • Googleカスタマイズ検索のtargetについて

    Googleカスタマイズ検索を自作のWEBにつかってます。 ちなみにここから作成できるものです。 http://www.google.co.jp/cse/ そして、作成されたソースはコレです。 <div id="cse" style="width: 220px;">Loading</div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript"> google.load('search', '1', {language : 'ja'}); google.setOnLoadCallback(function() { var customSearchControl = new google.search.CustomSearchControl('検索エンジン ID'); customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET); customSearchControl.draw('cse'); }, true); </script> これでWEBページ内で検索結果を表示することはできるのですが、検索結果をクリックしたら新しいウィンドウで開きます。 target="_blank"で開いてしまうということです。 新しいウィンドウで開かないようにする、つまり target="_self"もしくは target="_parent"にする方法はないでしょうか? 自分はjavascriptなどほとんどわかりませんが、それでなんとかなるお答えでも頑張って理解するので、ご教授いただければ幸いです。

  • google検索の結果反映がおかしい

    自分のHPにgoogle検索フォームを埋め込んでいたのですが、なぜか急に検索結果がうまく反映されなくなりました。なぜでしょうか。タグがおかしくなったのでしょうか? 以下はそれです。 <form action="http://www.google.co.jp/search?" target="_blank"><div align="right"><input maxlength=255 size=31 name=q text><input type=hidden value=ja name=hl><input class=inputbtn_1 type=submit value=Google検索 name=btnG></div></form>

  • クリックファンクションがうまくいかない

    クラス名drawermenuをクリックしたときにドロワーメニューが出たり消えたりする作りなのですが、リストの中にグーグルサイト内検索を入れたところ検索しようと検索ボックスを選択するとドロワーメニューが消えてしまいます。 親divについていると子にある要素をクリックしても親をクリックしたことになってしまうのでしょうか? そうであれば検索ボックスを選択した時だけ実行されないようにするにはどうしたらよいのでしょうか?jqueryを使っています。 <nav> <div id="js-drawermenu-button-animation" class="drawermenu"> <ul> <li class="drawermenu__item"> </li> <li class="drawermenu__item"> <form action="http://www.google.co.jp/cse" id="cse-search-box" target="_blank"> <div> <input type="hidden" name="cx" value="" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="55" /> <input type="submit" name="sa" value="検索" /> </div> </form> <script type="text/javascript" src="http://www.google.co.jp/coop/cse/brand?form=cse-search-box&lang..."></script> </li> </ul> </div> </nav> js $(function(){ $('.modal-button-wrap, .drawermenu').on('click', function() { $('.drawermenu').toggleClass('showmenue'); }); });

  • AJAX?のような使い方をしたい

    AJAX?のような使い方をしたいと思い、 javascriptで下記のような記述を行いました。 document.getElementById('id').innerHTML = "<script type='text/javascript' src='api'></script>"; あらかじめ<script type='text/javascript' src='api'></script>を記述しておけば、 正常にapiにリクエストしてくれますが、 無理やりjavascriptで書き換えると、ソースコードのみが書き換えられ、 apiにリスエスとしてくれません。 何か記述が間違っているのでしょうか? それとも根本的に間違っているのでしょうか?

  • Google AJAX API のmapsのロードとIEでの表示について

    いつもお世話になっています。 Google AJAX APIについて質問です。 デベッロッパーガイドに従って以下のようにスクリプトを書いたのですが IEのみエラーが出て表示されません。 (IE7でも表示はされましたが、不安定でした) <html> <head> <script type="text/javascript" src="http://www.google.com/jsapi?key=登録したAPIキー"></script> <script type="text/javascript"> google.load("maps", "2"); function initialize() { var map = new google.maps.Map2(document.getElementById("map")); map.setCenter(new google.maps.LatLng(37.4419, -122.1419), 13); } google.setOnLoadCallback(initialize); </script> </head> <body> <div id="map" style="width: 400px; height: 400px"></div> <div id="searchcontrol"></div> </body> </html> なぜIEだけが表示されないのか、エラーが出るのかわかる方いらっしゃいましたらよろしくお願いします。

  • Camera slideshowの使い方について

    jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。 どこが間違っているのか見当もつかなく困っています。 【head内】 <head> <!--省略--> <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。 初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。 よろしくお願いしますm(_ _)m

  • Javascriptの変数の中に変数を代入するには

    Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または  + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>

  • google apiの使用方法

    jQueryとgoogleマップのapiを同時に使用する方法を教えていただきたいと思います。 両方を使用するとカスタマイズしたgoogleマップは表示されますが、jQueryに不具合が起きます。 同時に使用する方法はないでしょうか。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script> 他に必要なことがあれば提示しますのでよろしくお願いします。

    • 締切済み
    • CSS