JavaScript不能调用内容脚本JS功能 [英] JavaScript can not call content script JS function
问题描述
我正在开发Chrome扩展。我成功加载JavaScript文件，但问题是外部JavaScript（我已加载）无法调用内容脚本文件的功能，我的代码如下。
$（document）.ready（function（）{
$（'。main_list'）。click（function（）
{
$（'。sub_list'） .hide（）;
$（this）.parent（）.children（'。sub_list'）.slideToggle（normal）;
}）;
$（'＃click'）.click（function（）
{
$（'。sub_list'）.hide（）;
$（this）.parent（）.parent （）.children（'。sub_list'）。slideToggle（normal）;
}）;
$（'＃btnnewtask'）。click（function（）
{
showdialog（'http：// localhost：51967 / task.aspx'）;
}）;
$（'＃linknewtask'）。click（function（）
{
showdialog（'http：// localhost：51967 / task.aspx'）;
}）;
$（'＃btnnewcall'）。click（function（）
{
showdialog（'http：// localhost：51967 / call.aspx'）;
}）;
$（'＃linknewcall'）。click函数（）
{
showdialog（http：// localhost：51967 / call.aspx）;
}）;
$（'＃btnnewmeeting'）。click（function（）
{
showdialog（http：// localhost：51967 / meeting.aspx）;
}）;
$（'＃linknewmeeting'）。click（function（）
{
showdialog（http：// localhost：51967 / meeting.aspx）;
}）;
}）;
Showdialog（）是内容脚本中的函数。它是如下
函数showdialog（url）
{
var xhr = new XMLHttpRequest（）;
xhr.onreadystatechange = function（）
{
if（xhr.readyState == 4&& xhr.status == 200）
{
xmldoc = xhr.responseXML;
var js = getfile（getjavascript（xmldoc））;
for（i = 0; i
loadjscssfile（js [i]，js）;
var css = getfile（getstylesheet（xmldoc））
for（i = 0; i
loadjscssfile（css [ I]中， CSS）;
}
document.file.push（
{url：url，css：css，js：js}）;
document.getElementById（dialogcontainer3）。
innerHTML = gethtmldocument（xmldoc）;
document.getElementById（blacklayer）。style.display =block;
document.getElementById（dialogcontainer3）。style.display =
inline-block;
document.getElementById（dialogcontainer2）。style.display =block;
document.getElementById（dialogcontainer1）。style.display =block;
}
}
xhr.open（GET，url，true）;
xhr.send（）;
}
但它给出错误
未捕获的ReferenceError：showdialog未定义（程序）：1
（匿名函数）（程序）：1
b.event.dispatch（程序）： 3
v.handle（program）：3
< blockquote>
内容脚本在一个称为孤立的
世界的特殊环境中执行。他们可以访问他们注入的页面的DOM，
，但不能访问由该页面创建的任何JavaScript变量或函数。
它看起来像每个内容脚本一样，没有其他JavaScript
在它正在运行的页面上执行。反过来也是如此：
在页面上运行的JavaScript不能调用任何函数或访问由内容脚本定义的任何
变量。
请参阅 http://developer.chrome.com/extensions/content_scripts.html#execution环境
页面上的代码示例为：
function showDialog url）{
window.postMessage（{
type：FROM_PAGE，
text：url
}，*）;
}
而在内容中：
//此函数不会与页面的showDialog相冲突：
function showDialog（url）{
/ * ... * /
）
window.addEventListener（message，function（event）{
//我们只接受来自自己的消息
if（event.source！= window）{return ;}
//确定我们正在查看正确的事件：
if（event.data.type&&（event.data.type ==FROM_PAGE） ）{
showDialog（event.data.text）;
}
}，false）;
我没有测试过上述内容，所以请认为它是伪代码。这里有一个类似的例子： http://developer.chrome.com/extensions/content_scripts.html ＃主机页面通信
I am developing chrome extension. I loaded JavaScript file successfully but the problem is external JavaScript (which I have loaded) can not call the function of content script files my code is as follows.
$(document).ready(function() {
$('.main_list').click(function()
{
$('.sub_list') .hide();
$(this) .parent() .children('.sub_list') .slideToggle("normal");
});
$('#click') .click(function()
{
$('.sub_list') .hide();
$(this) .parent() .parent() .children('.sub_list').slideToggle("normal");
});
$('#btnnewtask').click(function()
{
showdialog('http://localhost:51967/task.aspx');
});
$('#linknewtask').click(function()
{
showdialog('http://localhost:51967/task.aspx');
});
$('#btnnewcall').click(function()
{
showdialog('http://localhost:51967/call.aspx');
});
$('#linknewcall').click(function()
{
showdialog("http://localhost:51967/call.aspx");
});
$('#btnnewmeeting').click(function()
{
showdialog("http://localhost:51967/meeting.aspx");
});
$('#linknewmeeting').click(function()
{
showdialog("http://localhost:51967/meeting.aspx");
});
});
Showdialog() is function in content script. It is as follow
function showdialog(url)
{
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function()
{
if (xhr.readyState==4 && xhr.status==200)
{
xmldoc=xhr.responseXML;
var js=getfile(getjavascript(xmldoc));
for(i=0;i<js.length;i++)
{
loadjscssfile(js[i],"js");
}
var css=getfile(getstylesheet(xmldoc))
for(i=0;i<css.length;i++)
{
loadjscssfile(css[i],"css");
}
document.file.push(
{"url":url,"css":css,"js":js});
document.getElementById("dialogcontainer3").
innerHTML=gethtmldocument(xmldoc);
document.getElementById("blacklayer").style.display="block";
document.getElementById("dialogcontainer3").style.display=
"inline-block";
document.getElementById("dialogcontainer2").style.display="block";
document.getElementById("dialogcontainer1").style.display="block";
}
}
xhr.open("GET",url,true);
xhr.send();
}
But it gives error
Uncaught ReferenceError: showdialog is not defined (program):1
(anonymous function) (program):1
b.event.dispatch (program):3
v.handle (program):3
Content scripts execute in a special environment called an isolated world. They have access to the DOM of the page they are injected into, but not to any JavaScript variables or functions created by the page. It looks to each content script as if there is no other JavaScript executing on the page it is running on. The same is true in reverse: JavaScript running on the page cannot call any functions or access any variables defined by content scripts.
See http://developer.chrome.com/extensions/content_scripts.html#execution-environment
I would suggest trying shared DOM to communicate between the content script and the page or Message Passing.
An example of code on the page would be:
function showDialog(url) {
window.postMessage({
type: "FROM_PAGE",
text: url
}, "*");
}
And in the contentscript:
// This function will NOT collide with showDialog of the page:
function showDialog(url) {
/* ... */
}
window.addEventListener("message", function (event) {
// We only accept messages from ourselves
if (event.source != window) { return; }
// Make sure we're looking at the correct event:
if (event.data.type && (event.data.type == "FROM_PAGE")) {
showDialog(event.data.text);
}
}, false);
I haven't tested the above, so please consider it to be pseudocode. A similar example is available here: http://developer.chrome.com/extensions/content_scripts.html#host-page-communication
这篇关于JavaScript不能调用内容脚本JS功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
