使用场景
在开发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的功能代码被放到插件中, 不利于维护, 不建议使用
chrome插件开发.在content_script异步加载页面后, 如何进行JS通信与调用的问题
原文地址：https://www.cnblogs.com/visionsl/p/9930081.html