Question

我正在创建一个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？并不是我如何定位链接？

Answer 1

问题是您的扩展程序全局页面无法直接访问当前加载的页面的DOM。为了能够实现您的需求，您必须使用Injected Script并使用messaging proxy to talk to the page。

例如，您的全局视图如下：

<!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中，您需要添加两个“Start Scripts”，一个是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);

Answer 2

我看到的一个明显的事情是你的$(document).ready()函数位于另一个函数中。这基本上减轻了对$(document).ready()的需求，前提是只要在DOM和jQuery完全加载后调用该函数。

重新排列代码，只在加载DOM和jQuery后添加事件侦听器。是您使用$(document).ready()回调的内容。
此外，我在.each()的回调函数中看到了另外一个问题。该函数需要处理索引及其引用的元素的两个参数。对each()的调用会迭代一系列元素。对于进入回调函数的每个元素，其索引作为参数传递，也作为位于该索引处的元素本身传递。有关详细信息，请查看documentation。

$(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()（除非有其它引用）。

这个简单的Safari扩展代码有什么问题？

2 个答案: