Как вызвать функцию javascript, объявленную в Crossrider «background.js», нажав кнопку на странице моего сайта?

0

Как вызвать функцию javascript, объявленную в Crossrider "background.js", нажав кнопку со страницы моего сайта?

У меня есть кнопка ввода на моей странице веб-сайта " http://www.mysite.com/default.aspx ". Я также определил функцию "myExtensionFunction" в Crossrider [инфраструктуре расширения кросс-браузера] "background.js", которая принимает параметр javascript object/JSON as. Возможно ли передать параметр javascript/JSON в качестве параметра и вызвать эту функцию, нажав кнопку на моей странице веб-сайта и наоборот? Если да, то как? Если нет, то почему?

Я знаю из этого урока ниже, "как передать значение переменной страницы в область расширения?", Но не смог решить вышеуказанную проблему. http://docs.crossrider.com/#!/guide/howto_get_page_variable

Я попробовал код ниже, но дал мне предупреждение "функция не существует!", Как и ожидалось, поскольку она не могла найти функцию, определенную в расширении браузера Crossrider [файл 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>
  • 0
    <button onclick = "myExtensionFunction ()"> нажмите меня </ button>
  • 1
    @CatalinSterian: это не имеет значения, это код расширения с разными областями действия.
Показать ещё 2 комментария
Теги:
browser
crossrider

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));
  });
});

[ Отказ от ответственности: я сотрудник Crossrider]

Ещё вопросы

Сообщество Overcoder
Наверх
Меню