小书签如何避免弹出窗口阻止程序 [英] How a bookmarklet can avoid the popup blocker

问题描述

我写了一个小书签，用于在弹出窗口中使用谷歌翻译器快速翻译选定的文本:

I wrote a bookmarklet for quickly translating selected text using Google Translator in a popup window:

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 弹出窗口阻止程序不允许打开新窗口.我可以为使用弹出窗口的每个站点添加例外，但这可能很烦人...

However, the Firefox popup blocker does not allow the new window to be opened. I can add exceptions for every site where I use the popup, but it can be pretty annoying...

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

I thought bookmarklets could open popup windows - actually, a lot of them do it, right? What am I doing wrong? Or is it not possible to do it?

推荐答案

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

There is another way of working around the popup blocker by first including a link overlaid on the page and then allowing the user to click that to generate the popup. The bookmarklet javascript can then be stored in a separate file. This is how Pinterest's bookmarklet manages to do it. First they select images from the page and overlay it directly on the page. Then when the user clicks to select one of the photos the popup appears. Because this action was initiated by the user, the popup works.

这里有一些你可以用来测试的代码:

Here's some code you can use to test:

将它放在一个名为 bookmarklet.js 的文件中

Place this in a file named 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);

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

And then your bookmarklet link can be like this:

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

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

Alternatively, you need to include the popup in the actual bookmarklet link. Which in turn will mean that the only way to make any changes is for the user to re-install the bookmarklet.

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

In addition to the above method, I later found that there's even another way to work around this by using easyXDM. It can help you work around the Same Origin Policy http://easyxdm.net/wp/

使用它，您可以将 iframe 用于您的书签，甚至可以在 iframe 中添加一个关闭"链接，该链接将能够从父页面中删除 iframe.

Using this, you can use an iframe for your bookmarklet and you can even have a "close" link inside your iframe that will be able to remove the iframe from the parent page.

这篇关于小书签如何避免弹出窗口阻止程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！