使用场景
在开发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的功能代码被放到插件中, 不利于维护, 不建议使用