chrome插件编写。ajax请求出错

一棵树下 发布于 2016/06/22 17:15
阅读 379
收藏 1

代码

运行在 content.js

$.ajax({
type:'get',
async:true,
url:'xxxxxxxxxxxxxxxxxxxx',
data:{
command:'check',
sld:reg_name_array['0'],
tldlist:reg_name_array['1'],
flush:'false',
timeout:'10000',
language:''
},
 dataType:'jsonp', 
jsonpCallback:"baogume",
success:function(baogume){
alert('0')
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(XMLHttpRequest)
}
})

插件执行请求。。 报错。 

控制台运行。。 弹出0 正常。。

去掉 jsonp 插件 控制台 都报错。。 

chrome插件,配置文件 带有 jquery.js 在就没有其他了。。。

加载中
0
gavinking
gavinking
content script 好像不能访问外部请求,试试在background js里发请求
一棵树下
可以。。 响应数据是jsonp 就会出问题,,其他没事
0
wuyiw
wuyiw

这个问题挺典型的, chrome插件用不了jsonp.

根本原因是content script的window和页面的window是两个不同对象(为了隔离).

而jsonp请求呢, 是先设定window.callback_xxxx = function(){回调}, 然后在页面插入一个<script>脚本请求数据, 返回的内容是callback_xxxx(数据).

问题是callback是在content script的window里面设定的, 而请求却是在页面上执行的, 而页面的window里面并没有callback_xxxx, 所以就出现了楼主所说的现象.

解决方法要么放弃jsonp, 要么用postMessage做中转(虽然window不同, 但postMessage是都能收到的):

/* content script */
window.addEventListener('message', function (e) { console.log(e.data) })

// 向页面注入代码
var script = document.createElement('script')
script.type = 'text/javascript'
script.innerHTML = '(' + (function() {
	$.ajax({dataType:'jsonp', success: function (data) { window.postMessage(data, '*')}});
}).toString() + ')()'
document.body.appendChild(script)
script.remove()



让jsonp的请求与回调都在页面中完成, 然后将数据传给content script.

这要求页面也必须引入了jquery.

一棵树下
感谢。。我测试下
返回顶部
顶部