从书签中加载模态窗口（如亚马逊愿望清单书签）
我正在使用书签加载一个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);
所以你的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));
最简单，最轻量级的解决方案是使用window.open 。
如下所示将在屏幕中间显示600×250窗口。 只显示标题栏，可以显示窗口的标题。
将其粘贴到浏览器的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)();
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/
在查看更多内容并检查出现的书签时，以下是整体代码结构：
javascript: (function() { var w = window, l = w.location, d = w.document, s = d.createElement('script'), e = encodeURIComponent, x = 'undefined', u = 'http://www.amazon.co.uk/wishlist/add'; if (typeof s != 'object') l.href = u + '?u=' + e(l) + '&t=' + e(d.title); function g() { if (d.readyState && d.readyState != 'complete') { setTimeout(g, 200); } else { // testing if AUWLBook is undefined (AUWL is their global object for it) // If it is, they add the
正如你所看到的那样，正在创建一个匿名函数，这里发生的事情就是他们正在创建一个脚本元素s = d.createElement（'script'）到你当前的文档中，然后加载其余的bookmarklet 。
// since their global object will be undefined at first they create it if (typeof AUWLBook == x) s.setAttribute('src', u + '.js?loc=' + e(l)), d.body.appendChild(s);
至于href的字符串构建......看起来像l.href = u + '?u=' + e(l) + '&t=' + e(d.title); 是为了他们的内部参考，所以他们知道你来自哪个页面/等，我假设他们正在构建愿望列表项目来自页面标题（这至少是它的样子）。
你可以在这里看到他们的整个JS代码，他们有很多事情要做： Amazong Bookmarklet JS Link
但正如您所看到的，他们直接从Javascript构建整个弹出窗口和DOMelements：
// (part of the AUWLBook object) showPopover : function(args){ // etc etc... // open in window if it can't create a popover if (!this.canDisplayPopover()) { window.location.href = 'https://www.amazon.co.uk/wishlist/add' + '?u=' + encodeURIComponent(window.location) + '&t=' + encodeURIComponent(document.title); return; } // Then comes just an insane amount of lines of creating all the elements floater = shmCreateElement('table', { width: bookmarkletWidth, border: '0', id: 'auwlPopover' }, {position: 'absolute', zIndex: '999999999', width: bookmarkletWidth, tableLayout: 'auto', lineHeight: '100%', borderCollapse: 'collapse'});
shmCreateElement是他们的内部html创建函数（我建议复制它）
function shmCreateElement(tagName, props, styles, children) { ... }
所以我想基本上你需要拥有你想要完全来自JS的任何东西，将它注入到当前页面文档DOM中，然后你去了。