如何调用Crossrider中声明的javascript函数;background.js”;点击我网站页面上的一个按钮

How to call a javascript function declared in Crossrider "background.js" by clicking a button from my website page?

本文关键字：网站 一个 按钮 background Crossrider 调用 何调用 声明 js 函数 javascript      更新时间：2023-09-26

如何通过点击我的网站页面上的按钮来调用Crossrider"background.js"中声明的javascript函数？

我的网站页面中有一个按钮输入"http://www.mysite.com/default.aspx".我还在Crossrider[一个跨浏览器扩展框架]"background.js"范围中定义了一个函数"myExtensionFunction"，该函数接受javascript对象/JSON作为参数。是否可以传递一个javascript对象/JSON作为参数，并通过点击我网站页面中的按钮调用该函数，反之亦然？如果可以，如何？如果不能，为什么？

我从下面的教程中知道，"如何将页面变量的值传递到扩展范围？"，但无法解决上述问题。http://docs.crossrider.com/#/指南/如何设置可变

我尝试了下面的代码，但给了我alert"函数不存在！"，正如预期的那样，因为它找不到中定义的函数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>

如果我正确理解您的需求，您可以通过使用扩展名.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>

在扩展名.js文件中，绑定一个事件处理程序以从页面接收对象，然后通过消息将其发送到后台作用域，如下所示：

扩展名.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的员工]

相关文章：