我正在使用一个书签加载一个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()}())
解决方法
如果你想要的是在另一个页面上显示一些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/.这是在本地托管,因为我没有打扰上传到任何地方.现在,这是非常准确的,显然还有很多你可以做的.首先,您可以编写自己的DOM,而不是使用iFrame.您可以添加关闭按钮,各种事件等.在这一点上,做一些亚马逊做的事情和使用脚本/样式表加载器从远程主机加载文件是有意义的,像这样：
(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));
