小书签如何避免弹出窗口阻止程序

bra*_*zzi 13 javascript firefox bookmarklet popup

我写了一个书签,用于在弹出窗口中使用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');
})();
Run Code Online (Sandbox Code Playgroud)

但是,Firefox弹出窗口阻止程序不允许打开新窗口.我可以为每个使用弹出窗口的网站添加例外,但它可能非常烦人......

我认为bookmarklets可以打开弹出窗口 - 实际上,很多人都这样做,对吧?我究竟做错了什么?或者是不可能做到的?

daa*_*sie 12

还有另一种解决弹出窗口阻止程序的方法,首先包括覆盖在页面上的链接,然后允许用户单击该链接以生成弹出窗口.然后,书签javascript可以存储在单独的文件中.这就是Pinterest的bookmarklet成功实现的目的.首先,他们从页面中选择图像并将其直接叠加在页面上.然后,当用户单击以选择其中一张照片时,弹出窗口就会出现.由于此操作是由用户启动的,因此弹出窗口有效.

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

将其放在名为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);
Run Code Online (Sandbox Code Playgroud)

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

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

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

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

使用此功能,您可以将iframe用于书签,甚至可以在iframe中设置"关闭"链接,以便从父页面中删除iframe.


小智 7

阻止浏览器提示弹出窗口阻止程序的一种方法是让您的javascript完全包含在锚标记中.

一旦你引用另一个文件,它显然会触发浏览器的弹出窗口阻止程序.

例如,当用户将锚点拖动到浏览器的书签栏时,以下代码不会触发弹出窗口阻止程序:

<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>
Run Code Online (Sandbox Code Playgroud)

但是,如果您在另一个文件noblocker.js中引用了相同的代码,该文件已附加到用户当前正在访问的站点的文档对象:

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

它会触发弹出窗口阻止程序.可能还有另一种方式,但这就是我现在在我的网站http://tagsby.me上工作的内容.