JavaScript 不能调用内容脚本 JS 函数答案

【问题标题】：JavaScript can not call content script JS functionJavaScript 不能调用内容脚本 JS 函数
【发布时间】：2013-01-20 06:22:12
【问题描述】：

我正在开发 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(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() 是内容脚本中的函数。如下

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();
}

但它给出了错误

Uncaught ReferenceError: showdialog is not defined (program):1
(anonymous function) (program):1
b.event.dispatch (program):3
v.handle (program):3

【问题讨论】：

标签： html google-chrome google-chrome-extension google-chrome-devtools

【解决方案1】：

内容脚本在称为隔离的特殊环境中执行世界。他们可以访问他们被注入的页面的 DOM，但不适用于页面创建的任何 JavaScript 变量或函数。它查看每个内容脚本就好像没有其他 JavaScript 在它正在运行的页面上执行。反过来也是一样的：页面上运行的 JavaScript 不能调用任何函数或访问任何由内容脚本定义的变量。

见http://developer.chrome.com/extensions/content_scripts.html#execution-environment

我建议尝试将 DOM 共享到 communicate between the content script and the page 或 Message Passing。

页面上的代码示例如下：

function showDialog(url) {
    window.postMessage({
        type: "FROM_PAGE",
        text: url
    }, "*");
}

在内容脚本中：

// 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);

我没有测试过上面的，所以请认为它是伪代码。此处提供了一个类似的示例：http://developer.chrome.com/extensions/content_scripts.html#host-page-communication

【讨论】：