chrome插件开发.在content_script异步加载页面后, 如何进行JS通信与调用的问题

Posted 2021-01-18 幻河

使用场景

在开发Chrome插件时, 有一种需求:

要求在WEB页面显示一个浮动窗口(A), 在此窗口中允许用Ajax方式调用另一个服务器上的一个页面(B)

B页面上有独立的功能用JS写function来实现

 

已知条件

窗口A可以利用content-script.js动态生成

窗口A中放置一个按钮, 调用Onclick方法召唤出B页面, 样例代码如下

<button onclick="invokeContentScript(‘openalertWin()‘)">test</button>

具体实现的function

function openalertWin(){
    var domobj = $(‘#div_alert‘);
    if(""==domobj.text()){
        domobj.load(_domain+‘/nj/fun/setalert‘).show();
    }else{
        domobj.toggle(‘fast‘);
    }
}

 

页面B中

有一个按钮和一个JS function

<button onclick="funcB()">testB</button>

具体实现代码也在页面B中

function funcB(){
  alert("I am B");
}

 

 

碰到的问题

实际运行的时候, 发现B页面的按钮按下后会报错:

Uncaught ReferenceError: funcB is not defined 

funcB明明存在于页面B中, 但却无法被调用

 

解决办法

> 方法一, 修改窗口A加载B的方法

取消函数调用法, 改为直接Ajax加载, 代码如下:

<button onclick="$(‘#div_alert‘).load(‘https://xxxxx/nj/fun/setalert‘)">test</button>

发现页面B中的功能马上能正常运行

 

> 方法二, 迂回法则

这个方法比较复杂, 思路如下

1. 在窗口A中放置一个隐藏按钮A1

<button id="btn_A1" style="display:none" onclick="invokeContentScript(‘funcB()‘)">A1</button>

2.把页面B的function放到content-script.js中

3.页面B中的按钮修改为

<button onclick="$(‘#btn_A1‘).click()">testB</button>

完成

方法二缺点是页面B的功能代码被放到插件中, 不利于维护, 不建议使用