码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2018-11-08 18:11:17      阅读:520      评论:0      收藏:0      [点我收藏+]

标签:onclick   如何   UNC   直接   def   erro   chrome插件   服务器   ref   

使用场景

在开发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通信与调用的问题

标签:onclick   如何   UNC   直接   def   erro   chrome插件   服务器   ref   

原文地址:https://www.cnblogs.com/visionsl/p/9930081.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!