3

新しいオートコンプリート機能を備えたGoogleカスタム検索エンジンを使用しています。ページ自体がロードされた後に、このjavascript全体がロードされるようにします。元のGoogleコードは次のとおりです。

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load('search', '1');
  google.setOnLoadCallback(function() {
    google.search.CustomSearchControl.attachAutoCompletion(
      'some-long-unique-id',
      document.getElementById('q'),
      'cse-search-box');
  });
</script>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=cs"></script>

JSダイナミックローディングに関するチュートリアルを使用して、このコードをこのコードに変換しました。

(function() {
  var goog = document.createElement('script'); goog.type = 'text/javascript';
  goog.src = 'http://www.google.com/jsapi';
  var cse = document.createElement('script'); cse.type = 'text/javascript';
  cse.src = 'http://www.google.com/cse/brand?form=cse-search-box&lang=cs';
  goog.onload = function() {
    google.load('search', '1');
    google.setOnLoadCallback(function() {
      google.search.CustomSearchControl.attachAutoCompletion(
        'some-long-unique-id',
        document.getElementById('q'),
        'cse-search-box');
    });
  };
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(cse, s);
  s.parentNode.insertBefore(goog, s);
})();

私のソリューションは機能するはずだと思いますが（GoogleがAnalyticsのオンデマンド非同期コードを変更したのと同じように）、機能しません。ページは正常に読み込まれ、CSEが読み込まれるとすぐにページが空白になります。何かがDOMをクリアします、私はそれのある種の「グーグルのもの」だと思いますか？誰かがこの問題とおそらく実用的な解決策に光を当てることができますか？

ありがとう

4

3 に答える 3

11

OK、Google Loader開発者ガイドを確認し、多くの試行錯誤を重ねることで、質問で期待どおりに機能するようにコードを変更する方法を見つけました。

(function() {
  var goog = document.createElement('script'); goog.type = 'text/javascript';
  goog.src = 'http://www.google.com/jsapi';
  goog.onload = function() {
    google.load('search', '1', {"callback": function() {}});
    google.setOnLoadCallback(function() {
      google.search.CustomSearchControl.attachAutoCompletion(
        'some-long-unique-id',
        document.getElementById('q'),
        'cse-search-box');
    });
  };
  var cse = document.createElement('script'); cse.type = 'text/javascript';
  cse.src = 'http://www.google.com/cse/brand?form=cse-search-box&lang=cs';
  var s = document.getElementsByTagName('script')[0]; 
  s.parentNode.insertBefore(cse, s);
  s.parentNode.insertBefore(goog, s);    
})()

主なものはこの行です：

google.load('search', '1', {"callback": function() {}});

コールバックを指定しない場合（少なくとも私のように空の関数）、GoogleのCSEが読み込まれると、ページ全体が空白になります。理由はわかりませんが、このダミーのコールバック関数で正常に機能するようになりました。

それが同じ問題を抱えている人に役立つことを願っています。

于 2011-08-10T17:33:26.997 に答える
0

jsをオンデマンドでロードしてコールバックを追加できるjsローダー（yepnopeなど）を使用できると思います。

于 2011-08-10T11:18:58.580 に答える
0

私はあなたが何を達成しようとしているのか完全には理解していません。コードを「修正」する方法を誰かに提案するように依頼しましたが、コンテキストや、実際に最終結果をどのようにしたいかを指定していません。

また、作成したfunction（）で提供した更新は、これらがどのように呼び出されているかが明確ではありません。ドキュメントreadyStateが完了したとき？

まず、jQueryを使用してJavaScriptをまとめることをお勧めします。はい、GoogleはAPIにonloadイベントやその他のヘルパーを提供していますが、jQueryはすべてのJavscriptに適用されるため、必要のない2つのJavascriptフレームワークを使用しても意味がありません。

jQueryは次のようになります。

<script type="text/javascript" language="javascript" src="/js/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" language="javascript">
    // Use the jQuery document load functionality.
    $(document).ready(function ()
    {
        // Load the Google API asynchronously.  The callback 'GoogleApiLoaded' will be called when the script is fully-loaded.
        $.getScript("http://www.google.com/jsapi?key=yourkey", GoogleApiLoaded);    
        // Load other scripts, do other init code here (non-Google-dependent).
    });

    function GoogleApiLoaded()
    {
        // Google-related init here.
        // Load the custom search API.
        // (Could make the callback an in-line function).
        $.getScript("http://www.google.com/cse/brand?form=cse-search-box&lang=cs", CustomSearchApiLoaded);
    }

    function CustomSearchApiLoaded()
    {
        google.load('search', '1', LoadCustomSearchControl);
    }

    function LoadCustomSearchControl()
    {
        google.search.CustomSearchControl.attachAutoCompletion('some-long-unique-id', document.getElementById('q'), 'cse-search-box');
    }
</script>

問題がどこにあるかをより簡単に追跡するために、コードをさまざまな関数に分割すると役立つ場合があります。'google.load（）'関数にオプションのコールバックを入れなければならないのは奇妙です-それはGoogleコードのバグかもしれません、いくつかが浮かんでいます。

google.load('search', '1', LoadCustomSearchControl)私の見解では、私は、ではなく、を使用しました。google.setOnLoadCallbackこれは、私が見る限り、彼らは同じことを行う必要があり、コールバックを使用するload()方が適切だからです。

jQuery（または任意のJavaScriptフレームワーク）を使用することを強くお勧めします。これにより、作業が大幅に楽になります。

私が提案したことがうまくいくかどうか、そしてうまくいかない場合はどこがうまくいかないかを知りたいと思います。（必ず独自のJSAPIキーを追加してください）。

于 2011-08-17T11:26:42.157 に答える