Как вызвать функцию 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>
Если я правильно понимаю ваши требования, вы можете достичь своей цели, используя файл 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]