javascript - 小书签如何避免弹出窗口拦截器

Question

我写了一个小书签，用于在弹出窗口中使用 Google Translator 快速翻译所选文本:

javascript:(function(){
    var text = encodeURI(document.getSelection());
    if (!text.length) {
        text = prompt('Texto')
    }
    var url = 'http://translate.google.com/translate_t?hl=&ie=UTF-8&text=' + text + ' &sl=es&tl=pt#';
    window.open(url,'trans','left=20,top=20,width=1000,height=500,toolbar=0,location=0,resizable=1');
})();

但是，Firefox 弹出窗口阻止程序不允许打开新窗口。我可以为每个使用弹出窗口的站点添加异常(exception)，但这可能会很烦人...

我以为小书签可以打开弹出窗口 - 实际上，很多小书签都这样做，对吧？我究竟做错了什么？还是不可能做到？

Answer 1

还有另一种解决弹出窗口拦截器的方法，首先包括一个覆盖在页面上的链接，然后允许用户单击该链接以生成弹出窗口。然后可以将小书签 javascript 存储在单独的文件中。这就是 Pinterest 的小书签设法做到这一点的方式。首先，他们从页面中选择图像并将其直接覆盖在页面上。然后，当用户单击以选择其中一张照片时，会出现弹出窗口。因为此操作是由用户发起的，所以弹出窗口有效。

下面是一些您可以用来测试的代码:

将其放在名为 bookmarklet.js 的文件中

var popupProperties='width=600,height=400,toolbar=0,location=0,resizable=1';
var newA = document.createElement("a");
var url = 'http://www.stackoverflow.com';
newA.setAttribute("href","javascript:window.open(url,'Hi',popupProperties);");
newA.setAttribute("style","position:fixed;z-index:9999999;top:0;left:0;width:100px;height:100px;color:#000;background:#fff;display:block;");
var newT = document.createTextNode("Open this");
newA.appendChild(newT);
document.body.appendChild(newA);

然后你的书签链接可以是这样的:

javascript:var jsCode = document.createElement('script');jsCode.setAttribute('src', 'http://localhost/bookmarklet.js?r='+Math.random()*99999999);document.body.appendChild(jsCode);

或者，您需要在实际的小书签链接中包含弹出窗口。这反过来意味着进行任何更改的唯一方法是用户重新安装小书签。

编辑:除了上述方法外，我后来发现还有另一种方法可以解决这个问题，那就是使用 easyXDM。它可以帮助您解决同源策略 http://easyxdm.net/wp/

使用它，您可以将 iframe 用于您的小书签，您甚至可以在您的 iframe 中有一个“关闭”链接，该链接将能够从父页面中删除 iframe。