从bookmarklet加载模式窗口(如Amazon wishlist bookmarklet)

Question

我正在使用一个bookmarklet来加载一个html页面，所有的工作都很棒，但是，由于浏览器的外观一般都很丑陋，所以看起来并不是那么热！

有没有一种方法可以完全无框架地加载页面？就像它的jquery模式版本，我认为它不可能从页面内部，可以说是覆盖自身。

有没有一种方法可以在document.write命令中丢弃页面，并将它的js版本放在那里？或者其他方式？

亚马逊示例：

使用以下代码创建一个bookmarklet，以便更清楚地了解我的意思--如果您没有帐户，您将看到效果。

javascript:(function(){var%20w=window,l=w.location,d=w.document,s=d.createElement('script'),e=encodeURIComponent,o='object',n='AUWLBookenGB',u='https://www.amazon.co.uk/wishlist/add',r='readyState',T=setTimeout,a='setAttribute',g=function(){d[r]&&d[r]!='complete'?T(g,200):!w[n]?(s[a]('charset','UTF-8'),s[a]('src',u+'.js?loc='+e(l)+'&b='+n),d.body.appendChild(s),f()):f()},f=function(){!w[n]?T(f,200):w[n].showPopover()};typeof%20s!=o?l.href=u+'?u='+e(l)+'&t='+e(d.title):g()}())

Answer 1

如果你想要的只是在另一个页面上显示一些html，你可以这样做：

var modal = document.createElement('iframe');
modal.setAttribute('src', 'http://codinghorror.com');
modal.setAttribute('scrolling', 'no'); // no scroll bars on the iframe please
modal.className = 'modal';
document.body.appendChild(modal);

有一些基本的风格：

.modal {
    border:0;            
    height:200px;
    position:fixed;
    right:20px;
    top:20px;
    width:200px;
    z-index:101;   
}​

当然，您应该从远程主机加载这些样式：

var c = document.createElement('link');
c.type = 'text/css';
c.rel = 'stylesheet';
c.href = '//example.com/main.css';
document.body.appendChild(c);

所以你的书签看起来像：http://jsfiddle.net/radu/mTKHQ/。这是在本地托管的css，因为我没有费心将其上传到任何地方。现在，这是非常简单的，显然你可以做更多的事情。首先，您可以编写自己的DOM，而不是使用iFrame。您可以添加关闭按钮、各种事件等。在这一点上，像amazon那样使用脚本/样式表加载器从远程主机加载文件将是有意义的，如下所示：

(function (d) {
    var s = d.createElement('script');
    s.type = 'text/javascript';
    s.async = true;
    s.src = '//example.com/main.js';
    d.body.appendChild(s);
    var c = d.createElement('link');
    c.type = 'text/css';
    c.rel = 'stylesheet';
    c.href = '//example.com/main.css';
    d.body.appendChild(c);
}(document));

用javascript:准备这个，你就得到了新的书签小程序：

javascript:(function(d){var s=d.createElement('script');s.type='text/javascript';s.async=true;s.src='//example.com/main.js';d.body.appendChild(s);var c=d.createElement('link');c.type='text/css';c.rel='stylesheet';c.href='//example.com/main.css';d.body.appendChild(c);}(document));

Answer 2

最简单、最轻量级的解决方案是使用window.open。

类似下面的内容将在屏幕中央显示一个600x250的窗口。只有标题栏会显示，它可以显示窗口的标题。

将此内容粘贴到浏览器的URL字段中，以进行试用：

javascript:(function()%7Bvar%20d=document;window.open('http://stackoverflow.com','_blank','width=600,height=250,left='+(screen.width/2-300)+',top='+(screen.height/2-125))%7D)();

Answer 3

javascript:(function()%20{if(typeof%20jQuery=='undefined'){var%20jqit=document.createElement('script');jqit.type='text/javascript';jqit.src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js';document.getElementsByTagName('head')[0].appendChild(jqit);}%20_my_script=document.createElement('script');_my_script.type='text/javascript';_my_script.src='http://font-friend.googlecode.com/svn/trunk/font-friend.js';document.getElementsByTagName('head')[0].appendChild(_my_script);})();

这是"font-friend“bookmarklet的代码，它在给定的站点上创建一个弹出窗口。您可以根据个人需求更改代码引用，但应该给出一个起点。

这是指向它的链接http://somadesign.ca/projects/fontfriend/