javascript 对象看不到彼此?::google chrome 扩展

标签 javascript object google-chrome-extension

我有两个文件

一个叫做 stats.js

一个叫做 storage.html

在 stats.js 中包含

var stats = {
  myFunc : function() {
    //do something
  }
}

在 storage.html 我有

<html>
<head>
<script src="stats.js"></script>
<script>
$(document).ready(function() {
   stats.myFunc(); 
});
</script>
</head>
</html>

但是我明白了

Uncaught TypeError: Cannot call method 'myFunc' of undefined


更新
好的,这是一个非常简化的示例。

它的基础是,

这是一个 google chrome 扩展,所以你会看到一些特定的代码。

这里是相关的文字页面:

Popup.html

<html>
    <head>
        <title>Extension</title>
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
        <script src="js/popup.js"></script>
        <script src="js/statsapi.js"></script>
        <link type="text/css" rel="stylesheet" href="css/popup.css" />
    </head>
    <body>
        <div id="content">
        </div>
    </body>
</html>

popup.js

$(document).ready(function() {
    if(background.storage.get('firstRun') == null)
        background.initialize();

    if(background.storage.get('metaExpire') >= Date.parse(Date()))
        background.updateMeta();

    $('#content').append(read_object(stats.getMetaData()));
});

function read_object(object){
    var $obj = $('<div />');
    for(var o in object) {
        $obj.append(o+' : ');
        if(typeof(object[o]) == 'object' && object[o] != null)
            $obj.append(read_object(object[o]));
        else
            $obj.append(object[o]+'<br />');
    }
    return $obj;
}

list .json

{
  "name": "Halo Reach: Stats",
  "description": "This extension allows you to keep track of your own, and your friends Halo Reach Stats.",
  "version": "1.0.0.1",
  "permissions": [
    "http://www.bungie.net/"
  ],
  "icons": { 
      "128": "images/logo/logo128.jpg",
      "64": "images/logo/logo64.jpg",
      "32": "images/logo/logo32.jpg",
      "16": "images/logo/logo16.jpg"
  },
  "browser_action": {
    "default_title": "Open Stats",
    "default_icon": "images/logo/logo32.jpg",
    "popup": "popup.html"
  },
  "background_page": "background.html"
}

statsapi.js

var background  = chrome.extension.getBackgroundPage();
var apikey      = background.storage.get('apikey');
var gamertage   = background.storage.get('gamertag');
var page        = '0';

var stats = {
    getMetaData : function() {
        var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/metadata/'+apikey;
        console.log(url);
        $.ajax({
            url: url,
            success: function(data) {
                return data;
            }
        });
    },

    meta : {
        read : function(param) {
            var meta = background.storage.get('metaData');
        }
    }
};

Background.html

<html>
    <head>
        <script src="js/statsapi.js"></script>
        <script>
            var storage = {
                set : function (key, value) {
                    window.localStorage.removeItem(key);
                    window.localStorage.setItem(key, value);
                },            
                get : function (key) {
                    return window.localStorage.getItem(key);
                },            
                clear : function () {
                    window.localStorage.clear();
                }
            };

            function updateMeta() {
                var meta = stats.getMetaData();
                if(meta['status'] == 0){
                    storage.set('metaData', JSON.stringify(meta));
                    storage.set('metaExpire', Date.parse(Date())+900000);
                }
            }

            function initialize() {
                storage.set('apikey', '***');
                storage.set('gamertag', 'The Hailwood');
                updateMeta();
            }
        </script>
    </head>
</html>

当扩展被调用时,它会调用 popup.html

并且文档就绪的 javascript 被调用。

首次运行检查失败,

所以它在background.html中调用了initialize()

但这就是错误发生的地方。

实际错误是

Uncaught TypeError: Cannot call method 'getMetaData' of undefined.

那么为什么它看不到统计类呢?

这不是脚本包含问题,就好像我得到的 statsapi.js 的路径是错误的

Uncaught ReferenceError: stats is not defined.

问题似乎出在 var stats {} 下,好像我有一个名为 test() 的函数,我可以调用它:/

嗯,

是否存在问题,因为它是外部样式表?

最佳答案

我怀疑错误出在其他地方 - 这些是我的例子:

mark@localhost:~/ccsite$ cat cat.js 
var stats = {
  myFunc : function() {
    alert('wtf');
  }
}


mark@localhost:~/ccsite$ cat hat.htm 
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script src="cat.js"></script>
<script>
$(document).ready(function() {
   stats.myFunc(); 
});
</script>
</head>
</html>

在 FF、IE6 或 Chrome 中查看 hat.htm 会产生警告“wtf”。正如所写,你会得到 $ 是未定义的,因为它当然不包括 jQuery,所以我添加了它。

所以,您的问题可能出在其他地方。我假设这是一个简化的示例 - 您的页面中还发生了什么?

关于javascript 对象看不到彼此?::google chrome 扩展,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3820466/

相关文章:

javascript - 从 Javascript-Object 生成表单

javascript - Reactjs : How to set navigator. geolocation.getCurrentPosition 在cookie中

javascript - 使用 jquery 日历默认选择前一个日期

iphone - 遍历 NSArray objectAtIndex

javascript - 如何在 Chrome 扩展程序中静音外部网页

javascript - 如何在 sweet alert 2 中启用输入确认按钮

javascript - 如何使用 JavaScript 根据条件从数组中删除项目

javascript - 将对象的特定属性转换为对象数组

javascript - 在 chrome 扩展中使用页面的 Angular JS

javascript - 如何从 chrome 扩展访问 angularjs 根范围