从书签中加载模态窗口(如亚马逊愿望清单书签)

Question

我正在使用一个书签来加载一个html页面,这个页面都很好用,但是,由于浏览器通常在外面很难看,所以看起来并不那么热!

有没有办法加载页面完全无框架？就像它的jquery模态版本我认为不可能在页面内,可以说是覆盖自己.

有没有办法可以在document.write命令中抛出页面并将其中的js版本放在那里？或者其他一些方式？

亚马逊示例:

使用以下代码创建一个书签,以便更清楚地了解我的意思 - 如果您没有帐户,则无关紧要,您将看到效果.

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

所以你的bookmarklet看起来像: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));