[英]How to call a javascript function declared in Crossrider “background.js” by clicking a button from my website page?
How to call a javascript function declared in Crossrider "background.js" by clicking a button from my website page? 如何通过单击我的网站页面上的按钮来调用在Crossrider“background.js”中声明的javascript函数?
I have a button input in my website page " http://www.mysite.com/default.aspx ". 我的网站页面“ http://www.mysite.com/default.aspx ”中有一个按钮输入。 I also have defined a function "myExtensionFunction" in Crossrider [a cross-browser extension framework] "background.js" scope that accepts a javascript object / JSON as parameter. 我还在Crossrider [跨浏览器扩展框架]“background.js”范围中定义了一个函数“myExtensionFunction”,它接受一个javascript对象/ JSON作为参数。 Is it possible to pass a javascript object / JSON as parameter and call this function by clicking on the button in my website page and vice versa? 是否可以传递javascript对象/ JSON作为参数并通过单击我的网站页面中的按钮来调用此函数,反之亦然? If so, how? 如果是这样,怎么样? If not, why? 如果没有,为什么?
I know from this tutorial below, "how to pass the value of a page variable to the extension scope?", but could not solve the above problem. 我从下面的教程中知道“如何将页面变量的值传递给扩展范围?”,但无法解决上述问题。 http://docs.crossrider.com/#!/guide/howto_get_page_variable http://docs.crossrider.com/#!/guide/howto_get_page_variable
I tried the code below, but gave me the alert 'function does not exist!', as expected, as it could not find the function defined in the Crossrider browser extension [extension.js file] 我尝试了下面的代码,但是正如预期的那样,给了我警告'功能不存在!',因为它无法找到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>
If I understand your requirements correctly, you can achieve your goal by using your extension.js file as a conduit between your page and the background scope. 如果我正确理解您的要求,您可以通过将extension.js文件用作页面和后台范围之间的管道来实现目标。 You have to do this because the background scope does not have direct access to the HTML page scope. 您必须这样做,因为后台作用域不能直接访问HTML页面范围。
To implement the scenario, add the CrossriderAPI library to your page using it to show the button when the extension is available and configure the button's click handler to send the object to the extension scope, as follows: 要实现该方案,请将CrossriderAPI库添加到页面中,以便在扩展可用时显示按钮,并配置按钮的单击处理程序以将对象发送到扩展范围,如下所示:
HTML file: 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>
In your extension.js file, bind an event handler to receive the object from the page and then send it via messaging to the background scope, as follows: 在extension.js文件中,绑定一个事件处理程序以从页面接收对象,然后通过消息传递将其发送到后台作用域,如下所示:
extension.js file: extension.js文件:
appAPI.ready(function($) {
$('body').bindExtensionEvent('execBgFunc',
function(e, data) {
console.log('Extn:: Bind Received: ' + appAPI.JSON.stringify(data));
appAPI.message.toBackground(data);
});
});
Finally, in the background.js file, use a message listener to receive the data and execute the required function, as follows: 最后,在background.js文件中,使用消息监听器接收数据并执行所需的函数,如下所示:
background.js file: background.js文件:
appAPI.ready(function($) {
appAPI.message.addListener(function(msg) {
if (msg.fn === 'myBgFn')
console.log('Bg:: Received data: ' + appAPI.JSON.stringify(msg.data));
});
});
[ Disclaimer : I am a Crossrider employee] [ 免责声明 :我是Crossrider员工]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.