chrome插件開發.在content_script異步加載頁面后, 如何進行JS通信與調用的問題

使用場景

在開發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的功能代碼被放到插件中, 不利於維護, 不建議使用