0

私のウェブサイトページからボタンをクリックして、クロスライダー「background.js」で宣言されたjavascript関数を呼び出す方法は?

Web サイト ページ " http://www.mysite.com/default.aspx "にボタン入力があります。また、 Crossrider [クロスブラウザー拡張フレームワーク] の "background.js" スコープで、javascript オブジェクト / JSON をパラメーターとして受け入れる関数 "myExtensionFunction" を定義しました。javascript オブジェクト/JSON をパラメーターとして渡し、自分の Web サイト ページのボタンをクリックしてこの関数を呼び出すことは可能ですか? その逆も可能ですか? もしそうなら、どのように？そうでない場合、なぜですか？

以下のチュートリアルで「ページ変数の値を拡張スコープに渡すにはどうすればいいですか？」ということはわかりましたが、上記の問題は解決できませんでした。 http://docs.crossrider.com/#!/guide/howto_get_page_variable

以下のコードを試してみたところ、クロスライダーのブラウザ拡張機能 [extension.js ファイル] で定義されている関数が見つからなかったため、予想どおり「関数が存在しません!」というアラートが表示されました。

Javascript file:
---------------

var lxnsT = [];
lxnsT.push({ "u_n": "MegaSearches", "u_a": "URL" });

function myExtFn() {
    if (typeof jsOpenSession == 'function') {
        myExtensionFunction(lxnsT);
    } else {
        alert('function does not exist!');
    }
}

HTML file:
---------------
<button id="myExtFnId" onclick="myExtFn()"> My Button </button>
4

1 に答える 1

2

私があなたの要件を正しく理解していれば、extension.jsファイルをページとバックグラウンド スコープの間のコンジットとして使用することで、目的を達成できます。バックグラウンド スコープは HTML ページ スコープに直接アクセスできないため、これを行う必要があります。

シナリオを実装するには、次のように、CrossriderAPIライブラリをページに追加して、それを使用して拡張機能が利用可能なときにボタンを表示し、ボタンのクリック ハンドラーを構成して、オブジェクトを拡張スコープに送信します。

HTMLファイル:

<html>
<head>
<style>.hidden {display: none;}</style>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="https://w9u6a2p6.ssl.hwcdn.net/plugins/javascripts/crossriderAPI.js"></script>
<script type="text/javascript">
  // Replace XXXXX with the extension id
  var extId = "XXXXX";

  // Once the page is ready
  $(function() {
    CrossriderAPI.isAppInstalled(extId, function(isInstalled) {
      // Displays button if the extension is installed and set click handler
      console.log('Page:: Extension installed? ' + isInstalled);
      if (isInstalled) {
        console.log('Page:: Showing button and adding click');
        $("#myExtFnId").toggleClass("hidden").click(function() {
          $('body').fireExtensionEvent('execBgFunc', {fn:'myBgFn', data:'my data'});
        });
      }
    });
  });
</script>
</head>
<body>
<button id="myExtFnId" class="hidden">My Button</button>
</body>
</html>

次のように、extension.jsファイルで、イベント ハンドラーをバインドしてページからオブジェクトを受信し、メッセージングを介してバックグラウンド スコープに送信します。

extension.jsファイル:

appAPI.ready(function($) {
  $('body').bindExtensionEvent('execBgFunc',
    function(e, data) {
      console.log('Extn:: Bind Received: ' + appAPI.JSON.stringify(data));
      appAPI.message.toBackground(data);
  });
});

最後に、background.jsファイルで、次のようにメッセージ リスナーを使用してデータを受信し、必要な関数を実行します。

background.jsファイル:

appAPI.ready(function($) {
  appAPI.message.addListener(function(msg) {
    if (msg.fn === 'myBgFn')
      console.log('Bg:: Received data: ' + appAPI.JSON.stringify(msg.data));
  });
});

[免責事項：私はクロスライダーの従業員です]

于 2013-12-15T09:33:03.433 に答える