javascript – 书签如何避免弹出式窗口拦截器

我写了一个书签,可以在弹出的窗口中使用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弹出窗口阻止程序不允许打开新窗口.我可以为我使用弹出窗口的每个站点添加例外,但它可以是相当烦人的…

我认为书签可以打开弹出窗口 – 其实很多人都这么做,对吧？我究竟做错了什么？还是不可能做到这一点？

解决方法

还有另一种方法来围绕弹出窗口阻止程序,首先包括覆盖在页面上的链接,然后允许用户单击以生成弹出窗口.然后可以将bookmarklet javascript存储在单独的文件中.这是Pinterest的bookmarklet如何设计.首先,他们从页面中选择图像,并将其直接叠加在页面上.然后当用户单击以选择其中一张照片时出现弹出窗口.由于此操作是由用户启动的,所以弹出窗口起作用.

以下是可以用来测试的代码：

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

var popupProperties='width=600,height=400,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.