从书签（如Amazon wishlist bookmarklet）加载模式窗口 [英] Load a modal window from a bookmarklet (like the Amazon wishlist bookmarklet)

问题描述

我使用书签来加载一个HTML页面，所有的工作都很好，但是看起来不那么热，因为浏览器一般在外面丑陋！

I am using a bookmarklet to load an html page which all works great, but, doesn't look so hot due to browsers generally being ugly around the outside!

有没有办法加载页面完全无框？就像一个jquery模式版本的它，我不认为是可能从页面内，覆盖自己说话。

Is there a way to load the page completely frameless? Like a jquery modal version of it which I don't think is possible from within the page, overlaying itself so to speak.

有一种方法可能抛出页面在document.write命令并把它的一个js版本而不是？还是其他方式？

Is there a way to maybe throw the page out in document.write commands and put a js version of it out there instead? Or some other way?

亚马逊示例：

使用以下代码创建书签以获得更清晰的

Create a bookmarklet using the following to code to get a clearer example of what I mean - doesn't matter if you don't have an account you'll see the effect.

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

推荐答案

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

If all you want is to show some html that you have on another page, you can do something like this:

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;   
}​

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

Of course, you should load these styles from a remote host:

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。您可以添加关闭按钮，各种事件等。在这一点上，做什么亚马逊做和使用脚本/样式表加载器从远程主机加载文件是有意义的，如：

So your bookmarklet looks like: http://jsfiddle.net/radu/mTKHQ/. This is with the css hosted locally since I didn't bother uploading it anywhere. Now, this is very barebones and there is obviously a lot more you can do. First of all, you can write your own DOM instead of using an iFrame. You can add a close button, various events, etc. At that point, it would make sense to do what amazon did and use a script/stylesheet loader to load files from a remote host, like so:

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

这篇关于从书签（如Amazon wishlist bookmarklet）加载模式窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！