13

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');
})();

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?

brandizzi
  • 26,083
  • 8
  • 103
  • 158

4 Answers4

13

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:

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.

EDIT: 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/

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.

daamsie
  • 1,539
  • 10
  • 15
  • 1
    You can even throw an id on that anchor and do some shenanigans like document.getElementById('myid').click() and just fire it off the bat (gray area here...) Native DOM .click is hard to find support documentation for, but modern chrome and FF work fine in my brief tests. – Alex Mcp May 26 '13 at 06:45
7

One way to prevent browsers from prompting a pop-up blocker is to have your javascript fully contained within the anchor tag.

Once you reference another file, it apparently triggers the browser's pop-up blocker.

For example, the following code does not trigger a pop-up blocker when a user drags the anchor to their browser's bookmark bar:

<a href="javascript:window.open('http://tagsby.me/index.small.php','newWindowName','width=960,height=400,scrollbars=yes,status=no,titlebar=no,toolbar=no');void(0);">No blocker</a>

However, if you reference the same code in another file noblocker.js that has been appended to the document object for the site the user is currently visiting:

<a id="tbm" class="testing" href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://domain.com/noblocker.js';})();">

it will trigger the pop-up blocker. There may be another way, but this is what I have working on my site http://tagsby.me right now.

Moluv
  • 71
  • 1
  • 2
  • Did you figure out another way? I see that Pinterest manages to have a non-blocked pop-up through their "Pin it" bookmarklet even though it is called through a remote javascript file - Check it out live on http://pinterest.com/about/goodies/ – gwendall Jun 12 '12 at 23:11
1

Interesting question, my gut feeling is that it is not possible because the browser does not necessarily keep track of which code is trying to open a new window, so it can't 'allow' it since it came from site X.

An option that I feel is actually better is open the content in a dialog box in the same window. Take a look at how to implement a jquery bookmarklet and the rest should be straight-forward:

http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/

Abdullah Jibaly
  • 53,220
  • 42
  • 124
  • 197
  • It is strange because pepole say that it would be possible here: stackoverflow.com/q/4048008/287976 However, I tried to use one bookmarklet I believed that could do it (a bookmarklet for saving links on Delicious): firstly it failed, and then it just changed the location of the document... That is unfortunate, because I really wanted to open it in another window... Maybe I try jQuery, but I bet it will be enough to me to add exceptions for some common sites from where I want to translate some text... – brandizzi Jan 06 '11 at 17:03
-2

The popup blocker has a facility to add exceptions. perhaps try adding an exception for translate.google.com

(tools menu->options->content section)

horatio
  • 1,426
  • 8
  • 7
  • 1
    Actually, it does not work because the site with the content is considered the source site. For example, if I ask it to translate a word in es.wikipedia.org, I should add an exception to es.wikipedia.org and so on to any other sites... – brandizzi Jan 05 '11 at 22:47
  • I apologize, I somehow missed that part of your OP – horatio Jan 05 '11 at 22:54
  • Actually, I added it after posting but without even see your suggestion. So it is ok :) – brandizzi Jan 05 '11 at 23:17
  • Original Post/Original Poster – horatio Jan 06 '11 at 15:40