简体   繁体   English

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

[英]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.

相关问题 如何将数据从弹出脚本发送到crossrider中的background.js? - How to send data from popup script to background.js in crossrider? 在Crossrider中将数据从background.js发送到extension.js - Sending Data From background.js to extension.js in crossrider 来自background.js的内容脚本中的Chrome调用功能 - Chrome call function in content scripts from background.js 如何从网页DOM中获取元素到我的background.js? - How to get elements from a webpage DOM into my background.js? chrome扩展程序中的background.js无法识别在注入文件上声明的函数 - Function declared on injected file not recognize from background.js in chrome extension 从网页调用background.js函数 - calling a background.js function from webpages 当popup.html页面上的按钮需要时,如何将background.js中的数据保存到本地计算机并获取此数据? - How can I save data from background.js to local machine and fetch this data when required by a button on the popup.html page? Chrome扩展程序:从background.js调用contentscript.js中的函数 - Chrome extension: Call function in contentscript.js from background.js Javascript 将消息从 content.js 发送到 background.js - Javascript send message from content.js to background.js 如何在Google Chrome扩展程序中将信息从Background.js传递到autofill.js? - How can I pass information from Background.js to autofill.js in my Google Chrome extension?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM