3

我正在创建一个 Safari 扩展，它将保留在 Safari 的菜单栏中，单击后，它将打开包含某个字符串的所有链接。但是，它不起作用。

这是我的扩展生成器屏幕的样子：http: //i.imgur.com/xRXB1.png

我没有设置任何外部脚本，因为我的 HTML 文件中有脚本，因为我只希望它在单击时运行。

我有一个 global.html 页面，其中包含以下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script>
            safari.application.addEventListener("comnand", performCommand, false);

            Function performCommand(event) {  
                if (event.command == "open-designs") {  
                    $(document).ready(function() {
                        $('a[href*="/Create/DesignProduct.aspx?"]').each(function() {
                            window.open($(this).attr('href'),'_blank');
                        });
                    });
                }  
            }
        </script>
    </body>
</html>

这不应该工作吗？我可以混合使用 jQuery 和 JS 编写，因为 jQuery 是 JS？这不是我如何定位链接吗？

4

2 回答 2

4

问题是您的扩展全局页面无法直接访问当前加载页面的 DOM。为了能够实现您的需求，您必须使用注入脚本并使用消息代理与页面对话。

例如，您的全局看起来像：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="jquery.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                safari.application.addEventListener("command", performCommand, false);
            });

            function performCommand(event) {  
                if (event.command == "open-designs") { 
                    safari.application.activeBrowserWindow.activeTab.page.dispatchMessage("open-designs", "all");
                }  
            }
        </script>
    </body>
</html>

然后，在 Extension Builder 中，您需要添加两个“启动脚本”，一个是 jquery，另一个是加载到页面中的新文件，看起来类似于：

function extensionname_openAll(event)
{
    if (event.name == 'open-designs')
    {
        $('a[href*="/Create/DesignProduct.aspx?"]').each(function(index,elem) {
            window.open($(elem).attr('href'),'_blank');
        });
    }
}
safari.self.addEventListener("message", extensionname_openAll, true);
于 2012-05-13T12:32:22.873 回答
3

  1. 我看到的一件清楚的事情是您的$(document).ready()函数位于另一个函数中。这从本质上减轻了对$(document).ready()只在 DOM 和 jQuery 完全加载后调用该函数的需求。

    重新排列代码以仅在加载 DOM 和 jQuery 后添加事件侦听器。 这就是您使用$(document).ready()回调的目的。

  2. 此外，我还看到 .each(). 该函数需要处理两个参数，索引和它引用的元素。each() 对元素集合的迭代调用。对于进入回调函数的每个元素，其索引以及位于该索引处的元素本身作为参数传递。查看文档以获取更多信息。

$(document).ready(function() {
 safari.application.addEventListener("command", performCommand, false);
 console.log("Document is ready to go!");
});

function performCommand(event) {  
  console.log("event recieved");
  if (event.command == "open-designs") {     
    console.log("got 'open-designs' event");
    $('a[href*="/Create/DesignProduct.aspx?"]').each(function(index,elem) {
      console.log("opening window", index, elem);
      window.open($(elem).attr('href'),'_blank');
    });
  }  
}

您使用$(document).ready()回调作为 DOM 已准备好并且 jQuery 已初始化的指示。一旦你知道一切准备就绪，你就可以设置你的事件监听器了。performCommand()在添加监听器之前不能调用该函数（除非有其他引用）。

于 2012-05-10T17:55:20.277 回答