0

如何通过单击我网站页面上的按钮来调用在 Crossrider“background.js”中声明的 javascript 函数?

我的网站页面“ http://www.mysite.com/default.aspx ”中有一个按钮输入。我还在Crossrider [一个跨浏览器扩展框架]“background.js”范围内定义了一个函数“myExtensionFunction”,它接受一个 javascript 对象/JSON 作为参数。是否可以通过单击我的网站页面中的按钮来传递 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>
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文件中,使用消息监听器来接收数据并执行所需的函数,如下:

背景.js文件:

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

[免责声明:我是 Crossrider 的员工]

于 2013-12-15T09:33:03.433 回答